Web 技术研究所

我一直坚信着,Web 将会成为未来应用程序的主流

Chrome26可用的will-change属性

  CSS3中的transition和animation之类的东西并不是什么底层的封装,他们的性能和jQuery的animate方法差不多。性能的关键在于渲染上,现在引入的will-change属性就是预先告诉浏览器元素上的哪些属性是动画属性,让浏览器对其做特殊的优化。
  即使把jQuery对animate的实现改为CSS3实现,动画的帧频也不会增加。这就是因为CSS3的动画不是底层封装的缘故。提高动画的帧频实际上就是要提高渲染速度,will-change就是提前告诉浏览器什么属性将会频繁变化,让浏览器做好准备。
  但额外的性能优化总是伴随着其它代价,可以无代价的性能优化在浏览器在开发时就已经做了。提高渲染速度可能会占用更多系统资源,所以应该只对真正的动画属性做添加will-change,对非动画属性添加它完全就是浪费系统资源。
  以上这些还是理论上的层面,浏览器到底用何种方式优化并不能确定,所以无法量化验证,只是Chrome26支持了这个属性而已。从各浏览器对WebGL兼容的尿性来看,GUP层的优化并不是可以随便搞定的东西,我想就算其它浏览器支持它也会在优化方式上有很大差异。
  下面是一段测试代码:
<style>
div {
  color:red;
  font:bold 32px/1.75 Arial;
  opacity:0.2;
  cursor:default;
  will-change:opacity;
  transition:opacity 200ms;
}
div:hover {opacity:1;}
</style>
<div>Hover</div>
网名:
3.80.55.*
电子邮箱:
仅用于接收通知
提交 悄悄的告诉你,Ctrl+Enter 可以提交哦
神奇海螺
[查看全部主题]
各类Web技术问题讨论区
发起新主题
本模块采用即时聊天邮件通知的模式
让钛合金F5成为历史吧!
次碳酸钴的技术博客,文章原创,转载请保留原文链接 ^_^