浏览器渲染页面的流程

一.浏览器渲染页面的原理及流程

浏览器的核心部分是渲染引擎，也称为浏览器的内核，负责对网页语法（如HTML、CSS、JavaScript等）解析并渲染网页。比如：Firefox使用Geoko——Mozilla自主研发的渲染引擎，Chrome使用webkit内核。

大概分为以下流程

1.浏览器发送请求，服务器返回html文件，从最初的字节->字符（程序员看懂的）->token/符号标签（机器看的懂得标记语言）->节点->构建DOM树。

DOM 树的构建过程是一个深度遍历过程：当前节点的所有子节点都构建好后才会去构建当前节点的下一个兄弟节点

2.同html差不多，解析CSS（比如link链入css文件），构建 CSSOM Tree(CSS规则树)

 

3.渲染页面结构，将 DOM Tree 和 CSSOM Tree合并，构建Render tree(渲染树)

注意：

        1.Render Tree 渲染树并不等同于 DOM 树，因为一些像 Header 或 display:none 的东西就没必要放在渲染树中了

        2.渲染树生成后，还是没有办法渲染到屏幕上，渲染到屏幕需要得到各个节点的位置和像素信息，这就需要布局（Layout）的处理了。

4.布局：reflow(重排)：根据Render tree进行节点信息计算（盒子布局等，尽量不使用table）

5.绘制：repaint(重绘)：根据计算好的信息绘制整个页面

流程就是以下5步骤：

 

---

注意：以上五个步骤并不一定一次性顺序完成

1.js代码阻止html文件的解析，js不仅可以操作DOM也可以操作CSS，如果不等js执行完后再构建DOM，可能刚渲染的页面就会变化（行内 外部都影响），等js执行完才恢复正常。
所以说：

如果是多个script脚本, 近似于同时并行下载script脚本，如果脚本资源大或者网络问题，会延迟DOM结构的渲染。

script标签内设置async时：

        script脚本会异步加载，在加载过程中不会阻塞HTML代码的解析和渲染，当script脚本加载完毕后，script脚本会立即执行，此时会阻塞HTML代码的解析和渲染，并且是哪个先下载完执行哪个；
script标签设置defer时：

        script脚本会异步加载，在加载过程中不会阻塞HTML代码的解析和渲染，当script脚本加载完毕后，script脚本不会立即执行，会被延迟到整个页面加载完毕后在按照顺序再执行；

• defer是“渲染完再执行”，async是“下载完就执行”。
• 另外，如果有多个defer脚本，会按照它们在页面出现的顺序加载，而多个async脚本是不能保证加载顺序的；

JS脚本会阻塞Render tree的构建，即阻塞了页面的渲染。我们可以在把script脚本放于body后面，来解决上面的问题，避免阻塞页面的解析渲染。

2.回流和重绘（回流一定导致重绘，重绘不一定导致回流，回流消耗性能答）

回流：当渲染数中的一些元素结构或者尺寸发生变化，浏览器重新渲染部分或者全部文档的过程叫做回流。

    导致回流的操作：

• 页面的首次渲染
• 浏览器窗口大小变化
• 内容变换
• 添加或删除节点
• 激活css伪类

重绘：当页面中的元素样式改变不影响它在文档中的位置，浏览器会将新的样式赋给元素，这个过程叫重绘。

     导致重绘的操作：

• background变化
• visibility显示和隐藏

3.优化性能
（1）不要一个个的修改 DOM 的样式，应通过 class 来修改。
（2）实现元素的动画，它的position属性，最好是设为absoulte或fixed，这样不会影响其他元素的布局
（3）可以将需要多次修改的DOM元素设置display:none，操作完再显示。（因为隐藏元素不在Dom树内，因此修改隐藏元素不会触发回流重绘）