浏览器渲染过程与原理

浏览器发出请求之后

浏览器发出请求–》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计算出来的样式。