- 综合排序
- 最热优先
- 最新优先
- 来自专栏IT杂症
css中的will-change
will-change 的设计初衷是作为最后的优化手段，用来尝试解决现有的性能问题。它不应该被用来预防性能问题。 过度使用 will-change 会导致大量的内存占用，并会导致更复杂的渲染过程，因为浏览器会试图准备可能存在的变化过程。这会导致更严重的性能问题。 will-change: auto will-change: scroll-position will-change: contents will-change: transform // Example of <custom-ident> will-change: opacity // Example of <custom-ident> will-change: left , top // Example of two <animateable-feature> will-change: unset will-change: initial will-change
59220发布于 2021-11-08 - 来自专栏杰的记事本
will-change提高动画性能与页面滚动性能
MDN上显示该属性语法如下： /* 关键字值 */ will-change: auto; will-change: scroll-position; will-change: contents; will-change 就目前而言，使用的基本上都是： .example { will-change: transform; } 三、CSS3 will-change使用注意事项 will-change虽然可以加速，但是， sitePoint网站上的这篇文章展示了几个处理例子： 不要这样直接写在默认状态中，因为will-change会一直挂着： .will-change { will-change: transform .will-change-parent:hover .will-change { will-change: transform; } .will-change { transition: transform CSS will-change Property
1.1K20发布于 2019-09-04 - 来自专栏鱼头的Web海洋
谈谈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 浏览器会根据情况，自行进行优化。 2、在元素属性变化完成后最好移除 will-change 属性 有些情况，可以不移除。 比如，给页面中少量的元素使用 will-change 属性能使交互体验更好。 will-change 属性，是没有优化效果的。
1.6K20发布于 2021-01-18 - 来自专栏前端技术江湖
CSS will-change，为什么能提升几十倍的性能？
前言 will-change 一个既陌生又熟悉的属性，以前在使用这个属性的时候，单纯是因为要做性能优化，加上will-change会使得动画变得流畅一些，但是实际上到底是什么原因导致加上will-change 二、will-change的使用方法 要使用will-change，只需将它应用于你要进行性能优化的元素上。 注：每一个元素单独加入will-change都会单独创建一个复合层，如果给大量的元素加上will-change就会创建大量的复合层，反而会影响性能 3. will-change的优化效果 使用will-change 4. will-change使用的时机 在很多关于will-change的描述，都能够看到类似下面的一段话 在实际更改的元素上将 will-change 设置为您将实际更改的属性。 就是减少浏览器的复合层，避免过度使用will-change带来性能问题 四、iphone上使用will-change会导致图片模糊、文字模糊问题 在iphone上可以看到如果给元素加上will-change
1.2K40编辑于 2023-09-11 - 来自专栏前端小叙
css设置按钮心跳收缩后，按钮文字上下抖动，如何解决？
如题，给一个按钮写一个 css 心跳收缩动画后，按钮中的文字会上下抖动，解决方案为 will-change: transform; 代码如下： // 按键呼吸特效使用 class="pulse" @ : transform; } will-change: transform; 是CSS中的一个属性，用于告知浏览器该元素将进行哪些样式的改变。 使用 will-change 属性可以提前告诉浏览器哪些属性可能会发生变化，这样浏览器就可以在变化发生之前进行优化，避免不必要的重绘和重排。 然而，需要注意的是，滥用will-change属性可能会导致性能问题，因为浏览器可能会花费资源去准备那些实际上并没有发生的变化。 此外，一旦元素的变化完成，你应该移除will-change声明，以避免浏览器继续为不必要的优化而消耗资源。
91210编辑于 2024-03-27 - 来自专栏九彩拼盘的叨叨叨
第 004 期 提高页面渲染速度的 3 个 CSS 技巧
提升动画渲染的性能 - will-change 开启 GPU 加速，能让动画变得更流畅。元素的样式上设置 will-change 后，会开启 GPU 加速。 will-change 的值发生变化后，GPU 会优化该元素的渲染。 写法: .transition { will-change: opacity; } 局限性： 应作为“最后的手段”，避免过早优化。 应在父元素上使用 will-change，在子元素上使用动画。 有节制的使用，当元素变化之前和变化之后，通过脚本切换 will-change 的值，并在动画完成后，将元素的 will-change 删除。 3. q-signature=a720df0538c9b575917e020ea8e597c072746a98] 参考文档 使用CSS就可以提高页面渲染速度的4个技巧 仅使用CSS提高页面渲染速度 MDN：will-change
87001发布于 2021-04-02 - 来自专栏全栈修炼
仅使用CSS就可以提高页面渲染速度的4个技巧
Will-change 属性 浏览器上的动画并不是一件新鲜事。通常情况下，这些动画是和其他元素一起定期渲染的。不过，现在浏览器可以使用GPU来优化其中的一些动画操作。 通过will-change CSS属性，我们可以表明元素将修改特定的属性，让浏览器事先进行必要的优化。 下面发生的事情是，浏览器将为该元素创建一个单独的层。 5 什么时候不是用will-change 虽然 will-change 的目的是为了提高性能，但如果你滥用它，它也会降低Web应用的性能。 使用 will-change 表示该元素在未来会发生变化。 因此，如果你试图将 will-change 和动画同时使用，它将不会给你带来优化。因此，建议在父元素上使用 will-change ，在子元素上使用动画。 当你在一个元素上使用 will-change 时，浏览器会尝试通过将元素移动到一个新的图层并将转换工作交给GPU来优化它。如果您没有任何要转换的内容，则会导致资源浪费。
1.2K10编辑于 2023-03-15 - 来自专栏Vue开发社区
如何只使用CSS提升页面渲染速度
使用 will-change CSS 属性，我们可以表明该元素将要修改特定的属性，让浏览器提前执行必要的优化。 底层发生的是，浏览器会为这个元素创建一个单独的层。 不使用 will-change；图片来源：Maximilian 使用 will-change；图片来源：Maximilian 什么时候不要用 will-change 尽管will-change是用来提升性能的 使用will-change表明这个元素将来会改变。 因此，如果你试图将will-change与同步动画一起使用，它不会给你优化。因此，建议在父元素上使用 will-change，在子元素上使用动画。 当你在一个元素上使用will-change，浏览器会尝试通过将它放到一个新层中并将转换移交给 GPU 来优化它。如果你没有要转换的东西，这会导致资源浪费。 最后要记住的是，建议在完成所有动画之后将 will-change 从元素上删除。 3. 减少渲染阻塞时间 今天，许多 Web 应用必须满足许多形式因素，包括 PC、平板电脑和移动手机等。
2.1K20编辑于 2022-03-29 - 来自专栏深度学习与python
如何只使用CSS提升页面渲染速度
使用 will-change CSS 属性，我们可以表明该元素将要修改特定的属性，让浏览器提前执行必要的优化。 底层发生的是，浏览器会为这个元素创建一个单独的层。 什么时候不要用 will-change 尽管will-change是用来提升性能的，但如果你误用它，也会降低 Web 应用的性能。 使用will-change表明这个元素将来会改变。 因此，如果你试图将will-change与同步动画一起使用，它不会给你优化。因此，建议在父元素上使用 will-change，在子元素上使用动画。 当你在一个元素上使用will-change，浏览器会尝试通过将它放到一个新层中并将转换移交给 GPU 来优化它。如果你没有要转换的东西，这会导致资源浪费。 最后要记住的是，建议在完成所有动画之后将 will-change 从元素上删除。 3. 减少渲染阻塞时间 今天，许多 Web 应用必须满足许多形式因素，包括 PC、平板电脑和移动手机等。
1.8K30发布于 2021-01-07 - 来自专栏Coco的专栏
【Web动画】CSS3 3D 行星运转 && 浏览器渲染原理
使用方法示例：(具体每个取值的意义，去翻翻文档) will-change: auto will-change: scroll-position will-change: contents will-change > will-change: left, top // Example of two <animateable-feature> will-change: unset will-change : initial will-change: inherit // 示例 .example{ will-change: transform; } will-change 为 web 开发者提供了一种告知浏览器该元素会有哪些变化的方法 所以最佳实践是当元素变化之前和之后通过脚本来切换 will-change 的值。 不要过早应用 will-change 优化：如果你的页面在性能方面没什么问题，则不要添加 will-change 属性来榨取一丁点的速度。
3K70发布于 2018-05-28 - 来自专栏神光的编程秘籍
在 css 图层分析这方面，Chrome Devtools 属实不太行
大家可能听过用 3D transform 会新建图层，用 will-change 会新建图层等等，但是是否真的新建了图层心里并没底。 好像 will-change 导致的图层新建并没有？ 那么我们试一下，我们找个元素加上 will-change 的样式： 看，绿框了，这说明新建了图层，我们去 Layers 看下原因。 原因就是 will-change： will-change 只有 opacity、transform、transform-style、perspective、filter、backdrop-filter 我们梳理下会导致图层创建的原因： 根元素 有 z-index 是负值的子元素 有 3D 转换 position：fixed 与其他元素可能重叠 will-change 样式的值为 opacity、transform 3D 转换会导致创建图层、元素重叠会导致创建图层、will-change 为某些值时会导致创建图层，等等。
95820编辑于 2022-03-03 - 来自专栏CSDNToQQCode
CSS3 实现 60 FPS (60帧)动画效果
目录 FPS 全称： 常规操作 使用【will-change: transform;】 FPS 全称： Frames per second，即 【每秒帧数】 的意思。 使用【will-change: transform;】 CSS属性will-change为web开发者提供了一种告知浏览器该元素会有哪些变化的方法，这样浏览器可以在元素属性真正发生变化之前提前做好对应的优化准备工作 overflow: hidden; height: 100vh; transition: all 300ms linear; will-change .app-menu:hover { width: 10%; transition: all 200ms linear; will-change
1.1K10编辑于 2022-11-29 - 来自专栏Coco的专栏
盒子端 CSS 动画性能提升研究
使用 will-change 可以在元素属性真正发生变化之前提前做好对应准备 // 示例 .example { will-change: transform; } 上面已经提到过 will-change 不要将 will-change 应用到太多元素上：浏览器已经尽力尝试去优化一切可以优化的东西了。 所以最佳实践是当元素变化之前和之后通过脚本来切换 will-change 的值。 不要过早应用 will-change 优化：如果你的页面在性能方面没什么问题，则不要添加 will-change 属性来榨取一丁点的速度。 will-change 的设计初衷是作为最后的优化手段，用来尝试解决现有的性能问题。它不应该被用来预防性能问题。
1K60发布于 2018-06-21 - 来自专栏前端F2E
CSS硬件加速
触发 浏览器在处理下面的 css 的时候，会使用 gpu 渲染： transform opacity filter will-change 注意的是 gpu 硬件加速是需要新建图层的，而把该元素移动到新图层是个耗时操作 可以通过以下方式来显示声明使用硬件加速： filter: opacity(100%); will-change提供了一种告知浏览器该元素会有哪些变化的方法，这样浏览器可以在元素属性真正发生变化之前提前做好对应的优化准备工作 使用该属性「需要注意」： 不要将 will-change 应用到太多元素上。 有节制地使用。 不要过早应用 will-change 优化。 给它足够的工作时间。 如果我们需要使用opacity来开启硬件加速，可以这么声明： will-change: opacity; opacity: 0.99; 验证 如果我们指定了上述的属性，接下来如何进行验证是否生效呢？
88220编辑于 2022-08-19 - 来自专栏Coco的专栏
盒子端 CSS 动画性能提升研究
使用 will-change 可以在元素属性真正发生变化之前提前做好对应准备 // 示例 .example { will-change: transform; } 上面已经提到过 will-change 不要将 will-change 应用到太多元素上：浏览器已经尽力尝试去优化一切可以优化的东西了。 所以最佳实践是当元素变化之前和之后通过脚本来切换 will-change 的值。 不要过早应用 will-change 优化：如果你的页面在性能方面没什么问题，则不要添加 will-change 属性来榨取一丁点的速度。 will-change 的设计初衷是作为最后的优化手段，用来尝试解决现有的性能问题。它不应该被用来预防性能问题。
95360发布于 2018-05-28 - 来自专栏IMWeb前端团队
死活没生成layerForScrollingContent的解决办法
先挖个坑, 之后再寻找原因 问题是这样的一个可以滚动的页面, 但是死活都没有生成出layerForScrollingContent , 不知道为什么, 即便给scroll的contianer添加will-change :scroll;也没有用, 如果添加了will-change:transform;,则会生成container和scrollBar的layer , 就是不生成content的layer 那么既然没有生成解决办法就是手动生成 , 做法很简单 , 在需要滚动的内容包一个div, 并且设置will-change:transform; ?
41030发布于 2019-12-04 - 来自专栏IMWeb前端团队
搞定这些疑难杂症，向css3动画说yes
1、四大核心建议： 不要将 will-change 应用到太多元素上：浏览器已经尽力尝试去优化一切可以优化的东西了。 所以最佳实践是当元素变化之前和之后通过脚本来切换 will-change 的值。 不要过早应用 will-change 优化：如果你的页面在性能方面没什么问题，则不要添加 will-change 属性来榨取一丁点的速度。 will-change 的设计初衷是作为最后的优化手段，用来尝试解决现有的性能问题。它不应该被用来预防性能问题。 使用时需要尝试去找到一些方法提前一定时间获知元素可能发生的变化，然后为它加上 will-change 属性。
86260发布于 2019-12-04 - 来自专栏腾讯IMWeb前端团队
进阶|你的css经不住这层考验，就是失败...
使用 will-change 可以在元素属性真正发生变化之前提前做好对应准备 上面已经提到过 will-change 了。 2.不要将 will-change 应用到太多元素上：浏览器已经尽力尝试去优化一切可以优化的东西了。 所以最佳实践是当元素变化之前和之后通过脚本来切换 will-change 的值。 4.不要过早应用 will-change 优化：如果你的页面在性能方面没什么问题，则不要添加 will-change 属性来榨取一丁点的速度。 will-change 的设计初衷是作为最后的优化手段，用来尝试解决现有的性能问题。它不应该被用来预防性能问题。
87030编辑于 2022-06-29 - 来自专栏IMWeb前端团队
搞定这些疑难杂症，向css3动画说yes
1、四大核心建议： 不要将 will-change 应用到太多元素上：浏览器已经尽力尝试去优化一切可以优化的东西了。 所以最佳实践是当元素变化之前和之后通过脚本来切换 will-change 的值。 不要过早应用 will-change 优化：如果你的页面在性能方面没什么问题，则不要添加 will-change 属性来榨取一丁点的速度。 will-change 的设计初衷是作为最后的优化手段，用来尝试解决现有的性能问题。它不应该被用来预防性能问题。 使用时需要尝试去找到一些方法提前一定时间获知元素可能发生的变化，然后为它加上 will-change 属性。
2.4K80发布于 2018-01-15 - 来自专栏IMWeb前端团队
死活没生成layerForScrollingContent的解决办法
先挖个坑, 之后再寻找原因 问题是这样的一个可以滚动的页面, 但是死活都没有生成出layerForScrollingContent , 不知道为什么, 即便给scroll的contianer添加will-change :scroll;也没有用, 如果添加了will-change:transform;,则会生成container和scrollBar的layer , 就是不生成content的layer 那么既然没有生成解决办法就是手动生成 , 做法很简单 , 在需要滚动的内容包一个div, 并且设置will-change:transform; 如图二 !
52770发布于 2017-12-29
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号