说一下浏览器如何渲染页面的？
解题思路
得分点 dom树、stylesheet、布局树、分层、光栅化、合成 标准回答 浏览器拿到HTML，先将HTML转换成dom树，再将CSS样式转换成stylesheet，根据dom树和stylesheet创建布局树，对布局树进行分层，为每个图层生成绘制列表，再将图层分成图块，紧接着光栅化将图块转换成位图，最后合成绘制生成页面。 加分回答 分层的目的：避免整个页面渲染，把页面分成多个图层，尤其是动画的时候，把动画独立出一个图层，渲染时只渲染该图层就ok，transform，z-index等，浏览器会自动优化生成图层 光栅化目的：页面如果很长但是可视区很小，避免渲染非可视区的样式造成资源浪费，所以将每个图层又划分成多个小个子，当前只渲染可视区附近区域
\浏览器拿到html将htmll转换成dom树，再将css样式转换为stylesheet根据dom树和stylesheet创建布局树，对布局树进行分层，为每个图层生成绘制列表，再将图层分成图块，紧接着光栅化将图转换为位图，最后合成绘制生成页面，避免某个页面渲染，将页面份城多个图层，尤其是动画的时候，吧动画独立城一个图层，渲染时候只渲染该图层就ok， 如果某个div元素的布局大小格式造成页面布局的变化，产生重排 重排是DOM元素被js触发某种变化,渲染树需要重新计算。dom元素被js触发某种变化，渲染树需要重新计算。 某个元素的颜色背景等属性变化没有造成页面布局的变化，浏览器需要根据属性变化进行重新绘制重绘
说一下浏览器输入URL发生了什么？ 输入地址，浏览器查找域名的ip地址，浏览器向该ip地址的web服务器发送一个http请求，在发送请求之前浏览器和服务器简历tcp的三次握手，判断是否是http缓存，如果是强制缓存且在有效期内，不再向着服务器发送请求，如果是http协商 缓存向后端发送请求且和后端服务器进行对比，在有效期内，服务器返回304，直接从浏览器获取数据，如果不在有效期内服务器返回200.返回新数据，请求发送出去服务器返回重定向，浏览器再按照重定向的地址重新发送请求。如果请求的参数有问题，服务器返回404，如果服务器端挂了则返回500.如果有数据一切正常，当浏览器拿到服务器的数据之后，开始渲染页面同时获取html页面中图片视频cssjs，在这期间获取到js文件之后，会直接执行js代码，阻塞浏览器渲染。 解题思路 说一说 Vue 列表为什么加 key？
解题思路
得分点 性能优化、diff算法节点比对、key不能是index 标准回答 为了性能优化 因为vue是虚拟DOM，更新DOM时用diff算法对节点进行一一比对，比如有很多li元素，要在某个位置插入一个li元素，但没有给li上加key，那么在进行运算的时候，就会将所有li元素重新渲染一遍，但是如果有key，那么它就会按照key一一比对li元素，只需要创建新的li元素，插入即可，不需要对其他元素进行修改和重新渲染。 加分回答 key也不能是li元素的index，因为假设我们给数组前插入一个新元素，它的下标是0，那么和原来的第一个元素重复了，整个数组的key都发生了改变，这样就跟没有key的情况一样了 得分点 DNS解析、TCP握手、HTTP缓存、重定向、服务器状态码、渲染引擎和JS引擎互斥、渲染过程、浏览器进程、网络进程、渲染进程 标准回答 输入地址，浏览器查找域名的 IP 地址。 浏览器向 该 IP 地址的web 服务器发送一个 HTTP 请求，在发送请求之前浏览器和服务器建立TCP的三次握手，判断是否是HTTP缓存，如果是强制缓存且在有效期内，不再向服务器发请求，如果是HTTP协商缓存向后端发送请求且和后端服务器对比，在有效期内，服务器返回304，直接从浏览器获取数据，如果不在有效期内服务器返回200，返回新数据。 请求发送出去服务器返回重定向，浏览器再按照重定向的地址重新发送请求。 如果请求的参数有问题，服务器端返回404，如果服务器端挂了返回500。 如果有数据一切正常，当浏览器拿到服务器的数据之后，开始渲染页面同时获取HTML页面中图片、音频、视频、CSS、JS，在这期间获取到JS文件之后，会直接执行JS代码，阻塞浏览器渲染，因为渲染引擎和JS引擎互斥，不能同时工作，所以通常把Script标签放在body标签的底部。 渲染过程就是先将HTML转换成dom树，再将CSS样式转换成stylesheet，根据dom树和stylesheet创建布局树，对布局树进行分层，为每个图层生成绘制列表，再将图层分成图块，紧接着光栅化将图块转换成位图，最后合成绘制生成页面。
