JS-15 浏览器输入URL到页面显示过程；渲染引擎解析页面过程（HTML解析、生成CSS规则、构建RenderTree、布局、绘制）；composite合成；script属性defer和async

1_网页解析过程

浏览器输入一个URL到页面显示的过程

• 首先通过DNS服务器进行域名解析
• 解析出对应的IP地址 然后从ip地址对应的主机发送http请求 获取对应的静态资源
• 默认情况服务器会返回index.html文件
• 然后浏览器内核开始解析HTML
• 解析对应的html 生成DOM Tree
• 解析过程中 如果遇到css的link标签 则会下载对应的css文件（下载css文件和生成DOM树是同时进行）
• 下载完对应的css文件后会进行css解析 生成CSSOM( CSS object model)
• 当DOM Tree和CSSTree都解析完成之后 会进行合并用来生成Render Tree(渲染树)
• 初步生成的渲染树会显示节点以及部分样式 但是并不表示每个节点的尺寸 位置信息 于是进行Layout(布局)来生成渲染树中节点的宽度 高度位置信息
• 经过Layout之后 浏览器内核将布局时的每个frame转屏幕上的每个像素点 将每个节点绘制paint到屏幕上

2_浏览器渲染过程

2.1_常见浏览器内核

Trident （ 三叉戟）：IE、360安全浏览器、搜狗高速浏览器、百度浏览器、UC浏览器；

Gecko（ 壁虎） ：Mozilla Firefox；

Presto（急板乐曲）-> Blink （眨眼）：Opera

Webkit ：Safari、360极速浏览器、搜狗高速浏览器、移动端浏览器（Android、iOS）

Webkit -> Blink ：Google

浏览器内核，指的是浏览器的排版引擎，也称为浏览器引擎（browser engine）、页面渲染引擎（rendering engine）或样版引擎，一个网页下载下来后，就是由渲染引擎来帮助解析的。

2.2_渲染引擎解析页面过程

图片来源于一篇著名文章： https://www.html5rocks.com/en/tutorials/internals/howbrowserswork

（1）HTML解析过程

默认情况下服务器会给浏览器返回index.html文件，所以解析HTML是所有步骤的开始：解析HTML，会构建DOM Tree。例如下图

（2）生成CSS规则

在解析的过程中，遇到CSS的link元素，由浏览器负责下载对应的CSS文件：下载CSS文件是不会影响DOM的解析的.

浏览器下载完CSS文件后，就会对CSS文件进行解析，解析出相应的规则，称之为 CSSOM（CSS Object Model，CSS对象模型）。

例如下图

（3）构建Render Tree

有了DOM Tree和 CSSOM Tree后，就可以两个结合来构建Render Tree了.

注意一：link元素不会阻塞DOM Tree的构建过程，但是会阻塞Render Tree的构建过程，因为Render Tree在构建时，需要对应的CSSOM Tree；

注意二：Render Tree和DOM Tree并不是一一对应的关系，比如对于display为none的元素，压根不会出现在render tree中

例如下图

（4）布局 layout 和绘制 Paint

在渲染树（Render Tree）上运行布局（Layout）以计算每个节点的几何体。

• 渲染树会表示显示哪些节点以及其他样式，但是不表示每个节点的尺寸、位置等信息；

• 布局是确定呈现树中所有节点的宽度、高度和位置信息；

然后将每个节点绘制（Paint）到屏幕上

• 在绘制阶段，浏览器将布局阶段计算的每个frame转为屏幕上实际的像素点；

• 包括将元素的可见部分进行绘制，比如文本、颜色、边框、阴影、替换元素（比如img）

（5）回流 reflow

第一次确定节点的大小和位置，称之为布局（layout），之后对节点的大小、位置修改重新计算称之为回流（重新排布局）

什么情况下引起回流？

• 比如DOM结构发生改变（添加新的节点或者移除节点）；

• 比如改变了布局（修改了width、height、padding、font-size等值）

