代码如下 :
<!DOCTYPE html>
<html>
<meta charset="UTF-8">
<title></title>
<style>
*{
margin:0;
padding:0;
}
.move{
position: absolute;
left:400px;
width:100px;
height:100px;
background-color: red;
animation:demo1 5s alternate infinite;
}
@keyframes demo1 {
0%{
top:0px;
}
100%{
top:300px;
}
}
@keyframes demo2 {
0%{
transform: translateY(0px);
}
100%{
transform:translateY(300px);
}
}
</style>
</head>
<body>
<div class="move"></div>
</body>
</html>
实现效果一个红框可以一直上下移动demo1 和 demo2 都可以满足这个效果
而且看起来都是一样, 那么这两个写法哪个更好一些. 效率更高一些 ?
测一下: demo1
在开发者工具中选Performance 然后录制 .
得到的结果是这样:
image.png
然后测一下demo2
image.png
demo2.png
demo2-2.png
效果还是比较明显的. Demo2中用transform这种写法,整体上的效率更高.
CSS 渲染过程如下
JavaScript => Style => Layout => Paint =>Composite
process.png
那么我们现在知道了 translate 占用内存小,效率更高. 那么为什么是这样 ? 具体浏览器是怎么实现的?
请看这个Web性能优化-重绘与回流
