LJ *_*ski 53 css css3 will-change
我找到了CSS will-changeW3.org文档,MDN docs属性(已经在Chrome中运行,并且得到了Firefox和Opera的支持),但我不确定它是如何工作的.有没有人知道更多关于这个神秘的事情？
我刚刚读到它允许浏览器为将来的元素做计算做准备.我不想误解它.所以我有几个问题.
我应该将此属性添加到元素类还是其悬停状态？
.my-class{
will-change: 'opacity, transform'
}
.my-class:hover{
opacity: 0.5
}
.my-class:active{
transform: rotate(5deg);
}
要么
.my-class{
...
}
.my-class:hover{
will-change: 'opacity'
opacity: 0.5
}
.my-class:active{
will-change: 'transform'
transform: rotate(5deg);
}
它如何提高浏览器性能？从理论上讲,当加载CSS时,浏览器已经"知道"每个元素会发生什么,不是吗？
如果您可以添加说明如何有效使用它的任何好例子,我将不胜感激:)
Pat*_*ssa 31
我不会复制粘贴整篇文章,但这里是一个tl; dr版本:
通过指定要更改的内容,浏览器可以更好地决定对这些特定更改所需的优化.这显然是一种更好的方法来实现速度提升而不诉诸黑客并迫使浏览器进入可能或可能不是必需或有用的层创建.
如何使用它:
will-change: transform, opacity;
如何不使用它:
will-change: all;
.potato:hover {
will-change: opacity;
opacity:1;
}
will-change在悬停时指定无效:
在变化之前对元素进行设置改变几乎没有效果.(它可能实际上比没有设置它更糟.当你动画的内容以前没有资格用于新图层时,你可能会产生新图层的成本!)
LJ *_*ski 15
我花了一些时间来搜索will-change财产如何运作以及我们如何使用财产.我希望,这将是有用的总结.谢谢大家的回答.
1.图层Hack/Null变换Hack
在"古代"(比如2年前),有人发现你可以更快地绘制你的CSS动画.
它是如何工作的？
如果添加transform: translateZ(0)到css选择器,它将强制浏览器将具有此选择器的元素移动到新的合成器层.更重要的是,它会提高性能(在大多数情况下,使用GPU的功能而不是CPU)在这里阅读更多.
再见黑客,欢迎"会改变:"
可能现在说再见Layer Hack还为时过早,但这一次很快就会到来.这个新属性will change出现在CSS的规范中,并将成为层黑客的重要继承者.
3.浏览器支持
目前,它可以在Chrome和Opera中使用,也可以得到Firefox的部分支持.
4.如何正确使用它
在您完成动画实施之前,请不要在CSS中的任何地方使用遗嘱.只有这样你才能回到你的CSS并申请改变.更多
这可能是您可以获得的最有价值的建议.
在动作开始之前直接使用它是没有意义的,例如将其添加到:hover选择器的状态.因为浏览器在更改发生之前没有足够的时间来准备优化.浏览器需要约.200ms来应用优化,例如,will-change当父元素处于悬停状态时,最好添加到元素.更多
例:
.parent:hover .change{
will-change: opacity;
}
.change:hover{
opacity: .5;
}
你需要非常谨慎地使用它.如果要优化所有内容,结果将与预期结果相反.will-change强制浏览器保持优化打开,并保留资源,如内存,以便将来可能永远不会发生变化.建议在will-change之后关闭,此时不再需要,例如动画结束时.
您可以使用JavaScript轻松完成 document.getElementById('my_element_id').style.willChange = off;
现在借助CSS可以完成各种动画,有时这个动画会成为CPU的瓶颈.因此,不是在CPU上执行此任务,而是使用GPU执行此任务.不久前,人们开始通过做类似的事情来开始使用技巧来进行2D转换:
.accelerate {
-webkit-transform: translate3d(0, 0, 0);
}
这使浏览器认为它正在进行3D转换,并且由于所有3D转换都使用GPU,这将卸载CPU.这看起来很糟糕(因为实际上是这样)并且will-change属性将通过通知浏览器查看将来的更改并相应地优化和分配内存来改变这一点.
基于W3C草案,
将改变CSS属性...允许作者提前告知UA他们可能对元素进行哪些类型的更改.这允许UA优化他们提前处理元素的方式,在动画实际开始之前执行准备动画的潜在昂贵的工作.
使用的好主意 will-change是让浏览器事先知道元素的预期变化.这允许浏览器提前进行适当的优化,从而加快渲染速度.
这些信息来自这个关于will-change财产的优秀解释.这篇文章有另外一个例子,当它使用它时很好,当它没用或甚至是有害的时候
据我所知...
因此，示例用法是在滚动的某个点应用该方法，使用scrollTop：400，然后逐渐设置不透明度动画，并在scrollTop：500时再次禁用will-change。
来源：shoptalkshow 播客 - 他们提到这篇文章 - https://dev.opera.com/articles/css-will-change-property/ - 这可能是比我的帖子更好的信息来源：D