深入浏览器的渲染原理
王红元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：（也可以称之为重排）