will-change属性
牛逼的 will-change属性
will-change属性可以提前通知浏览器我们要对元素做什么动画,这样浏览器可以提前准备合适的优化设置。这样可以避免对页面响应速度有重要影响的昂贵成本。元素可以更快的被改变,渲染的也更快,这样页面可以快速更新,表现的更加流畅。
举个例子,当对于素使用 CSS 3D变形时,元素及其内容可以在合成到页面之前被创建到我们之前说的layer。然而把元素放到layer中是个昂贵的操作,这将会导致变形动画延迟一个课件的瞬间,也就是flicker
为了避免这种延时,我们可以在发生之前通知浏览器,这样浏览器会有一定的时间去准备这些变化,当发生的时候layer已经准备好了,这样动画酒会很流畅,不会闪屏
使用will-change提示浏览器关于即将发生的变形十分简单,添加个CSS属性就行
will-change: transform;
也可以告诉浏览器要改变元素的滚动条位置,或者多个要变化的属性,写下属性的名字就行,也可以写多个,逗号隔开
will-change: transform, opacity;
声明了元素即将进行的变化会让浏览器在渲染页面时做更好的决定,这明显比之前说的3D hacks要好。
合理使用
了解了will-change的行为,为浏览器上一切元素设置will-change是不是效率会变高?答案是否定的,will-change如果被滥用会使页面崩溃。
will-change也有副作用,虽然并不直接可见,毕竟它只是在背后和浏览器说悄悄话,为了合理使用will-change,给一些小建议
不要声明太多属性或为太多元素声明
*,
*::before,
*::after {
will-change: all;
}
虽然看起来很屌,但其实对页面渲染伤害很大,这样的规则设了和没设没什么区别,浏览器本来就尝试最优的渲染所有元素,就等于你让老师重点照顾班里每个同学一样,就是废话!
其实这甚至是有害的,因为一些操作会占用太多的资源,甚至会导致页面奔溃,就等于强制要求老师为每个学生补课,累死了。。。
给浏览器足够的时间工作
will-change顾名思义,通知浏览器即将发生的变化,而不是正在发生的变化。使用will-change,我们要求浏览器重点照顾我们声明的元素,为了这个浏览器需要一定的时间来组织优化操作,这样当变化发生的时候,优化才能没有延迟的作用到元素
在变化前立即为元素添加will-change几乎没有作用,可能还不如不设置,因为会导致新的layer创建
.element:hover {
will-change: transform;
transition: transform 2s;
transform: rotate(30deg) scale(1.5);
}
这样的设置就没什么用,我们需要给浏览器足够的时间,下面这样就是有用的,感受一下
.element {
/* style rules */
transition: transform 1s ease-out;
}
.element:hover {
will-change: transform;
}
.element:active {
transform: rotateY(180deg);
}
如果一定要hover的时候,也有技巧
.element {
transition: opacity .3s linear;
}
/* declare changes on the element when the mouse enters / hovers its ancestor */
.ancestor:hover .element {
will-change: opacity;
}
/* apply change when element is hovered */
.element:hover {
opacity: .5;
}
其实核心思想就是让浏览器有时间去准备
变化完成后移除will-change
对于一般的优化,当变化完成的时候浏览器会撤销优化,恢复普通模式,但是如果使用了will-change会导致该优化迟迟不能释放,这就要求我们用完了就释放
这时候我们需要借助JavaScript
'auto';
}
当然对于用户会反复触发的操作放在style中不移除也可以
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的属性必须造成这个元素产生一个包含区块的固定定位的元素
浏览器兼容性
这个目前不乐观,相信以后会好
image
结束语
will-change可以帮助我们摆脱hack的硬件加速,但是能力越大、责任越大
Tab Atkins Jr
Set will-change to the properties you’ll actually change, on the elements that are actually changing. And remove it when they stop.
will-change属性的更多相关文章
- 反射$change属性问题
写DB框架的时候,使用反射获取属性的时候,多了一个$change属性,当场一脸懵比. stackoverflow 发现是Android Studio2.0的.Instant Run 的问题. 解 ...
- Android Configuration change属性
问题:横竖屏切换时Activity的生命周期? 答案: 1.不设置Activity的android:configChanges时,切屏会重新调用各个生命周期,切横屏时会执行一次,切竖屏时会执行两次 2 ...
- Android系统属性简介
查看Android源码你会发现,代码中大量存在:SystemProperties.set()/SystemProperties.get():通过这两个接口可以对系统的属性进行读取/设置,顾名思义系统属 ...
- KnockoutJS 3.X API 第七章 其他技术(2) 使用扩展器来增加可观察量(监控属性)
Knockout observables提供了支持读取/写入值并在值改变时通知订阅者所需的基本功能. 但在某些情况下,您可能希望向可观察者添加其他功能. 这可能包括通过在可观察者前面放置一个可写的计算 ...
- (转)Android 系统属性SystemProperty分析
一 System Property 代码中大量存在:SystemProperties.set()/SystemProperties.get():通过这两个接口可以对系统的属性进行读取/设置, 顾名思义 ...
- Android的系统属性SystemProperties
创建与修改android属性用Systemproperties.set(name, value) 获取android属性用Systemproperties.get(name) 注意:android属性 ...
- Android 系统属性SystemProperty分析
http://www.cnblogs.com/bastard/archive/2012/10/11/2720314.html Android System Property 一 System Pro ...
- Android SystemProperties设置/取得系统属性的用法总结
通过调查得知,Android系统中取得/设置系统属性的用法参考以下3篇文章就足够了. 1.Android SystemProperties简介 介绍了设置属性需要的权限,已经设置权限的方法. Syst ...
- getprop从哪获取属性
Android SystemProperties设置/取得系统属性的用法总结 通过调查得知,Android系统中取得/设置系统属性的用法参考以下3篇文章就足够了. 1.Android SystemPr ...
- 科学计算三维可视化---Traits(Event和button属性)
Event和button属性 是两个专门用于处理事件的change属性 Event属性和其他Trait属性不一样 Button属性是由Event属性继承而来的 Event监听 from traits. ...
随机推荐
- C#自绘蒙版控件,带延时隐藏显示,拷贝底图功能
using System; using System.Collections.Generic; using System.ComponentModel; using System.Drawing; u ...
- Jacob用法收集
介绍 Jacob 是Java-COM Bridge的缩写,它在Java与微软的COM组件之间构建一座桥梁.使用Jacob自带的DLL动态链接库,并通过JNI的方式实现了在Java平台上对COM程序的调 ...
- linux 更改文件夹所有者
更改“tp5”文件的所有者为”www” chown -R tp5/ www 修改目录及其子目录的用户组为“www” chgrp -R www tp5 同时更改文件或目录的所有者和用户组 chown - ...
- 解决IntelliJ IDEA无法读取配置*.properties文件的问题
idea对这些配置的文件方式很明显和eclipse是不同的.在idea中有一个 Content Roots的概念.需要为每一个folder配置相应的Content Roots.Content Root ...
- python - 远程主机执行命令练习(socket UDP + subprocess.Popen()) 练习1
环境是windows 环境. server端: import socket import subprocess ss = socket.socket(socket.AF_INET,socket.SOC ...
- Spring使用注解和struts集成
- VMware xp系统联网
1.
- latex 字体大小设置
tex 设置字体大小命令由小到大依次为: \tiny \scriptsize \footnotesize \small \normalsize \large \Large \LARGE \huge \ ...
- python日志和异常
“日志”转载:http://www.cnblogs.com/dkblog/archive/2011/08/26/2155018.html "异常"转载:http://www.cnb ...
- Linux内存管理--基本概念【转】
转自:http://blog.csdn.net/myarrow/article/details/8624687 1. Linux物理内存三级架构 对于内存管理,Linux采用了与具体体系架构不相关的设 ...