过去几年，我们常常会听说硬件加速给移动端带来了巨大的体验提升，但是即使对于很多经验丰富的开发者来说，恐怕对其背后的工作原理也是模棱两可，更不要合理地将其运用到网页的动画效果中了。在本文中，我会和大家分享有关硬件加速的前端技巧。

现在动辄几兆大小的页面加载量，让性能优化成了不可避免的热门话题。WEB 应用越流畅，用户体验就会越好，继而带来更多的访问量。这也就是说，我们应该反省一下那些过度美化的 CSS3 动画和多重操作的 DOM 元素是否都考虑到了在性能方面的影响。

现在，Web App 日益重视用户的交互体验，了解性能优化的方式则可以有效提高用户体验。阅读和实践下面的性能优化技巧，可以帮你改善应用的流畅度、渲染时间和其他方面的性能表现。对 Web App 进行性能优化是一份冗杂沉重的工作，这不仅是因为构建一个 Web App 需要前后端协作，而且需要多方面的技术栈：数据库、后端、前端，需要运行在多种平台：iOS，安卓，Chrome，Firefox，Edge。这太复杂了！不过，还是有一些历经实践的通用方式可以用来优化 Web App 的性能。在接下来的小节中，我们将逐步介绍相关的细节。

你如何在 CSS 中设置box-shadow属性实现动画效果，既不会导致重新绘制每一帧，又不会严重影响你页面的性能？回答是:你并不能实现。因为box-shadow的动画变化会损害性能。这里有一个简单的办法可以实现上述问题效果。如果要实现最小的重新绘制，应该创建一个伪元素并对其opacity元素进行动画处理，使其以每秒60帧的动画模仿运动物体相同的效果。