浏览器渲染过程与原理

浏览器发出请求之后

浏览器发出请求–》DNS查询–》DNS缓存–》请求到服务器–》服务器代码运行–》返回HTML文档–》浏览器渲染页面

浏览器引擎：JS引擎和渲染引擎

浏览器渲染引擎：

IE（Trident）
Chrome（Blink）
Firefox（Gecko）
Opera（Blink）
Safari（Webkit）
UC（U3）
QQ浏览器/微信webview（X5/Blink）：原来是X5，后来改为Blink

Blink与Webkit的关系：Blink基于Webkit，原理差不多

浏览器渲染过程

DOM解析：把HTML文档解析为DOM树的过程

• 遇到<script>标签则停止解析，先执行js
• DOMContentLoaded事件在HTML文档完全加载并解析后触发，不等样式表、图片、子帧（subframes）完成加载。
• 此时图片资源并未加载完成

查看节点类型：在element处选中要查看的节点，在console处输入$0.constructor，即可看到选中节点的类型。

CSS解析：将CSS代码解析为CSS规则树的过程

• 与DOM解析同步进行
• 与script的执行互斥（js中可能要获取css属性）
• Webkit内核进行了script执行优化（当script与css无关时，不会互斥）

DOM Tree

DOM树结构与HTML标签一一对应

• display:none的元素也在DOM树中
• <script>标签也在DOM树中
• 注释也在DOM树中

Render Tree

DOM Tree + CSS Rules = Render Tree

• 每个节点为一个Render Object对象，包含宽高、位置、背景色等样式信息
• 宽高和位置是通过Layout（重排）计算出
• Render Tree和DOM Tree不完全对应
• display:none的元素不在Render Tree中
• visibility:hidden的元素在Render Tree中
• float元素、absolute元素、fixed元素会发生位置偏移
• 常说的脱离文档流，就是脱离Render Tree

重排（Layout）/回流（reflow）

• 当修改元素的位置、大小时，引起浏览器的重排
• 对一个元素的重排，可能影响到其父级元素（如，子元素的大小改变，父元素的大小可能也改变）

如何避免重排：

• 用transform做形变和位移
• 通过绝对定位，脱离当前层叠上下文（即形成新的Render Layer）

DOMContentLoaded事件在什么时候触发

DOMContentLoaded事件不直接等待CSS文件、图片的加载完成。
DOMContentLoaded事件需要等待每个静态的script标签中的JS执行完才触发。
JS的执行，需要等待位于它前面的CSS加载（如果是外联的话）、执行完成，因为JS可能会依赖位于它前面的CSS计算出来的样式。