• 比如窗口resize（修改了窗口的尺寸等）

• 比如调用getComputedStyle方法获取尺寸、位置信息；

（6）重绘repaint

第一次渲染内容称之为绘制（paint）， 之后重新渲染称之为重绘（重新渲染）

什么情况下会引起重绘？ 比如修改背景色、文字颜色、边框颜色、样式等；

回流一定会引起重绘，回流是一件很消耗性能的事情，所以在开发中要尽量避免发生回流。

如何避免发生回流？

• 修改样式时尽量一次性修改。 比如通过cssText修改，比如通过添加class修改

• 尽量避免频繁的操作DOM。可以在一个DocumentFragment或者父元素中

• 尽量避免通过getComputedStyle获取尺寸、位置等信息

• 对某些元素使用position的absolute或者fixed。 虽然会引起回流，但是开销相对较小，不会对其他元素造成影响

3_特殊解析 – composite合成

绘制的过程，可以将布局后的元素绘制到多个合成图层中，这是浏览器的一种优化手段；

默认情况下，标准流中的内容都是被绘制在同一个图层（Layer）中的；

一些特殊的属性，会创建一个新的合成层（CompositingLayer），并且新的图层可以利用GPU来加速绘制， 因为每个合成层都是单独渲染的；

哪些属性可以形成新的合成层呢？

• 3D transforms

• video、canvas、iframe

• opacity 动画转换时；

• position: fixed

• will-change：一个实验性的属性，提前告诉浏览器元素可能发生哪些变化；

• animation 或 transition 设置了opacity、transform；

分层可以提高性能，但以内存管理为代价，不应作为 web 性能优化策略的一部分过度使用。

4_script元素和页面解析的关系

在页面的渲染过程，JavaScript在哪里？

• 浏览器在解析HTML的过程中，遇到了script元素是不能继续构建DOM树的；

• 它会停止继续构建，首先下载JavaScript代码，并且执行JavaScript的脚本；

• 等到JavaScript脚本执行结束后，才会继续解析HTML，构建DOM树；

为什么要等待JS

• 因为JavaScript的作用之一就是操作DOM，并且可以修改DOM；

• 如果等到DOM树构建完成并渲染，再执行JavaScript，会造成严重的回流和重绘，影响页面的性能；

• 所以在遇到script元素时，优先下载和执行JavaScript代码，再继续构建DOM树；

等待JS下载会带来新的问题，特别是现代页面开发中：

• 在目前的开发模式中（比如Vue、React），脚本往往比HTML页面更“重”，处理时间需要更长；

• 所以会造成页面的解析阻塞，在脚本下载、执行完成之前，用户在界面上什么都看不到；

为了解决问题，script元素提供了两个属性（attribute）：defer和async。

4.1_defer属性

defer属性告诉浏览器不要等待脚本下载，而是继续解析HTML，构建DOM Tree

• 脚本会由浏览器来进行下载，同时构建DOM Tree；

• 如果脚本提前下载好了，它会等待DOM Tree构建完成，在DOMContentLoaded事件之前先执行defer中的代码；

• 所以DOMContentLoaded总是会等待defer中的代码先执行完成。

多个带defer的脚本是可以保持正确的顺序执行的；

从某种角度来说，defer可以提高页面的性能，并且推荐放到head元素中；

注意：defer仅适用于外部脚本，对于script默认内容会被忽略

4.2_async属性

async 特性与 defer 有些类似，同时进行JS下载与DOM构建。

async让一个脚本完全独立解析：

• 浏览器不会因 async 脚本而阻塞（与 defer 类似）；

• async脚本不能保证顺序，它是独立下载、独立运行，不会等待其他脚本；

• async不能保证在DOMContentLoaded之前或者之后执行；

defer通常用于需要在文档解析后操作DOM的JavaScript代码，并且对多个script文件有顺序要求的；

async通常用于独立的脚本，对其他脚本，甚至DOM没有依赖的。