初试Chrome性能测试
程序员文章站
2022-06-07 08:28:28
...
1、之前做空间图集里面要实现预览图的左右滑动，也就是改变图片的位置。一般可以使用三种方法：改变元素的left属性；改变元素的margin-left属性；使用transform属性。
2、下面分别用三种方法来实现元素位置的移动：3s内元素向下移动500px。并使用Chrome开发者工具进行性能测试。
代码如下：
<head>
<meta charset="utf-8">
<title>TestMove</title>
<style>
#box{
width:100px;
height:100px;
background-color:red;
position:relative;
animation:move1 3s;
-webkit-animation:move1 3s;
}
@keyframes move1
{
from {top:0px;}
to {top:500px;}
}
@-webkit-keyframes move1{
from {top:0px;}
to {top:500px;}
}
@keyframes move2{
from{margin-top:0px;}
to{margin-top:500px;}
}
@-webkit-keyframes move2{
from{margin-top:0px;}
to{margin-top:500px;}
}
@keyframes move3{
from{transform:translateY(0px);}
to{transform:translateY(500px);}
}
@-webkit-keyframes move3{
from{transform:translateY(0px);}
to{transform:translateY(500px);}
}
</style>
</head>
<body>
<div id="box"></div>
</body>
3、三种方式的性能比较：
（1）使用top属性：
（2）使用margin-top属性：
（3）使用transform属性：
可以看到，使用transform的效果最好，margin-top次之，top最差。使用top和margin-top执行过程中，大部分时间花在了网页的渲染（rendering）（大于80ms）与绘制（painting）（大于40ms）过程中，而使用transform在渲染与绘制上所用时间均在5ms左右。
4、分析：
它们之间的差距源自浏览器渲染的原理：
浏览器生成动画的时候一般有两种方式：
第一种方式是通过JavaScript或者css来改变元素的属性；
第二种方式是通过JavaScript在canvas上绘制一个动态图形；
第一种方式的动画生成步骤如下：
① JavaScript或者css来改变元素的属性；
② 计算元素的最终属性；
③ Layout布局，根据元素的最终属性完成网页的布局（一个元素的变化会引起整个网页内容的联动变化，比如margin、padding等，这个联动过程叫做reflow重排）；
④ 绘制：元素存在层级关系，把每个层级的元素分层分开完成渲染（颜色、图片、边框、阴影等）；
⑤ 合并渲染，不同层级元素合并一起完成最终值的渲染。
使用margin-top和top动画执行过程中，大部分时间花在了网页的渲染（rendering）与绘制（painting）过程中，因为它们都要执行上述过程的1-5步骤，而使用transform属性则避免了这一过程，因此用时更少，效率更高。