最近入了Web动画的坑，所以记录下自己的学习过程，分享给大家。CSS33D行星运动演示页面请点击：演示。（推荐使用Chrome打开）本文完整代码，以及更多CSS3效果，可以在我的Github上看到，希望大家点个star。嗯，可能有人打不开demo或者页面乱了，贴几张效果图：（图片有点大，请耐心等待）再随机截图一张CSS33D行星运行效果图：强推荐大家点击进入演示页面感受CSS33D的魅力，毕竟图片能展示的有限。那么这个CSS33D行星动画的制作过程就不详细说了。本文重点介绍Web动画和性能优化。详细的CSS33D可以参考之前的博客：【CSS3进阶】炫酷3D旋转视角。简单思路：1、以上篇文章制作的3D照片墙为原型，进行改造；2、每个球体的制作我想了很多方法，最后采用了这种折中的方法。每个球体本身也是一个CSS33D图形。那么在制作过程中使用Sass写CSS可以减少很多繁琐的写CSS动画的过程；3.Demo中使用Javascript写了一个鼠标跟随的监听事件。如果去掉这个事件，整个行星运动动画本身就是纯CSS实现的。下面将进入本文的重点。我会从性能优化的角度讲浏览器渲染显示原理、浏览器重绘重排、动画性能检测与优化等：浏览器渲染显示原理及其对网页动画的影响。我们知道，不同浏览器的内核（渲染引擎，RenderingEngine）是不一样的。比如最主流的chrome浏览器内核是Blink内核（在Chrome（28及以后版本）、Opera（15及以后版本）和Yandex浏览器中），Firefox是Gecko，IE是Trident，浏览器内核负责对于网页语法的解释和网页的渲染（显示），不同浏览器内核的工作原理并不完全一致。所以其实下面会主要讨论chrome浏览器下的渲染原理。因为chrome内核渲染的可考证资料很多，其他内核的浏览器我们不敢妄下定论，所以下面的讨论默认针对chrome浏览器。首先抛出一个小结论：用transform3dapi代替transformapi，强制开启GPU加速。这里我们谈到了GPU加速。为什么GPU可以加速3D变换？这一切都要从浏览器底层的渲染说起。浏览器渲染和显示网页的过程是家常便饭，面试时必问。大致可以分为：1.解析HTML（HTMLParser）2.构建DOM树（DOMTree）3.渲染树构建（RenderTree）4.绘制渲染树（Painting）找到一张很经典的图：这个渲染过程作为基础知识，继续深入。当页面被加载和解析时，它在浏览器中代表了一个非常熟悉的结构：DOM（DocumentObjectModel，文档对象模型）。当浏览器呈现页面时，它会使用许多未向开发人员公开的中间表示，其中最重要的结构是层。这一层是本文重点关注的：在Chrome中，有不同类型的层：RenderLayer（负责DOM子树）、GraphicsLayer（负责RenderLayer子树）。接下来我们要讨论的是GraphicsLayer层。GraphicsLayer图层作为纹理上传到GPU。纹理在这里很重要，那么什么是纹理呢？这里的纹理是一个GPU术语：将其视为从主内存（例如RAM）移动到图像内存（例如GPU中的VRAM）的位图图像。将其移至GPU后，您可以将其放入网格几何体中，并使用Chrome中的纹理从GPU中获取页面内容块。通过将纹理应用于非常简单的矩形网格，可以轻松匹配不同的位置和变换，这就是3DCSS的工作原理。不好理解，直接看例子吧。在chrome中，我们可以看到上面提到的GraphicsLayer——图层的概念。在开发者工具中，我们进行如下选择，调出显示图层边框选项：在一个非常简单的页面上，我们可以看到如下，这个页面只有一层。蓝色网格代表瓦片，你可以把它们看成是层（不是层）的单位，Chrome可以将它们作为更大层的一部分上传到GPU：创建元素自己的层，因为上面的页面非常简单，所以没有生成层，但是在非常复杂的页面中，例如，如果我们在一个元素上设置一个3DCSS属性来对其进行变换，我们可以看到该元素拥有自己的层时的样子。请注意橙色边框，它在此视图中勾勒出图层的轮廓：图层创建何时触发？上图中黄色边框框起来的图层就是GraphicsLayer，它对我们的网页动画来说非常重要。通常，Chrome会将图层的内容绘制成位图，然后再将其作为纹理上传到GPU。.如果内容不会改变，那么就不需要重新绘制（repaint）图层。这样做的意义在于，重绘所花费的时间可以用来做其他事情，比如运行JavaScript。如果绘制时间很长，也会造成动画失败和延迟。那么元素什么时候触发图层的创建呢？当前，满足以下任何条件时都会创建层：3D或透视变换（perspective，transform）CSS属性
