浏览器渲染流程

每个浏览器的渲染流程并不相同，以下webkit为例，主要包括以下五步：

1、浏览器将获取的HTML文档解析成DOM树。
2、处理css标签、样式，构成层叠样式表模型CSSOM（CSS Object Model）。
3、将DOM和CSSOM合并为渲染树（rander tree）,代表一系列将被渲染的对象。
4、渲染树（rander tree）的每个元素包括的内容都是计算过得，被称为布局（layout）。
5、将渲染树（rander tree）的各个节点绘制到屏幕上，这一步被称为绘制（panting）。

具体流程:

一、构建DOM树（DOM Tree）
① DOM树在构建的过程中可能会被css和js的加载而执行阻塞。
② display:none;的元素也会在DOM树中。
③ 注释也会在DOM树中。
④ script标签会在DOM树中。

二、构建CSSDOM规则树（CSSOM Rule Tree）
① CSS解析可以与DOM解析同时进行。
② CSS解析与script的执行互斥（如：死循环）。
③ 在webkit内核中进行script执行优化，只有在js访问css时才会发生互斥。

三、构建渲染树（Rander Tree）
① Rander Tree 和DOM Tree 不完全对应。
② display：none；的元素不在Rander Tree中。
③ visibility：hidden；的元素在Rander Tree中。

四、渲染树布局（Layout Of The Rander Tree）
① float元素，absolute元素、fixed元素会发生位置偏移。
② 脱离文档流——脱离渲染树（Rander Tree）。

五、渲染树绘制（Painting The Rander Tree）

reflow（回流）:

定义：当浏览器布局发生变化时，需要重新渲染，这个过程叫做reflow（回流）。
会引起reflow的操作：
① 页面第一次渲染（初始化）。
② DOM树变化（如：增删节点）。
③ Render Tree变化（如：margin改变）。
④ 浏览器窗口重置（resize）。
⑤ 获取元素的某些属性（如：getComputedStyle()）。

repaint（重绘）:

定义：改变元素某些属性时不影响周围或布局的属性时，屏幕的一部分要重绘，但元素的几何尺寸和位置没发生变化。
关于引起repaint：回流必引起重绘，但重绘不一定引起回流。重绘可以单独触发。如：字体颜色，背景颜色等。（注：字体大小改变会触发回流）
注：display：none；的元素触发回流； visibility：hidden；的元素触发重绘。

减少 reflow（回流）及repaint（重绘）的触发次数：

① 避免逐个改变节点样式，尽量一次修改。
② 避免多次读取某些属性。
③ 用transform 做形状改变和位移改变。
④ 使用document。createDocumentFragment () 将需要添加的元素添加进去，在一次性用append()或appendChild()添加进去。
⑤ 通过绝对位移将复杂的节点元素脱离文档流。
⑥ 可以将需要多次修改的DOM元素设置 display：none；，操作完再显示。

最后

以上就是美好便当为你收集整理的浏览器渲染流程浏览器渲染流程的全部内容，希望文章能够帮你解决浏览器渲染流程浏览器渲染流程所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。