记:浏览器渲染机制与如何优化

前言:

之前有记过:从输入一个URL到浏览器页面展示都经历了些什么;在最后的过程--浏览器渲染。其实作为一个前端er,应该要对浏览器渲染机制有所了解,今天做个渲染机制的笔记。

渲染机制

浏览器的渲染机制一般分为以下几个步骤

处理 HTML 并构建 DOM 树。

处理 CSS 构建 CSSOM 树。

将 DOM 与 CSSOM 合并成一个渲染树。

根据渲染树来布局,计算每个节点的位置。

调用 GPU 绘制,合成图层,显示在屏幕上。

浏览器渲染机制图

在构建CSSOM树时,会阻塞渲染,直至CSSOM树构建完成。并且构建CSSOM树是一个非常消耗性能的过程,所以应该尽量保证层级扁平,较少过度层叠,越是具体的CSS选择器,执行速度越慢。

当 HTML 解析到 script 标签时,会暂停构建 DOM,完成后才会从暂停的地方重新开始。也就是说,如果你想首屏渲染的越快,就越不应该在首屏就加载 JS 文件。并且 CSS 也会影响 JS 的执行,只有当解析完样式表才会执行 JS,所以也可以认为这种情况下,CSS 也会暂停构建 DOM。

Load 和 DOMContentLoaded 区别

Load事件触发代表页面中的 DOM,CSS,JS,图片已经全部加载完毕。

DOMContentLoaded事件触发代表初始的 HTML 被完全加载和解析,不需要等待 CSS,JS,图片加载。

图层

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

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

3D变换:、

、标签

通过动画实现的动画转换

重绘(Repaint)和回流(Reflow)

重绘和回流是渲染步骤中的一小节,但是这两个步骤对于性能影响很大。

重绘是当节点需要更改外观而不会影响布局的,比如改变 就叫称为重绘

回流是布局或者几何属性需要改变就称为回流。

回流必定会发生重绘,重绘不一定会引发回流。回流所需的成本比重绘高的多,改变深层次的节点很可能导致父节点的一系列回流。

所以以下几个动作可能会导致性能问题:

改变 window 大小

改变字体

添加或删除样式

文字改变

定位或者浮动

盒模型

很多人不知道的是,重绘和回流其实和 Event loop 有关。

当 Event loop 执行完 Microtasks 后,会判断 document 是否需要更新。因为浏览器是 60Hz 的刷新率,每 16ms 才会更新一次。

然后判断是否有 resize 或者 scroll ,有的话会去触发事件,所以 resize 和 scroll 事件也是至少 16ms 才会触发一次,并且自带节流功能。

判断是否触发了

更新动画并且发送事件

判断是否有全屏操作事件

执行 回调

执行 回调,该方法用于判断元素是否可见,可以用于懒加载上,但是兼容性不好

更新界面

以上就是一帧中可能会做的事情。如果在一帧中有空闲时间,就会去执行 回调。

减少重绘和回流

使用替代

使用 替换 ,因为前者只会引起重绘,后者会引发回流(改变了布局)

把 DOM 离线后修改,比如:先把 DOM 给 (有一次 Reflow),然后你修改100次,然后再把它显示出来

不要把 DOM 结点的属性值放在一个循环里当成循环里的变量

不要使用 布局,可能很小的一个小改动会造成整个 table 的重新布局

动画实现的速度的选择,动画速度越快,回流次数越多,也可以选择使用

CSS 选择符从右往左匹配查找,避免 DOM 深度过深

将频繁运行的动画变为图层,图层能够阻止该节点回流影响别的元素。比如对于 标签,浏览器会自动将该节点变为图层。

  • 发表于:
  • 原文链接https://kuaibao.qq.com/s/20180725A14XSF00?refer=cp_1026
  • 腾讯「云+社区」是腾讯内容开放平台帐号(企鹅号)传播渠道之一,根据《腾讯内容开放平台服务协议》转载发布内容。
  • 如有侵权,请联系 yunjia_community@tencent.com 删除。

扫码关注云+社区

领取腾讯云代金券