深入理解为什么应该使用transform来替代top

最新推荐文章于 2024-09-30 07:30:00 发布

东都花神

最新推荐文章于 2024-09-30 07:30:00 发布

阅读量8.1k

点赞数 3

分类专栏： js 性能

本文链接：https://blog.csdn.net/qq_33988065/article/details/80371006

版权

js 同时被 2 个专栏收录

32 篇文章 1 订阅

订阅专栏

性能

2 篇文章 0 订阅

订阅专栏

在进行页面性能优化的时候，有一条规则是使用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>
  <div class="main">

  </div>
  <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秒后将div的改为200px,通过performance抓取图片如下

这里写图片描述
非常明显有一个重绘的时间。
之后我们将position替换成transform，

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

这里写图片描述

发现没有，使用transform后，页面的回流直接没有了，这就是使用transform性能更好的原因，如果我们使用定时器频繁改变top的时候，效果就会十分明显，其实在css类似的属性还有很多，这里只是以transform作为切入点进行讲解，其他优化的策略还有：
- opacity替代visibility
- 多个DOM统一操作（虽然V8会有缓存优化）
- 先将DOM离线，即display：none；修改后显示
- 不要把DOM放在已给循环中作为循环变量
- 不要使用table
原理已经解释完了，但是细心的同学会发现，虽然回流是没有了，但是后面进行图层合并的耗时却增加了60%，甚至快超过了回流消耗的时间，这是为什么呢？这部分涉及到图层的知识，先挖个坑，以后有时间会专门写一篇图层创建与合并的文章。