css性能优化-will-change使用详解

网页制作 2024/12/27 佚名

3 1 2

清风细雨楼 Design By www.eepep.com

will-change通过告知浏览器该元素会有哪些变化，使浏览器提前做好优化准备，增强页面渲染性能。

属性的取值：

1、auto: 实行标准浏览器优化。

2、scroll-position: 表示开发者希望在不久后改变滚动条的位置或者使之产生动画。

3、contents: 表示开发者希望在不久后改变元素内容中的某些东西，或者使它们产生动画。

4、<custom-ident>: 表示开发者希望在不久后改变指定的属性名或者使之产生动画，比如transform 或 opacity。

使用须知：

1、不要将 will-change 应用到太多元素上，如果过度使用的话，可能导致页面响应缓慢或者消耗非常多的资源。

2、通常，当元素恢复到初始状态时，浏览器会丢弃掉之前做的优化工作。但是如果直接在样式表中显式声明了 will-change 属性，则表示目标元素可能会经常变化，浏览器会将优化工作保存得比之前更久。所以最佳实践是使用完后及时清除。

3、如果你的页面在性能方面没什么问题，则不要添加 will-change 属性来榨取一丁点的速度。 will-change 的设计初衷是作为最后的优化手段，用来尝试解决现有的性能问题，它不应该被用来预防性能问题。

兼容性：

总结

以上所述是小编给大家介绍的css性能优化-will-change使用详解，希望对大家有所帮助，如果大家有任何疑问欢迎给我留言，小编会及时回复大家的！

css,性能优化,css,will-change

清风细雨楼 Design By www.eepep.com

广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！

清风细雨楼 Design By www.eepep.com

评论“css性能优化-will-change使用详解”

暂无评论...

www.eepep.com 清风细雨楼

120,135影音资源

344,641技术资源

22,817软件资源

435,032站长资源

2024年12月27日