浏览器渲染过程-面试

浏览器中地址栏中输入东西后，按下enter键，会发生什么？
浏览器会判断输入的是一个地址，还是一个query。这个只说是网址的情况。

1. 浏览器会查询本地缓存的dns列表，以获取主机地址，若dns缓存未命中，则浏览器发出请求，进行查询，查询之后的结果缓存起来。
2. 连接主机
3. 发送请求
4. 获得一个服务器的响应
5. 进行渲染

渲染过程（webkit和gecko都差不多）

1. 解析HTML，得到一个DOM tree
2. 解析CSS，得到CSSOM tree
3. 将两者整合成渲染数，render tree
4. 布局（layout）， 根据Render Tree计算每个节点的位置大小等信息 （在草稿本上画了个草图）
5. 绘制（Painting ）根据计算好的信息绘制整个页面

1、2、3非常快，但是4和5比较耗时，有三个术语：
“重排” 和 “回流” 指的是重新执行步骤4
“重绘” 指重新执行步骤5
重排意味着重新计算节点的位置大小等信息，重新在草稿本上画了草图，所以一定会重绘
重绘不一定会重排，比如背景颜色改变

重排和重绘代价很高，所以浏览器并不会一有信息改变就去执行重排和重绘，而是会将多个可能的重排和重绘一次执行。是的，它可能会异步。

有两个css属性，display: none和visibility: hidden，前者会导致重排和重绘，后者会导致重绘。这是后者的有点，但缺点是此节点一直保存在内存中，占用资源。

解析HTML过程中的问题

自上而下解析HTML，遇到<script>标签，它会立即下载并执行，执行完之后，再接着解析HTML。这可能会大大延迟DOM tree的生成。脚本解析会将脚本中改变DOM和CSS的地方分别解析出来，追加到DOM Tree和Style Rules上。<script> 标签的async和defer属性可以可以改变这个情况，但是较低版浏览器不支持，所以最佳的实践是，将<script>放在</body>前。

 

 

作者：麻烦哥哥剥个橘子
链接：https://www.jianshu.com/p/e416528ea031
来源：简书
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。