1、浏览器解析渲染页面**
浏览器拿到响应文本 HTML 后,接下来介绍下浏览器渲染机制
浏览器解析渲染页面分为一下五个步骤:
- 根据 HTML 解析出 DOM 树
- 根据 CSS 解析生成 CSS 规则树
- 结合 DOM 树和 CSS 规则树,生成渲染树
- 根据渲染树计算每一个节点的信息
- 根据计算好的信息绘制页面
1-1.根据 HTML 解析 DOM 树
根据 HTML 的内容,将标签
按照结构
解析成为 DOM 树
,DOM 树解析的过程是一个深度优先遍历
。即先构建当前节点的所有子节点,再构建下一个兄弟节点。 在读取 HTML 文档,构建 DOM 树的过程中,若遇到 script 标签,则 DOM 树的构建会暂停
(js单线程的原因),直至脚本执行完毕。
1-2.根据 CSS 解析生成 CSS 规则树
解析 CSS 规则树时 js 执行将暂停
,直至 CSS 规则树就绪。 浏览器在 CSS 规则树生成之前不会进行渲染。
1-3.结合 DOM 树和 CSS 规则树,生成渲染树
DOM 树和 CSS 规则树全部准备好了以后,浏览器才会开始构建渲染树。 精简 CSS 并可以加快 CSS 规则树的构建,从而加快页面相应速度。
1-4.根据渲染树计算每一个节点的信息(布局)
重绘:
某个元素的背景颜色,文字颜色等,不影响
元素周围或内部布局
的属性,将只会引起浏览器的重绘。
回流:
某个元素的尺寸
发生了变化,则需重新计算渲染树,重新渲染
回流什么时候发生?
- 添加或者删除可见的DOM元素;
- 元素位置改变;
- 元素尺寸改变——边距、填充、边框、宽度和高度
- 内容改变——比如文本改变或者图片大小改变而引起的计算值宽度和高度改变;
- 页面渲染初始化;
- 浏览器窗口尺寸改变——resize事件发生时;
1-5.根据计算好的信息绘制页面
绘制阶段,系统会遍历呈现树,并调用呈现器的“paint”方法,将呈现器的内容显示在屏幕上。