浏览器渲染过程

浏览器中地址栏中输入东西后，按下enter键，会发生什么？
浏览器会判断：用户到底是输入了一个地址访问某网站，还是一个输入了一个关键词让搜索引擎搜？本文只说输入的是一个地址的情况。

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的详细过程

1.预扫描HTML，下载资源
2.解析HTML，得到一个DOM，添加到 DOM tree
3.如遇到style，得到一个CSSOM ，添加到 CSSOM tree
4.如遇到第一个外部css，若已下载完，同3，如果没有则继续解析HTML
5.如再遇到外部css，只要前面的外部css或本css没有下载完，就继续解析HTML，因为CSS需要顺序解析，不然层叠样式就可能错误
6.遇到script，会暂停解析HTML，等待其下载完毕。下载完毕后，如果所有的外联的css下载完毕（即使是在此script标签后的css），则执行此脚本，不然会等待css下载、解析完毕再执行
7.解析到body中的第一脚本，如果css解析完毕，则开始预渲染（first paint）

所以css的下载会阻塞js的执行、预渲染。不会直接阻塞html的解析。但是当css的下载阻塞了js的执行，js的执行又阻塞了html的解析时，css的下载就会间接阻塞html解析。

一个问题

为什么script需要放在body的最后位置？
因为其他位置会推迟或者意外的进行渲渲染。
如果没有预渲染这个行为的话，浏览器的第一次渲染是在生成完整的render tree之后。也就是html完全解析完毕（最后一个标签解析完毕，同步代码执行完毕）之后，那么script放在哪里都一样，因为总要等到它执行完毕之后才算解析完毕。
实际情况是，解析到body中的第一脚本前，浏览器就会认为已经解析得差不多了，可以进行一次预渲染。所以script如果放在head里，会推迟预渲染。如果放在body的一开头，后面的一大堆标签还没解析，等于欺骗浏览器说已经“差不多了”，也就等于违背了设计预渲染的初衷，会影响页面的效果。放在body中间也是一样的道理，所以还是放在最尾巴上比较好。

<script> 标签的async和defer属性可以改变阻塞HTML解析的情况，但是较低版浏览器不支持，所以最佳的实践是，将<script>放在</body>前。另外async还有个bug，脚本不会顺序执行，而是先下载完的先执行

image.png

参考文献

浏览器渲染页面过程与页面优化