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

  发布时间:2019-05-06 14:44:34   作者:佚名   我要评论
will-change通过告知浏览器该元素会有哪些变化,使浏览器提前做好优化准备,增强页面渲染性能。接下来通过本文给大家分享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 的设计初衷是作为最后的优化手段,用来尝试解决现有的性能问题,它不应该被用来预防性能问题。

兼容性:


 

总结

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

相关文章

  • 深入理解CSS @font-face性能优化

    这篇文章主要介绍了深入理解CSS @font-face性能优化,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2019-03-06
  • 网站前端性能优化之javascript和css篇

    之前看过Yahoo团队写的一篇关于网站性能优化的文章,文章是2010年左右写的,虽然有点老,但是很多方面还是很有借鉴意义的。关于css的性能优化,他提到了如下几点
    2016-12-14
  • CSS性能优化提高css性能的方法

    这篇文章主要介绍了CSS性能优化提高css性能的方法,不规范的css会导致很多性能问题,所以学习掌握css性能优化技巧是非常必要的,对css性能优化知识感兴趣的朋友一起学习吧
    2016-08-25
  • CSS代码编写的一些性能优化技巧总结

    这篇文章主要介绍了CSS代码编写方面的一些优化技巧总结,谈到了包括避免通用规则和后代选择器等方面来使代码更加高效,需要的朋友可以参考下
    2016-02-29
  • 网站性能优化之CSS无图片技术

    CSS无图片技术是什么?在不使用CSS Image(通过CSS的引入的背景图片,不包括img标签内的图片)情况下生成类似图片效果的技术;换句话的意思就是在使用纯CSS生成类似图片效果
    2014-11-20
  • CSS 网站性能优化笔记

    CSS 网站性能优化笔记,大家可以结合下js 网站性能优化笔记。
    2011-05-24
  • 对css性能优化的一点看法

    怎么会突然想起谈css与性能优化呢?其实这个问题我已经想了很久了,想写,但是也不知道从何写起,今天就简单的说一下,近段使用通过使用page Speed,对css性能优化的一点看
    2009-09-16

最新评论