说说为什么应该使用transform来替代top-前端--易笔记

在进行页面性能优化的时候，经常被告诫要使用transform替代top来实现动画，这样性能会更好，作为一名有追求的前端，不仅需要知其然还要知其所以然，今天就通过chrome的performance工具来直观展示其中的原因。

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
    <style type="text/css">
        .main{
            width: 100px;
            height: 100px;
            border: 1px solid red;
            position: relative;
        }
    </style>
</head>
<body>
  <p class="main">

  </p>
  <script src="https://cdn.bootcss.com/zepto/1.2.0/zepto.min.js"></script>
    <script type="text/javascript">
        setTimeout(function () {
          $('.main').css('top', '200px')
        },3000)
    </script>
</body>
</html>

源码，非常简单，就是3秒后将p的改为200px,通过performance抓取图片如下

说说为什么应该使用transform来替代top

非常明显有一个重绘的时间。

之后我们将position替换成transform，

-$('.main').css('top', '200px')
+$('.main').css('translateY', 'translateY(200px)')

说说为什么应该使用transform来替代top

发现没有，使用transform后，页面的回流直接没有了，这就是使用transform性能更好的原因，如果我们使用定时器频繁改变top的时候，效果就会十分明显，其实在css类似的属性还有很多，这里只是以transform作为切入点进行讲解，其他优化的策略还有：

- opacity替代visibility

- 多个DOM统一操作（虽然V8会有缓存优化）

- 先将DOM离线，即display：none；修改后显示

- 不要把DOM放在已给循环中作为循环变量

- 不要使用table

原理已经解释完了，但是细心的同学会发现，虽然回流是没有了，但是后面进行图层合并的耗时却增加了60%，甚至快超过了回流消耗的时间，这是为什么呢？这部分涉及到图层的知识，先挖个坑，以后有时间会专门写一篇图层创建与合并的文章。

时间：2018/5/24 14:59:08