说一说will-change

浅浅的花香味﹌ 2022-12-23 07:23 191阅读 0赞

## 一、will-change是做什么的呢 ##

CSS 是用来描述结构化文档（如HTML、XML）怎样渲染的语言。

CSS渲染器在渲染属性前，会有个准备的过程。有些属性需要css渲染器事先做很多准备才能实现渲染。这就容易导致页面出现卡顿，交互体验不好等问题。

如果设置了 will-change 属性，那么浏览器就可以提前知道哪些元素的属性将会改变，提前做好准备。待需要改变元素的时机到来时，就可以立刻实现它们。从而避免卡顿等问题。

> 例如，使用 3D Transforms 让元素在屏幕上移动时，此元素和它的上下文会被提到另一个“层”，独立于其它元素被渲染。这样那些不变的元素就能避免被重复渲染。这可以显著提高性能。

然而，将元素提取到一个新层，相对来说是代价较高的操作。这可能使 transform 动画延迟几百毫秒。

## 二、怎么用呢 ##

下面是一个使用脚本应用 will-change 属性的例子：

>     var el = document.getElementById('element');
>     // 当鼠标移动到该元素上时给该元素设置 will-change 属性
>     el.addEventListener('mouseenter', hintBrowser);
>     // 当 CSS 动画结束后清除 will-change 属性
>     el.addEventListener('animationEnd', removeHint);
>     function hintBrowser() {
>     // 填写上那些你知道的，会在 CSS 动画中发生改变的 CSS 属性名们
>     this.style.willChange = 'transform, opacity';
>     }
>     function removeHint() {
>     this.style.willChange = 'auto';
>     }

### 语法说明 ###

>     Formal syntax: auto | <animateable-feature>#
>     <animateable-feature> = scroll-position | contents | <custom-ident>

>     will-change: auto
>     will-change: scroll-position
>     will-change: contents
>     will-change: transform // <custom-ident> 的例子
>     will-change: opacity // <custom-ident> 的例子
>     will-change: left, top // <animateable-feature> 的例子
>     will-change: unset
>     will-change: initial
>     will-change: inherit

#### auto ####

浏览器会根据情况，自行进行优化。

#### scroll-position ####

表示开发者将要改变元素的滚动位置。

> 例如，浏览器通常仅呈现可滚动元素“滚动窗口”中的内容。而某些内容超过该窗口。如设置了此值，浏览器将扩展呈现“滚动窗口”周围的内容，从而顺利地进行更长、更快的滚动。

#### content ####

表示开发者将要改变元素的内容。

> 例如，浏览器常将大部分不经常改变的元素缓存下来。但如果一个元素的内容不断发生改变，那么产生和维护这个缓存就是在浪费时间。此属性值可以减少浏览器对元素的缓存，或者完全避免缓存。变为从始至终都重新渲染元素。

注意：这个值会被应用到它所声明元素的子节点。在文档树较高的节点上使用，可能会对页面性能造成很大的影响。尽量在文档树最末端使用。

#### <custom-ident> ####

表示开发者将要改变的元素属性。如果给定的值是缩写，则默认被扩展全。

> 例如，设置 will-change: background 将会被补全 background 的所有属性 will-change: background-image, background-position, ...

## 三、使用时须注意的几点 ##

##### **1、不要在过多的属性和元素上使用 will-change** #####

>     * { will-change: transform, opacity /*, ...*/; }

你可能会觉得这么做不错，就可以优化一切属性了。

其实并非如此。

will-change 可能会引发一些十分耗费资源的优化措施。如果像上边这样给所有元素都添加，可能会使页面变慢，甚至崩溃。

##### **2、在元素属性变化完成后最好移除 will-change 属性** #####

有些情况，可以不移除。

比如，给页面中少量的元素使用 will-change 属性能使交互体验更好。

>     body > .sidebar {
>     will-change: transform;
>     /*当鼠标移动到侧边栏时，会有滑动效果*/
>     }

因为只在很少的元素上使用，所以它所能产生的副作用可以忽略不计。

当变化很频繁时也可以不移除。例如，鼠标移动产生的变化，或者持续存在的动画效果。此时设置 will-change 属性，其实就是在提示浏览器，这些元素会持续或有规律的发生变化，要保持对它们的优化。

>     .cats-flying-around-the-screen {
>     will-change: left, top;
>     }

#####     #####

##### **3、给 will-change 属性足够的时间做准备** #####

如果在动画开始的那一刻才添加 will-change 属性，是没有优化效果的。一些优化是需要充分的准备时间的.如果没有足够的时间，那 will-change 所能提高的性能也就无从谈起。所以要找到添加 will-change 属性的时机。

> 比如，当一个元素被点击时发生变化。那么就可以在 hover 事件上设置 will-change 属性。这能给浏览器提供大概200毫秒准备时间。因为相较之下，人类的响应速度较慢。这可以通过脚本或者简单的CSS来实现。

>     .element { transition: opacity .2s; opacity: 1; }
>     .element:hover { will-change: opacity; }
>     .element:active { opacity: .3; }

如果变化是发生在触发 hover 事件时，上边的做法就无法起到优化作用了。但还是可以找到恰当的时机的。比如在祖先元素上设置 will-change 属性，就可以给浏览器预留足够的准备时间。

>     .element { transition: opacity .2s; opacity: 1; }
>     .container:hover > .element { will-change: opacity; }
>     .element:hover { opacity: .3; }

### 兼容性一览 ###

![format_png][]

### 参考资料 ###

\[1\] CSS Will Change Module Level 1: https://www.w3.org/TR/css-will-change-1/\#propdef-will-change

\[2\] MDN will-change 中文版: https://developer.mozilla.org/zh-CN/docs/Web/CSS/will-change

## 关于奇舞周刊 ##

《奇舞周刊》是360公司专业前端团队「奇舞团」运营的前端技术社区。关注公众号后，直接发送链接到后台即可给我们投稿。

![format_png 1][]

[format_png]: /images/20221120/f5dfa1994308413c967b847c3bf4e665.png
[format_png 1]: /images/20221120/e16f4b7f3ea5499ebfc03965d258c03b.png