CSS 动画一站式指南( 八 ) _生活百科

top 是几何属性，操作 top 会改变节点位置从而引发回流，使用 transform:translate3d(x,0,0) 代替 top ，只会引发图层重绘，还会间接启动GPU加速，因此更加推荐使用 transform 来代替 top 。
4.3 避免使用 Table 布局当然 Table 布局现在已经很少用了，不过在这里还是提一下，来指出它所带来的问题，避免引入类似的问题。牵一发而动全身用在 Table 布局身上再合适不过了，可能很小的一个改动就会造成整个 <table> 回流，大家如果感兴趣可以用 Chrome Devtools的Performance调试看看。对于类似 table 布局的结构，建议用 <ul> 、 <li> 和 <span> 等标签进行取代。
4.4 避免规则层级过多浏览器的CSS解析器在解析css文件时，对CSS规则是从右到左匹配查找的，样式层级过多会影响回流重绘效率，建议保持CSS规则在 3层 左右。
4.5 避免节点属性值放在循环里当成循环变量像下面这段代码就存在很大的问题，每次循环操作 DOM 都会发生回流，应该在循环外使用变量保存一些不会变化的DOM 映射值。
for (let i = 0; i < 10000; i++) {const top = document.getElementById("css").style.top;console.log(top);}建议修改为下面这样：
const top = document.getElementById("css").style.top;for (let i = 0; i < 10000; i++) {console.log(top);}4.6 将频繁回流重绘的节点设置为图层在浏览器中设置频繁回流或重绘的节点为一张新图层，因为新图层能够阻止节点的渲染行为影响别的节点，这张图层里如何变化都无法影响到其他图层。
设置新图层通常有以下两种方式：

将节点设置为 <video> 或 <iframe>
为节点添加 will-change

4.7 开启 GPU 硬件加速模式为节点声明 transform:translate3d()或transform:translateZ() ，这两个声明都会开启GPU硬件加速模式，从而让浏览器在渲染动画时从CPU转向GPU，实现硬件加速。
transform:translate3d()和transform:translateZ() 其实是为了渲染3D样式，但声明为 0后并无真正使用3D效果，但浏览器却因此开启了GPU硬件加速模式。在 Webkit内核 下使用 transform:translate3d()加速效果会更明显。
CSS 性能优化的方法还有很多很多，这里就不一一列举了，感兴趣的同学可以自行学习一哈。
5. 总结本文主要讲了 CSS 动画方面的知识并给出了一些简单的实践以及一些性能上的优化方法，希望通过本文可以帮助你对 CSS 动画有一个简单的认识并能上手一些简单的动画。
虽然在 CSS3 中引入三大交互属性后，让 CSS 也能实现一些比较复杂的动画了，但是不得不承认 CSS 可以实现的动画效果还是非常有限。
不过好在业界还有很多可以实现动画的方案，例如 canvas，three.js，zrender，d3 等等，提到动画一般还会联想到数据可视化这个领域，数据可视化的应用在我们日常工作和生活中随处可见，例如前端监控平台上的各种绘图，某些网站上各种商品的 3D 展示等等，如果对数据可视化的方向比较感兴趣也可以研究学习一哈，很有趣的一个方向。