查看原文
其他

CSS的will-change,为什么有时候能优化几十倍的性能?

前端大全
2024-08-23

作者:超神熊猫

https://juejin.cn/post/7254397517968867365

前言

will-change 一个既陌生又熟悉的属性,以前在使用这个属性的时候,单纯是因为要做性能优化,加上will-change会使得动画变得流畅一些,但是实际上到底是什么原因导致加上will-change就能使得动画流畅,它有什么弊端?
一个老同事,前几天跟我说他挨了领导的骂,说他滥用will-change这个属性,知其然不知其所以然。
我有点茫然,使用will-change应该是好事,能够提升性能
但是当他给我介绍他的用法的时候,我想说的是,“骂你的队伍能加我一个不咯?”

html
复制代码
<template>
  <div class="list">
    <div class="item" v-for="i,k in lists" :key="k">
      ...
    </div>
  </div>
</template>

<style>
.item {
  will-change: transform;
}
</style>

给一个循环的元素加入了will-cahnge,这意味着网页上会有大量的元素加入了will-change,并且长留存

在现代网页设计中,性能优化成为了一个重要的议题。一种关键的优化工具是CSS属性will-change,它可以告诉浏览器元素将要发生的变化,从而提前分配资源并优化渲染。本文将深入探讨will-change的使用和原理,以帮助开发者充分发挥其潜力,提升网页性能。

一、什么是will-change

will-change是一个CSS属性,它可以告诉浏览器某个元素将要发生的变化。通过明确指定这些变化,浏览器可以事先分配和优化相应的资源,从而提升渲染的性能。

二、will-change的使用方法

要使用will-change,只需将它应用于你要进行性能优化的元素上。

css
复制代码
.element {
  will-change: transform;
}

在上述示例中,我们告诉浏览器,该元素即将发生变换(transform),以便浏览器在渲染时提前分配所需的资源。

值得注意的是,因为will-change是为了性能优化而设计的,滥用它可能会带来负面影响。只在需要优化的元素上使用will-change,避免对所有元素都进行指定。

三、will-change的原理

要理解will-change的原理,我们需要了解浏览器渲染流程的基本概念。

1. 渲染流程简介

浏览器在渲染网页时,会经历一系列的步骤,如样式计算、布局、绘制和合成。为了提高性能,浏览器会尽量避免进行不必要的计算和操作。

2. will-change的作用

will-change的作用就是告诉浏览器某个元素将要发生的变化,从而使浏览器在渲染过程中提前分配和优化相应的资源。

例如,当我们设置了will-change: transform时,浏览器会为该元素创建一个独立的图层,将这个图层标记为“即将变换”。这样,在进行布局和绘制时,浏览器就可以更高效地处理这个元素,而无需重新计算整个渲染树。

加入will-change后,通过观察复合层,如图下

layer-start.gif

加入will-change后,元素会被提升到单独的复合层,动画(重绘、重排)的操作只会在单独复合层上进行,减少了原来的页面层重绘和重排的行为 注:每一个元素单独加入will-change都会单独创建一个复合层,如果给大量的元素加上will-change就会创建大量的复合层,反而会影响性能

3. will-change的优化效果

使用will-change可以带来以下优化效果:

  • 减少渲染阻塞:浏览器可以提前分配和优化资源,减少渲染阻塞时间,提高页面的响应速度。
  • 减少重绘和重排:浏览器可以更好地管理渲染过程,避免不必要的重绘和重排,从而提高渲染性能。
  • 硬件加速:某些浏览器对will-change属性会进行硬件加速,进一步提升性能。

4. will-change使用的时机

在很多关于will-change的描述,都能够看到类似下面的一段话

在实际更改的元素上将 will-change 设置为您将实际更改的属性。并在他们停止时将其删除。- Tab Atkins Jr.(规范编辑者)
至于为什么?大部分的描述都是因为will-change会消耗浏览器GPU资源
当元素有 will-change 时,将元素提升到它们自己的“GPU 层”的浏览器。但有太多元素声明时,浏览器将忽略声明,以避免耗尽 GPU 内存

所以对于will-change的使用应该控制时机

ray-so-export (1) (1).png

在适当的时机移除will-change就是减少浏览器的复合层,避免过度使用will-change带来性能问题

四、iphone上使用will-change会导致图片模糊、文字模糊问题

在iphone上可以看到如果给元素加上will-change,可能出现模糊现象,分析一下问题

  • 加入will-change,元素会提升到复合层,提升到复合层后,浏览器做了什么事?
  • 安卓不会而iphone会,iphone上使用的是safari浏览器

解:

  1. will-change加入后,元素提升到复合层,浏览器其实会进行 光栅化

  2. 至于为什么safari浏览器在元素提升到复合层后,进行光栅化会导致模糊问题,在我们翻阅了各家浏览器内核论坛后,找到一些资料 groups.google.com/a/chromium

大概的内容就是:


在2016年之前,不止safari,谷歌浏览器也是存在模糊的问题,原因是提升复合层后,光栅化的时候,设备比例的变化,导致绘制 图像 的过程变模糊,谷歌是在2016年解决的这个问题,所以现在看来我们会在iphone上发现模糊问题,在安卓机上并不会
iphone上模糊的问题,可以通过在执行完重排重绘后在适当的时机移除will-change(让元素回到原来的页面层,不在单独一个复合层)就可以解决

五、什么操作会将元素提升到复合层

在CSS中,以下属性可以将元素提升到复合层:

  1. will-change 属性:通过使用 will-change 属性,告诉浏览器该元素即将发生某种变化,浏览器可以提前将其提升到复合层以进行优化。
  2. transform 属性:当使用 3D 或 2D 变换时,浏览器会自动将 transform 属性应用的元素提升到复合层。常见的变换函数如 translate()rotate()scale() 等。
  3. backface-visibility 属性:当使用 backface-visibility: hidden 来隐藏元素的背面时,浏览器会将该元素提升到复合层。

需要注意的是,将元素提升到复合层也会增加内存的占用和渲染的复杂性,因此不应滥用。只有当元素需要频繁改变或有复杂的动画效果时,才建议将其提升到复合层。

六、结论

will-change是一种强大的性能优化工具,在现代网页设计中发挥着重要作用。通过明确指定元素将要发生的变化,浏览器可以提前分配和优化相应的 .

使用上也有需要注意的点:
1. 不要给大量的元素添加will-change,这会导致创建大量的复合层

2. 注意使用的时机,在需要进行重绘/重排行为的时候,才考虑加上will-change,使用完后需要再适当的时机移除,释放浏览器资源

3. 是否真的需要will-change,如果页面在性能方面没什么问题,没有必要放个will-change来换取那微乎其微的收益,如果收益客观,可加,如果加与不加,差别不大,没必要

推荐阅读  点击标题可跳转

1、TailwindCSS 高级使用技巧

2、2023 年 CSS 自适应正方形必须拿下

3、为什么你非常不适应 TypeScript

继续滑动看下一个
前端大全
向上滑动看下一个

您可能也对以下帖子感兴趣

文章有问题?点此查看未经处理的缓存