• 注册
  • 关于作者
    企业认证:趣记站长
    关注 6 粉丝 4 喜欢 9 内容 992
    江西省·南昌市
    聊天 送礼
    • 查看作者
    • css性能优化-will-change

      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 的设计初衷是作为最后的优化手段,用来尝试解决现有的性能问题,它不应该被用来预防性能问题。

      兼容性:

    • 0
    • 0
    • 0
    • 118
    • 单栏布局 侧栏位置: