初试Chrome性能测试

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属性则避免了这一过程，因此用时更少，效率更高。