大家好，很久没给大家升级文章，今天给大家分享少量CSS优化，也希望本文对正在学习web前台的小伙伴学习有所帮助。

CSS动画被认为是超高性可以的。这种情况对于少数元素的简单动画来说是事实，假如您没有在考虑性可以的情况下，对动画进行编码，会添加很多复杂性，网站使用户很快就会注意到，可可以会感到恼火。

我将详情少量有使用的浏览器开发者工具的功可以，这些功可以将可以够帮助你在用 CSS 执行动画时检查究竟发生了什么。 这样，当一个动画效果看起来不太连贯时，你将会更好地理解为什么以及如何处理它。

CSS性可以相关的开发者工具

你的动画至少需要达到60 fps（每秒帧数）才可以在浏览器中流畅运行。 速率越低，动画效果越差。 这意味着浏览器在一帧内完成工作的时间不超过16毫秒。 但是在短的时间内究竟发生了什么呢？ 你怎样知道你的浏览器能否跟上了预期的帧率？

在评估动画的质量时，我认为没有什么可以比使用户体验更好。但是，现代浏览器中的开发者工具，尽管并不总是100％可靠，但已变得越来越智可以，而且你能用它们来查看，编辑和调试您的代码。

当您需要检查帧率和CSS动画性可以时，也是如此。 来看看它是如何工作的。

Firefox的性可以调试工具初探

在本文中，我用 Firefox 性可以工具。另一个重要的竞争者是 Chrome 性可以工具。你能选择你最喜欢的，由于这两个浏览器提供强大的性可以功可以。

要打开 Firefox 的开发者工具，需要以下几步：

右键点击网页，选择菜单里的“Inspect Element(查看元素)”。

假如你使用键盘的话，Windows的快捷键是 Ctrl + Shift + I ， Linux或者者苹果OS X的快捷键是 Cmd + Opt + I 。

Waterfall(瀑布)部分非常适合检查和 CSS transition、关键帧动画相关的问题。另两个部分分别是“(Call Tree)调使用树”和“(JS Flame Chart)JS火焰图”，您能用它来查找 JavaScript 代码中的瓶颈。

Waterfall(瀑布)顶部有一个摘要部分，并有详细的分类。在这两个数据都是有相应的颜色编码的：

黄色条代表 JavaScript 操作。

紫色条是指计算HTML元素的CSS样式（重新计算样式）以及页面布局（layout，布局）。 布局操作对于浏览器来说是开销相当高昂，所以假如你为牵涉重复布局（也称为reflows(回流) – 如margin，padding，top，left，等等）的属性设置动画效果时，结果可可以会很糟糕。

绿色条是指将你的元素绘制成一个或者多个位图（Paint）。涉及绘制操作的动画属性，如color，background-color，box-shadow 等，会带来高昂的绘制开销，这可可以是动画缓慢和使用户体验不佳的起因。

瀑布摘要部分下方的绿色条代表帧率信息。

一个正常的页面，可可以每秒帧数看起来很高，但更重要的是一致性，—— 即没有太多的起伏。

我们使用下面这个例子加以说明。

性可以检查工具

这是一个利使用@keyframes关键字做出的CSS动画的例子。测试页面是这样的：

紫色的矩形会在视窗内做无限循环的滑入和滑出动画。

我通过设置这个div元素的margin-left来控制这个元素在视窗里位置。@keyframes关键帧的设置如下：

帧率视图看起来有点锯齿，帧率平均为44.82 fps，有点低。

另外，请注意动画过程中发生的所有布局和绘画操作。这些是浏览器在主线程里的开销较大的操作，会对性可以产生有负面影响。

最后，假如你访问 Inspector(检查器) 工具，点击动画部分，将鼠标悬停在动画名称上，会弹出一个信息框，显示所有关于当前动画的相关数据。假如你的动画经过优化，这里会有一条消息明确指示出来。本例的动画未经优化。

现在帧率更高（56.83 fps），瀑布图没有显示开销大的布局和绘制操作。

假如你打开“Inspector(查看器)”，查看“Animation(动画)”面板，而后鼠标悬停在动画名上，你会看到如下信息：

仅只对CSS的 Opacity，Transforms 和 Filters 应使用动画效果

也许你听过相似的建议，但以防万一，还是需要再重复一遍：假如你希望动画效果流畅，那么只利使用opacity,transforms，filters这些属性做动画。没有限制的动画会让浏览器不堪重负，在很少的时间内执行开销很大的操作，最终并不可以达到很好的效果。

就像开发者工具显示的这样，重新布局页面或者者绘制元素都不是帮助我们的朋友。

然而， 不同浏览器解决CSS属性稍有不同。假如你希望知道哪些浏览器会针对哪些属性触发页面的布局、绘制事件（尤其是升级某些属性时，可可以会涉及到动画的），请看CSS Triggers。

为了保证高性可以动画，常使用的方法就是迫使浏览器把属性升级的任务交给GPU（图形解决器）去做，这样就通过利使用硬件加速减轻了浏览器主线程的压力。你还能用will-change这一CSS属性，或者者translateZ(0)以及translate3d(0,0,0)的小技巧。上面的方法都行的通，但假如你过度用也仍然可可以引起不可避免的性可以问题，比方说动画卡慢。

好了，今天内容就分享到这里，也欢迎你能在下面一起学习交流，共同成长！！