浏览器渲染过程

[JeromeYangtao]

拿到服务器返回的HTML后

1.解析 HTML

2.浏览器发送请求获取嵌入在 HTML 中的资源（如图片、音频、视频、CSS、JS等等），解析CSS

3.浏览器发送异步请求，解析JS

4.解析完成后，浏览器引擎会通过DOM Tree和CSS Rule Tree来构造Rendering Tree。

5.调用操作系统Native GUI的API绘制

注意的点：
解析HTML过程中，遇到引用CSS和JS，发起请求，JS会阻塞解析过程，CSS不会

script标签有defer(HTML解析完后执行)和async(下载完后立即执行)属性可以改变阻塞情况

重绘：当改变那些不会影响元素在网页中的位置的元素样式时，譬如background-color(背景色)， border-color(边框色)， visibility(可见性)，浏览器只会用新的样式将元素重绘一次(这就是重绘，或者说重新构造样式)。

重排：当改变影响到文本内容或结构，或者元素位置时，重排或者说重新布局就会发生。

参考文章：

浏览器的渲染：过程与原理

浏览器渲染的那些事(一)

有关网页渲染，每个前端开发者都该知道的那点事