2018-09-04

Planting绘制css的translateZ影响

话不多说看个例子，这个是使用translateZ的css 之后对渲染性能有多少影响
http://works.ibeeger.com/dev/chrome/
单纯从视觉角度就能感觉出来前后的差异，分析了6秒钟，结果页一目了然。
在这里插入图片描述
下图是启用translateZ的效果

Painting 占比很大，我简单的查了下影响panting的像背景图片、颜色等因素

然后取消使用咱们看看结果
在这里插入图片描述
差距很明显，下次进行位置样式对比 translate 和 top left ；
也可以自己动手实践下。
最后奉上源码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>transform-渲染性能</title>
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <style>
        *{ 
            margin: 0;
            padding: 0
        /*    -webkit-transform: translateZ(0);
            -ms-transform: translateZ(0);
            -o-transform: translateZ(0);
            transform: translateZ(0);*/
         }
         .box{
             width: 100px;
             height: 100px;
             box-sizing: border-box;
             border:1px solid #ccc;
             display: flex;
             float: left;
         }
         #btn{position: absolute; left: 50%; top: 50%;
            width: 300px;
             height: 80px;
             color: #c00;
             background-color: #fff;
             border:1px solid #f00;
             display: block;
             border-radius: 20px;
             cursor: pointer;
             -webkit-transform: translate(-50%, -50%);
             -ms-transform: translate(-50%, -50%);
             -o-transform: translate(-50%, -50%);
             transform: translate(-50%, -50%);
             z-index: 999;
         }
    </style>
</head>
<body>
    <button id="btn">开启</button>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div><div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div><div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <script>
        var open = false;
        var doms = document.querySelectorAll('.box');
        document.getElementById('btn').addEventListener('click',function(e) {
          open = !open;
          this.innerHTML = open ? '关闭优化' : '开启优化'
        });

        function change() {
             doms.forEach((dom) => {
               !open ? dom.style.transform = ' translateZ(0)' : dom.style.transform = '';
               dom.style.backgroundColor = `rgba(${parseInt(Math.random() * 255)},${parseInt(Math.random() * 255)},${parseInt(Math.random() * 255)},1)`
             })
            requestAnimationFrame(change)
        }
        change()
    </script>

</body>
</html>

文章来源: Planting绘制css的translateZ影响