毕业后的第一次面试2
文章内容接上一篇文章继续：
男面试官：既然你做过一定的项目，那你知道浏览器渲染页面的流程是什么？简单说一下吧。
我：第一步：当然就是解析HTML成一个DOM树，进行深度遍历，遍历所有的节点；第二步：对CSS的解析，讲CSS解析成CSS规则树；第三步：根据DOM树与CSS规则构建render树，浏览器会计算网页中有哪些节点，解析各个节点之间的从属关系与CSS并计算当前节点所在的位置；第四步：遍历render树会在页面中绘制各个元素的位置。
男面试官：那在什么情况下才会重新在加载DOM树并使得影响加载速度呢？简单说几个你遇到过的情况。
我：只有在页面发生重构的时候才会重新加载DOM树，在实际情况我遇到的有这几个情况：比如页面被刷新了、重新有DOM操作被执行、CSS的属性发生了变化等。
女面试官：那你在实习也好工作也好的这样的一个过程中接触过TypeScript 吗？了解Typescript有哪些好处？
我：接触过的，我了解的有这样优点：1、Typescript在编译的时候回具有强类型判断性；2、Typescript可以模块化，在JS中我们可以利用Typescript的关键字module进行类似于命名空间的使用效果，使用时可以使用‘.’作为分隔符；3、Typescript允许你事先声明一个已有的变量和类型，在使用的时候利用强类型的方式去调用即可。（注意我们在使用Typescript的时候一定要安装：npm install -g typescript）
女面试官：对 webpack 有了解吗？bundle 、chunk和 module 有什么区别？
我：在之前的实习过程中使用过，webpack是一种Vue特有的模块打包机，bundle 是文本pack打包出来的文件，chunk是webpack在模块进行依赖分析的时候代码分割出来的代码块，而且bundle是由chunk组成的，module是webpack开发的单个模块（这里是我背下来的一些概念，详情参照：https://juejin.im/post/5d70ad50f265da03cf7aae91）
男面试官：在页面中css 会阻塞页面渲染吗？为什么会出现这样的情况？会的话该怎么解决呢？给你这样一个场景我现在只需要加载首页的CSS层叠样式，你会怎么做？
我：肯定会的，应为CSS样式决定了DOM元素的样式、布局，所以浏览器在加载页面会对CSS进行初始化。怎么解决，我是这样想的：我在页面加载的过程中推迟暂时用不到的页面CSS样式，等待需要渲染的元素渲染完成后在加载暂时用不到的CSS样式表，比如我可以把暂时用不到的CSS样式表防止在body元素,简单说就是<link>元素放在body元素的最下面。如果只需要加载首页的CSS样式的话我把其他在首页暂时用不上的CSS样式的<link>放在body元素最下面。
男面试官：众所周知，Vue是MVVM的开发模式，谈谈你对MVVM的理解。
我：所谓的MVVM模式就是：model、view、viewmodel，其中model是数据模型，所有的业务逻辑都在model层；view即为UI视图，用来展示数据；viewmodel是对model层的数据进行监听，以此来处理用户交互操作
女面试官：问了这么多，可以看得出来你对Vue的一些基本认识做的还不错，那么请问，在Vue中v-show与v-if的区别是什么呢？
我：在Vue中v-show是CSS的切换，比如我现在需要对我当前元素添加一个不同于其他元素的样式就可以通过v-show进行切换，而v-if是条件渲染，它仅有的两种结果为：true/false，当为true是条件触发。反之则条件不触发。
男面试官：那你理解Vue中的computed、watch、methods的区别吗？简单说一下。
我：computed看上去是方法，实际上起到的作用是计算属性，它本身可以存在，而且还可以依赖其他的computed，还能调用其他组件的data；watch其实是一种监听器，时刻监听data的数据变化，数据变化，watch进行回调；而methods作为核心，不管你的数据有没有发生变化，都会进行重新计算，所以从根本上来讲，methods是核心的方法。（其实还有一点没讲到就是：依赖数据不变的时候computed从缓存中获取，不会重新计算，methods不会。methods是一个方法，它可以接受参数，而computed不能。）
男面试官：那你知道父子组件之间如何进行传值通信吗？
我：父子组件传值有两种情况：1、父组件向子组件传值：在父组件中注册一个子组件，在子组件中定义一个props，在props创建一个属性，专门用来接收父组件传递过来的值；2、子组件向父组件传值：在子组件中使用某种方式去触发，如：点击事件，并在子组件中作为$emit的第二个参数，把需要传递的值作为实参传递给响应事件，最后在父组件中注册子组件并在子组件的标签上绑定自定义事件的监听即可。
女面试官：最后一个问题：你知道. cookie、sessionStorage、localStorage 的区别和作用是什么吗？
我：这个问题其实要追溯到在第一家公司实习的时候出现的问题，当时在开发移动端的时候后端工程师推荐我们使用cookie进行传参，但是我们最后使用的是localStorage进行的。我先讲一下他们的作用吧：他们其实都是用来跟踪浏览器用户身份的会话方式，但是他们从一定程度上又有一定的区别，第一点：cookie一般是保存在浏览器端的，session一般是保存在服务器端的。cookie一般是缓存在浏览器中，在用户进行登录时只要所缓存的cookie不被清除或者删除掉，浏览器会自动识别当前浏览器中缓存的cookie进行用户身份识别，而且cookie的生命周期一般都是随着浏览器的关闭而结束，单个的cookie保存的数据一般不超过4Kb，但是session分为sessionStorage（会话储存）与localStorage（本地储存）两个部分，两个均保存在服务器端的，当服务器收到请求需要创建session对象时，首先会检查客户端请求中是否包含sessionid。如果有sessionid，服务器将根据该id返回对应session对象。如果客户端请求中没有sessionid，服务器会创建新的session对象，并把sessionid在本次响应中返回给客户端。相较于安全性更加偏向于session，但是localStorage与sessionStorage也是有区别的，localStorage由于是本地储存，它的生命周期是永久的，即使你关闭了浏览器与客户端它也不会消失，但是sessionStorage只有在当前会话下才会起作用，如果你关闭当前页面它就会随之消失，但是你如果仅仅是刷新了当前页面或者进入了另外一个与之同源的页面，它依然存在着，而且它们在使用场景上也有一定的区别，比如用户需要需要进行长期登录时最好使用localStorage，对于那些私密敏感的登录就使用sessionStorage。
女面试官：好的，对于您的一些技能知识我们已经了解的差不多了，下面我们聊聊关于你其他方面的问题可以吗？
我：好的，您请问......
PS：后面的内容我会继续更新，请耐心等待。。。
本文纯属原创；
分类：面试浅谈；
