浏览器渲染机制

浏览器渲染机制浏览器渲染机制。

九道湾的辣个男人

3696人浏览 · 2022-07-16 23:37:13

九道湾的辣个男人 · 2022-07-16 23:37:13 发布

浏览器渲染机制

一、浏览器如何渲染网页

浏览器的渲染机制可以分为五步：
第一步：解析html，构建DOM树
第二步：解析CSS，生成CSSOM树
第三步：合并dom树和css规则树，生成render渲染树
第四步：根据render渲染树进行布局
第五步：调用GPU对渲染树进行绘制，合成图层，显示在屏幕上\

其中第四步和第五步合起来，就是我们常常说的浏览器渲染，并且第四步和第五步是浏览器渲染最耗时的部分（主要优化点）

关于渲染：

浏览器在生成网页的过程中，至少渲染一次
在用户浏览的过程中，还会不断重新渲染（render = n+1）
在构建 CSSOM 树时，会阻塞渲染，直至 CSSOM树构建完成。并且构建 CSSOM 树是一个十分消耗性能的过程，所以应该尽量保证层级扁平，减少过度层叠，越是具体的 CSS 选择器，执行速度越慢
当 HTML 解析到 script 标签时，会暂停构建 DOM，完成后才会从暂停的地方重新开始。也就是说，如果你想首屏渲染的越快，就越不应该在首屏就加载 JS 文件。并且CSS也会影响 JS 的执行，只有当解析完样式表才会执行 JS，所以也可以认为这种情况下，CSS 也会暂停构建 DOM

浏览器渲染的五个阶段

1.解析html标签，构建DOM树

在这个阶段，引擎开始解析html，解析出来的结果会成为一棵dom树（包含全节点，包括隐藏的节点和<head>标签）
dom树构建完成以后主要作为下阶段渲染树状图的输入,并且成为网页和脚本的交互界面。(最常用的就是getElementById等等)

当解析器到达script标签的时候，发生下面四件事情

html解析器停止解析
如果是外部脚本，就从外部网络获取脚本代码
将控制权交给js引擎，执行js代码
恢复html解析器的控制权

结论：由于<script>标签是阻塞解析的，将脚本放在网页尾部会加速代码渲染。

第二步：解析CSS标签，构建CSSOM树

js会阻塞解析，因为它会修改文档(document)。css不会修改文档的结构，如果这样的话，似乎看起来css样式不会阻塞浏览器html解析。但是事实上 css样式表是阻塞的。阻塞是指当cssom树建立好之后才会进行下一步的解析渲染

通过以下手段可以减轻cssom带来的影响

将script脚本放在页面底部
尽可能快的加载css样式表
将样式表按照media type和media query区分，这样有助于我们将css资源标记成非阻塞渲染的资源
非阻塞的资源还是会被浏览器下载，只是优先级较低

第三步：把DOM和CSSOM组合成渲染树（render tree）

这个阶段会让原本的dom树和cssom树相结合，成为一颗新的渲染树 render tree

值得注意的是：render tree不会将所有原本的dom树全部构建出来，一些不需要显示的元素则不会被构建到render tree中

渲染树不会添加 css中设置为display:none的dom元素
渲染树不会添加 <head>标签中的元素

面试题中常见的问题会有：

Q: dom中有10个节点渲染树中的节点会是10个吗？
A: 不是的，渲染树不包括 head 和隐藏元素（更少的原因），大段文本的每一个行都是独立节点，每一个节点都有对应的 css 属性（更多的原因）

Q:CSS会阻塞DOM解析吗？
A:对于一个HTML文档来说，不管是内联还是外链的css，都会阻碍后续的dom渲染，但是不会阻碍后续dom的解析。
当css文件放在中时，虽然css解析也会阻塞后续dom的渲染，但是在解析css的同时也在解析dom，所以等到css解析完毕就会逐步的渲染页面了。

第四步：在渲染树的基础上进行布局，计算每个节点的几何结构

布局渲染:
布局(layout)：定位坐标和大小，是否换行，各种position, overflow, z-index属性

当js脚本中存在修改会影响dom的布局时，会产生回流（Reflow）,回流会让浏览器重新执行第四步和第五步的操作

第五步，调用 GPU 绘制，合成图层，显示在屏幕上

将渲染树的各个节点绘制到屏幕上，这一步被称为绘制painting
当js脚本中存在修改会影响dom样式,但不影响布局时，会产生重绘（Repaint）,重绘会让浏览器重新执行第五步的操作

优化浏览器渲染的性能

1.在合适的时机选择使用Load或者DOMContentLoaded

Load 事件触发代表页面中的 DOM，CSS，JS，图片已经全部加载完毕。
DOMContentLoaded 事件触发代表初始的 HTML 被完全加载和解析，不需要等待 CSS，JS，图片加载

2.使用不同的图层来渲染页面

tips: 一般来说，可以把普通文档流看成一个图层。特定的属性可以生成一个新的图层。不同的图层渲染互不影响，所以对于某些频繁需要渲染的建议单独生成一个新图层，提高性能。但也不能生成过多的图层，会引起反作用。

通过以下几个常用属性可以生成新图层

3D 变换：translate3d、translateZ
will-change
video、iframe 标签
通过动画实现的 opacity 动画转换
position: fixed

3.通过优化重绘和回流来减少相应的页面渲染时间

重绘和回流是渲染步骤中的一小节，但是这两个步骤对于性能影响很大
tips:重绘是当节点需要更改外观而不会影响布局的，比如改变 color 就叫称为重绘回流是布局或者几何属性需要改变就称为回流。回流必定会发生重绘，重绘不一定会引发回流。回流所需的成本比重绘高的多，改变深层次的节点很可能导致父节点的一系列回流

常见引起回流属性和方法

添加或者删除可见的DOM元素；
元素尺寸改变——边距、填充、边框、宽度和高度
内容变化，比如用户在input框中输入文字
浏览器窗口尺寸改变——resize事件发生时
计算 offsetWidth 和 offsetHeight 属性
设置 style 属性的值

回流影响的范围

由于浏览器渲染界面是基于流失布局模型的，所以触发重排时会对周围DOM重新排列，影响的范围有两种

全局范围：从根节点html开始对整个渲染树进行重新布局。

<body>
  <div class="hello">
    <h4>hello</h4>
    <p><strong>Name:</strong>BDing</p>
    <h5>male</h5>
    <ol>
      <li>coding</li>
      <li>loving</li>
    </ol>
  </div>
</body>