will-change通过告知浏览器该元素会有 哪些 变化,使浏览器提前做好优化准备,增强页面渲染性能。
属性的取值:
1、auto:&nbs p; 实行标准浏览器优化。
2、scroll-pos IT ion: 表示 开发者 希望在不久后 改变 滚动条的位置 或者 使之产生动画。
3、contents: 表示开发者希望在不久后改变元素内容中的某些东西,或者使它们产生动画。
4、<custom -i dent>: 表示开发者希望在不久后改变指定的属性名或者使之产生动画,比如transform 或 opacity。
使用须知:
1、不要将 will-change 应用到太多元素上,如果过度使用的话,可能导致页面响应缓慢或者消耗非常多的资 源 。
2、通常,当元素恢复到初始状态时,浏览器会丢弃掉之前做的优化工作。但是如果直接在样式表中显式声明了 will-change 属性,则表示目标元素可能会经常变化,浏览器会将优化工作保存得比之前更久。所以最佳实践是使用完后及时清除。
3、如果你的页面在性能方面没什么问题,则不要添加 will-change 属性来榨取一丁点的速度。 will-change 的设计初衷是作为最后的优化 手段 ,用来尝试解决现有的性能问题,它不 应该 被用来预 防 性能问题。
兼容性:
总结
以上所述是小编给大家介绍的css性能优化-will-change使用详解, 希望对大家有所帮助 ,如果大家有任何疑问欢迎给我留言,小编会及时回复大家的!
总结
以上是 为你收集整理的 css性能优化-will-change使用详解 全部内容,希望文章能够帮你解决 css性能优化-will-change使用详解 所遇到的问题。
如果觉得 网站内容还不错, 推荐好友。
查看更多关于css性能优化-will-change使用详解的详细内容...