JS高级编程课件02_深入浏览器的渲染原理.pdf

深入浏览器的渲染原理

王红元coderwhy

目录

1网页的解析过程

content

2浏览器渲染流程

3回流和重绘解析

4合成和性能优化

5defer和async属性

coderwhy网页被解析的过程

◼大家有没有深入思考过：一个网页URL从输入到浏览器中，到显示经历过怎么样的解析过程呢？

◼要想深入理解下载的过程，我们还要先理解，一个index.html被下载下来后是如何被解析和显示在浏览器上的.

coderwhy浏览器的内核

◼常见的浏览器内核有

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

Gecko（壁虎）：MozillaFirefox；

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

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

Webkit-Blink：GoogleChrome，Edge

◼我们经常说的浏览器内核指的是浏览器的排版引擎：

排版引擎（layoutengine），也称为浏览器引擎（browserengine）、页面渲染引擎（renderingengine）或样版引擎。

◼也就是一个网页下载下来后，就是由我们的渲染引擎来帮助我们解析的。

coderwhy渲染引擎如何解析页面呢？

◼渲染引擎在拿到一个页面后，如何解析整个页面并且最终呈现出我们的网页呢？

我们之前学习过下面的这幅图，现在让我们更加详细的学习它的过程；

coderwhy渲染页面的详细流程

◼更详细的解析过程如下：

◼/en/tutorials/internals/howbrowserswork

coderwhy解析一：HTML解析过程

◼因为默认情况下服务器会给浏览器返回index.html文件，所以解析HTML是所有步骤的开始：

◼解析HTML，会构建DOMTree：

coderwhy解析二–生成CSS规则

◼在解析的过程中，如果遇到CSS的link元素，那么会由浏览器负责下载对应的CSS文件：

注意：下载CSS文件是不会影响DOM的解析的；

◼浏览器下载完CSS文件后，就会对CSS文件进行解析，解析出对应的规则树：

我们可以称之为CSSOM（CSSObjectModel，CSS对象模型）；

coderwhy解析三–构建RenderTree

◼当有了DOMTree和CSSOMTree后，就可以两个结合来构建RenderTree了

◼注意一：link元素不会阻塞DOMTree的构建过程，但是会阻塞RenderTree的构建过程

这是因为RenderTree在构建时，需要对应的CSSOMTree；

◼注意二：RenderTree和DOMTree并不是一一对应的关系，比如对于display为none的元素，压根不会出现在rendertree中；

coderwhy解析四–布局（layout）和绘制（Paint）

◼第四步是在渲染树（RenderTree）上运行布局（Layout）以计算每个节点的几何体。

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

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

◼第五步是将每个节点绘制（Paint）到屏幕上

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

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

coderwhy回流和重绘

◼理解回流reflow：（也可以称之为重排）