前端性能优化-CSS的性能优化：--transform与position的区别、硬件加速工作原理及注意事项

thewar196

已于 2022-05-06 09:32:41 修改

阅读量3.2k

点赞数 7

分类专栏：基础面试题前端知识体系主流面试题文章标签： css css3 经验分享

于 2022-05-06 09:24:36 首次发布

本文链接：https://blog.csdn.net/thewar196/article/details/124602244

版权

上个星期去baidu二面面试，第一题就有问到这样问题： transform与position:absolute 有什么区别? 回家后查资料发现这道题目其实不简单啊，涉及到重排、重绘、硬件加速等网页优化的知识。

⼀、问题背景

　　过去⼏年，我们常常会听说硬件加速给移动端带来了巨⼤的体验提升，但是即使对于很多经验丰富的开发者来说，恐怕对其背后的⼯作
原理也是模棱两可，更不要合理地将其运⽤到⽹页的动画效果中了。
1、position + top/left 的效果
　　下⾯让我们来看⼀个动画效果，在该动画中包含了⼏个堆叠在⼀起的球并让它们沿相同路径移动。最简单的⽅式就是实时调整它们的
left 和 top 属性，使⽤ css 动画实现。

<style>
    html,
    body {
        width: 100%;
        height: 100%;
    }
    
    .ball-running {
        animation: run-around 4s infinite;
        width: 100px;
        height: 100px;
        background-color: red;
        position: absolute;
    }
    
    @keyframes run-around {
        0%: {
            top: 0;
            left: 0;
        }
        25% {
            top: 0;
            left: 200px;
        }
        50% {
            top: 200px;
            left: 200px;
        }
        75% {
            top: 200px;