will-change属性
2015-12-16 11:05
141 查看
很长一段时间内我们都通过
所谓硬件加速就是创建了一个被传递到GPU处理的层的操作,然而强制使用hack方式创建layer并不是长久之计,创建layer的技术可以使页面加速,但是也有代价:它们占用RAM和GPU存储空间(考虑到移动设备的存储容量有限),所以必须呗小心使用,确保这么做真的对页面渲染有所帮助
为了避免创建layer的hacks,一个允许我们提前通知浏览器我们将对元素做何种变化的CSS属性被引入,这样浏览器可以优化处理元素渲染的方式,为元素提前准备昂贵的动画处理操作,这就是
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的属性必须造成这个元素产生一个包含区块的固定定位的元素
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的属性必须造成这个元素产生一个包含区块的固定定位的元素
相关文章推荐
- js校验
- MongoDB安装、CURD操作、使用场景分析总结(1)
- 设计模式(十二)---策略模式
- 杭电ACM1907(Nim博弈)
- 数据模型
- Java实现http与https切换
- SQL Server 重复执行作业中某个步骤
- SQL Server 维护计划备份主分区
- 大数据之mongodb --> (1)在ubuntu上安装mongodb
- Unix/Linux文件系统剖析
- Java并发编程:线程间协作的两种方式:wait、notify、notifyAll和Condition
- 开发小计(1)
- 性能
- pat考试准备一_两个数字和的标准化输出
- git学习笔记-1
- ARC内存管理
- 23种设计模式C++实例之桥接模式
- 开发中遇到C++ 问题,记在这里,方便以后查看
- Linux的bg和fg命令简单介绍
- 写时拷贝技术(copy-on-write)