首页 > Web开发 > 详细

Web 性能优化-CSS3 硬件加速(GPU 加速)

时间:2021-01-19 23:42:53      阅读:47      评论:0      收藏:0      [点我收藏+]

CSS3 硬件加速又叫做 GPU 加速,是利用 GPU 进行渲染,减少 CPU 操作的一种优化方案。由于 GPU 中的 transform 等 CSS 属性不会触发 repaint,所以能大大提高网页的性能。

动画与帧

浏览器中动画也是由一帧一帧的图片组成的。我们首先看一下,浏览器每一帧都做了什么。

  1. JavaScript:JavaScript 实现动画效果,DOM 元素操作等。
  2. Style(计算样式):确定每个 DOM 元素应该应用什么 CSS 规则。
  3. Layout(布局):计算每个 DOM 元素在最终屏幕上显示的大小和位置。由于 web 页面的元素布局是相对的,所以其中任意一个元素的位置发生变化,都会联动的引起其他元素发生变化,这个过程叫 reflow。
  4. Paint(绘制):在多个层上绘制 DOM 元素的的文字、颜色、图像、边框和阴影等。
  5. Composite(渲染层合并):按照合理的顺序合并图层然后显示到屏幕上。

动画与图层

浏览器在获取 render tree(详细知识可以查看Web性能优化-页面重绘和回流(重排))后,渲染树中包含了大量的渲染元素,每一个渲染元素会被分到一个图层中,每个图层又会被加载到 GPU 形成渲染纹理。GPU 中 transform 是不会触发 repaint 的,这一点非常类似 3D 绘图功能,最终这些使用 transform 的图层都会由独立的合成器进程进行处理。

过程如下:

render tree -> 渲染元素 -> 图层 -> GPU 渲染 -> 浏览器复合图层 -> 生成最终的屏幕图像。

chrome devtools 中可以开启 Rendering 中的 Layer borders 查看图层纹理。
其中黄色边框表示该元素有 3d 变换,表示放到一个新的复合层(composited layer)中渲染,蓝色栅格表示正常的 render layer。

在 GPU 渲染的过程中,一些元素会因为符合了某些规则,而被提升为独立的层(黄色边框部分),一旦独立出来,就不会影响其它 DOM 的布局,所以我们可以利用这些规则,将经常变换的 DOM 主动提升到独立的层,那么在浏览器的一帧运行中,就可以减少 Layout 和 Paint 的时间了。

创建独立图层

哪些规则能让浏览器主动帮我们创建独立的层呢?

  1. 3D 或者透视变换(perspective,transform) 的 CSS 属性。
  2. 使用加速视频解码的 video 元素。
  3. 拥有 3D(WebGL) 上下文或者加速 2D 上下文的 canvas 元素。
  4. 混合插件(Flash)。
  5. 对自己的 opacity 做 CSS 动画或使用一个动画 webkit 变换的元素。
  6. 拥有加速 CSS 过滤器的元素。
  7. 元素有一个包含复合层的后代节点(换句话说,就是一个元素拥有一个子元素,该子元素在自己的层里)。
  8. 元素有一个兄弟元素在复合图层渲染,并且该兄弟元素的 z-index 较小,那这个元素也会被应用到复合图层。

关于 z-index 导致的硬件加速的问题,可以查看这篇文章 CSS3硬件加速也有坑!!

开启 GPU 加速

CSS 中的以下几个属性能触发硬件加速:

  1. transform
  2. opacity
  3. filter
  4. will-change

如果有一些元素不需要用到上述属性,但是需要触发硬件加速效果,可以使用一些小技巧来诱导浏览器开启硬件加速。

.element {
    -webkit-transform: translateZ(0);
    -moz-transform: translateZ(0);
    -ms-transform: translateZ(0);
    -o-transform: translateZ(0);
    transform: translateZ(0); 
    /**或者**/
    transform: rotateZ(360deg);
    transform: translate3d(0, 0, 0);
}

注意:我在不同的资料中查到的 transform 是否能触发硬件加速的结果不同,自己测试后,发现结果是可以。

要注意的问题

(1)过多地开启硬件加速可能会耗费较多的内存,因此什么时候开启硬件加速,给多少元素开启硬件加速,需要用测试结果说话。
(2)GPU 渲染会影响字体的抗锯齿效果。这是因为 GPU 和 CPU 具有不同的渲染机制,即使最终硬件加速停止了,文本还是会在动画期间显示得很模糊。

转自:https://juejin.cn/post/6844903903826296846

Web 性能优化-CSS3 硬件加速(GPU 加速)

原文:https://www.cnblogs.com/vickylinj/p/14299796.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!