码迷,mamicode.com
首页 > Web开发 > 详细

CSS性能优化新属性:will-change

时间:2017-07-14 10:07:36      阅读:237      评论:0      收藏:0      [点我收藏+]

标签:优化   nsf   通知   部分   ide   元素   目标   属性   结束   

---恢复内容开始---

will-change属性通过告诉浏览器什么属性、什么元素将会发生变化,可以对这些操作进行可能性的优化,由此提高CSS动画的执行效率。

这个属性可以有4个值:

  • auto: 实行标准浏览器优化。
  • scroll-position: 指明元素的滚动位置将会出现动画变化,浏览器应该为滚动视窗内容的不可见部分事先做好准备。
  • contents: 指明元素的内容将会发生变化,浏览器不要缓存它们的内容。
  • <custom-ident>: 指明will-change实施的目标属性,比如transform 或 opacity

如果想通知浏览器会发生一个transform方面的变化,可以这样写:

.element {
	will-change: transform;
}

我们还可以指定多个值,用逗号分隔,例如:

.element {
	will-change: transform, opacity;
}

然而,千万不要过度使用will-change属性,否则,事与愿违,页面的执行效率会降低,推荐的做法是当一个元素或属性发生变化时打开will-change,变化完成之后关闭它。

 

转载自CSDN--

我跟大家一样涨知识了

---恢复内容结束---

CSS性能优化新属性:will-change

标签:优化   nsf   通知   部分   ide   元素   目标   属性   结束   

原文地址:http://www.cnblogs.com/Mousika/p/7168233.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!