很长一段时间内我们都通过translateZ()
或者translate3d()
hack来骗取浏览器触发硬件加速,具体做法就是为元素添加没有变化的3D变形,比如元素在2维空间可以通过添加以下CSS来硬件加速
transform: translate3d(0, 0, 0);
所谓硬件加速就是创建了一个被传递到GPU处理的层的操作,然而强制使用hack方式创建layer并不是长久之计,创建layer的技术可以使页面加速,但是也有代价:它们占用RAM和GPU存储空间(考虑到移动设备的存储容量有限),所以必须呗小心使用,确保这么做真的对页面渲染有所帮助
为了避免创建layer的hacks,一个允许我们提前通知浏览器我们将对元素做何种变化的CSS属性被引入,这样浏览器可以优化处理元素渲染的方式,为元素提前准备昂贵的动画处理操作,这就是wiil-change
属性
will-change属性的值
- auto 表示没有明确的意图; 无论是启发式和最优化,用户代理应该应用都和正常情况相同
- scroll-position 表示开发者期望去在接下来去改变或者有动画应用元素的滚动位置
- contents 表示开发者期望去在接下来去改变或者有动画应用元素的内容
- 用来排除关键字 will-change, none, all, auto, scroll-position, and contents, 从之外增加一些通用的关键字
will-change: transform:
will-change: opacity:
will-change: top, left, bottom, right:
如果一个属性无最初的值,在这个元素上这个属性将创建一个堆栈的内容, 明确规定在will-change的属性必须在这个元素上创建一个堆栈的内容.
如果一个属性无最初的值, 这个属性将造成这个元素产生一个包含区块的固定定位的元素, 明确规定在 will-change的属性必须造成这个元素产生一个包含区块的固定定位的元素
时间: 2024-08-03 15:13:15