使用动画在移动应用程序中很容易的。如果您遵循我们的建议，移动应用程序中使用动画变得很简单。虽然现在很多人在移动应用程序中使用CSS3 Animation来制作动画，当然很多人也不这么做。很多最佳实践，还是不断的被忽视。出现这种情况主要是因为仍有许多人并不真正了解这些最佳实践存在的真正原因，因此没有大力的支持。

让我们直接进入主题。现代浏览器在完成以下四种属性的动画时，消耗成本较低： position（位置）， scale（比例缩放）, rotation（旋转） 和 opacity（透明度）。如果你对其他的属性设置动画，你就需要对你的冒险负责。而且你的动画将可能达不到流畅的60fps。

在De Voorhoede,我们尽所能地为客户推进前端性能。虽然不是很容易就能说服客户完全按照我们的指令去做，但我们一直在尽全力和他们沟通，解释提高性能的重要性，或者将他们的性能与他们主要竞争对手进行比较。最近更新了我们的网站，除了设计上进行了大修，这也是一个将性能提高到最优的理想机会。我们的目标是有效控制，注重性能，与未来技术兼容，并将创建网站变为了一件有趣的事。以下是我们如何改进网站的具体做法。

CSS Animation是实现Web Animation方法之一，其主要通过@keyframes和animation-*或者transition来实现一些Web动效。不过今天我们聊的不是怎么制作Web动画，咱们来聊聊CSS Animation性能相关的话题。

当浏览器从服务器接收到一个HTML页面的请求时，到屏幕上渲染出来要经过很多个步骤。浏览器完成这一系列的运行，或者说渲染出来我们常常称之为“关键渲染路径”（Critical Rendering Path）。理解CRP（Critical Rendering Path）相关的知识可以更好的提高网站的性能。

CSS动画性能非常好。虽然是简单的几个动画元素，如果你的代码没有让动画表现出其意义或者说使用页面变得更为复杂，网站的用户可能很快就会发现，并且有可能让用户觉得恶心。反而得不到相应的好评。在这篇文章中，我将介绍浏览器开发者工具的一些有用的功能，这些功能将能帮助你检查出你的CSS动画在渲染引擎下会发生些什么。这样，当你的动画看起来有点卡（帧率图有点波涛汹涌），你会找到地应的方法知道为什么为会这样以及如何解决它。

今天我们来深入研究一下 Chrome 的网络协议栈，来更清晰的描述早期网络加载（像 <link rel=“preload"> 和 <link rel=“prefetch”>）背后的工作原理，让你对其更加了解。像其他文章描述的那样，preload 是声明式的 fetch，可以强制浏览器请求资源，同时不阻塞文档 onload 事件。

现在是成为 Web 性能爱好者的最佳时间，特别是 Chrome 60 的 Paint Timing API 的出现更加证明了这一事实。虽说 Paint Timing API 仍属于正在激增的 Performance API 之一，但是它还提供了抓取 页面 和 资源 耗时的能力，通过这个全新的实验性 API，你可以在页面开始绘制时就去抓取你需要的度量值。

CSS的容器模块指的是CSS Containment Module，到目前为止主要分为 Level 1 和 Level 2两个版本。在容器模块中主要包含了CSS的 contain 和 content-visibility 两个属性。这两个属性都可以帮助我们提高Web页面的性能，那么它们是如何工作的？我们在实际项目中又应该怎么使用呢？如果你感兴趣的话，请继续往下阅读。

用户在访问一个Web网站（页面）或应用时，总是希望它的加载速度快，功能流畅。如果过于慢，用户就很有可能失去耐心而离开你的Web网站或应用。作为开发人员，给自己应用提供更快的访问速度，提供很好的用户体验是必备的基础技能，而且Web开发者在开发中也可以做很多事情来改善用户体验。那我们今天就来和大家聊聊，在CSS方面有哪些技巧可以帮助我们来提高Web页面的渲染速度。