时间:2021-05-08
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使用详解,希望对大家有所帮助,如果大家有任何疑问欢迎给我留言,小编会及时回复大家的!
声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。
前言关于前端css性能优化,网上很多类似文章,我之前也写过,《网站前端性能优化之javascript和css》,感兴趣的可以去看下。今天我们旧事重提,再来谈谈c
CSS简写就是指将多行的CSS属性简写成一行,又称为CSS代码优化或CSS缩写。CSS简写的最大好处就是能够显著减少CSS文件的大小,优化网站整体性能,更加容易
Linux系统操作中,除了可以使用命令监控系统性能外(详解监控Linux系统性能的命令有哪些),还可使用KSysguard工具,KSysguard是系统性能
复制代码代码如下:CSS实现DIV层背景颜色渐变.change{width:100%;height:600px;FILTER:progid:DXImageTra
使用纯CSS实现在鼠标经过一个表格的某一行的时候,要整行的背景颜色发生变化,以表明该行正中焦点:changetr.change:hover{background