浏览器运行原理

[TOC]

In the years of IE 90% dominance there was nothing much to do but regard the browser as a “black box”, but now, with open source browsers having more than half of the usage share, it’s a good time to take a peek under the engine’s hood and see what’s inside a web browser. Well, what’s inside are millions of C++ lines…

作为一名Web开发者，了解浏览器内部原理可以帮助我们在编写网页时做出更好的决定，也可以帮助我们优化网页的性能。

浏览器的主要功能

浏览器的主要功能就是展现我们在网页上所选择的资源，这些资源常常就是HTML、PDF、图片、视频等。这些资源的地址就被定义为URI（统一资源定位符）。还有一个功能就是根据W3C的标准去解析请求下来的HTML、CSS文件。

浏览器内核

浏览器引擎也称为排版引擎、渲染引擎，当文件（HTML、XML、图片等）从互联网上下载下来的时候，就是浏览器引擎来解析的。
常见的浏览器内核有：

Trident（三叉戟）：IE、360安全浏览器、搜狗高速浏览器、百度浏览器、UC浏览器；
Gecko（壁虎）：火狐浏览器；
Presto（急板乐曲）-> Blink（眨眼）：Opera
Webkit：Safari、360极速浏览器、搜狗高速浏览器、移动端浏览器（Android）；
Webkit -> Blink：Google Chrome（从15），Microsoft Edge

渲染引擎的主要流程
浏览器渲染引擎是从资源请求下来开始的。
浏览器从网络上请求下来HTML文件，开始解析HTML文件，之后会根据HTML文档创建出来DOM树。
渲染引擎还会解析样式数据，包括HTML文件内和外部的样式表，之后再根据DOM和样式创建出渲染树，渲染树内包含了带有颜色、尺寸等视觉属性的矩形。
在渲染树经过布局操作之后，渲染树内每一个节点在屏幕内都具有具体的坐标。下一个环节就是绘制渲染树。 :::info 渲染引擎会尽可能快一点显示出来，所以它不会在构建和布局渲染树之前等待所有的HTML元素都被解析完成。一部分内容会先被解析，与此同时，另一部分的内容可能还在从网络中请求或解析过程中。 ::: 基本流程主要包括：

详细流程主要包括：

解析CSS过程
在解析的过程中，如果遇到CSS的link元素，那么会由浏览器负责下载对应的CSS文件。浏览器下载完CSS文件，就会对CSS进行解析，从而生成对应的规则树，可以称为CSSOM（CSS对象模型）。 :::warning 在下载CSS文件过程中是不会影响渲染引擎解析HTML文件的。 :::

构建渲染树的过程
在解析完DOM树和CSS规则树后，就可以结合起来构建渲染树（Render Tree）了。渲染树是按照视觉元素显示的顺序排列的。它是文档的可视化表示。目的是为了能让浏览器正确地绘制元素。
:::warning 注意：
link元素不会阻塞构建DOM树，但会阻塞渲染树
Render Tree不会和DOM Tree有一一对应的关系，比如head元素、display: none的DOM就不会出现在渲染树中。 :::

布局与绘制

布局
当节点被创建或添加到渲染树，它未必有位置或者大小。计算这些属性的过程被称为布局或回流。布局是确定元素在渲染树中的大小、位置等信息。 :::info 第一次确定节点的大小和位置，称之为布局（layout）；
之后对节点的大小、位置修改重新计算称之为回流。
:::

绘制
最后一步就是将节点绘制在屏幕上，在绘制阶段，浏览器将布局阶段计算的每个frame转为屏幕上实际的像素点；包括将元素的可见部分进行绘制，比如文本、颜色、边框、阴影、替换元素（比如img）。

回流与重绘

回流
回流就是在布局完成之后，对节点的大小和位置进行改动的过程。
什么情况下会引起回流？
DOM结构发生改变（children发生改变）
改变了布局属性（width、height、border、padding、margin等）
窗口resize
调用了getComputedStyle()方法
等…

重绘
重回就是在第一次绘制完成之后，对节点或页面进行重新绘制的过程。
什么情况下会引起重绘？
回流
改变背景色、文字颜色、边框颜色、轮廓等

减少回流
回流一定会引起重绘，然而回流是一件相当损耗性能的过程，所以开发者应该在开发过程中尽可能少引起回流。
如何减少回流？
修改样式时一次性修改
- 比如修改大小，不该修改*.style.widht = ?; *.style.height = ?，应该使用class样式的方式
减少频繁的DOM操作
- 可以在一个DocumentFragment中将要操作的DOM完成，再一次性操作。
尽量减少使用getComputedStyle()方法
对某些属性可以使用position: absolote/fixed

特殊解析 – composite合成
在绘制过程中，可以将布局后的元素绘制到多个合成图层中，这是浏览器的一种优化手段。 :::info 在默认情况下：
标准流的元素属于同一个图层（layer）
有一些特殊属性的元素，会创建一个新的合成层（CompositingLayer），并且新的图层可以利用GPU来加速绘制