浏览器渲染原理

浏览器渲染原理

-步骤：

1. 清楚HTML 生成DOM树
2. 处理CSS生成 CSSDOM树
3. 将两树合并成render 树
4. 将render 树进行布局计算
5. 将render树中的每一个节点绘制到屏幕上

• 重排，重绘

1. 当render tree 中的一部分（或全部）因为元素的规模尺寸，布局，隐藏等改变需要重新构建，会回流。每个页面至少需要一次回流，就是在页面的第一次加载的时候。
2. 重绘。当render tree中的一些元素需要更新属性，而这些属性只是影响元素的外观，风格而不影响布局的，例如background-color，就叫做重绘。

蓝色代表网络通信和HTML 解析

黄色代表javascipt执行

紫色代表样式计算和布局，即重排

绿色代表重绘