前言

高性能移动 Web 相较于 PC 的场景需要考虑的因素也相对更多更复杂，我们总结为以下几点：流量、功耗和流畅度。在 PC 时代，我们更多考虑体验上的流畅度；而在移动端，我们则需要额外关注用户基站网络流量使用情况，设备耗电量等等。

关于流畅度，主要体现在前端动画中，在现有的前端动画体系中，通常有两种模式：JS 动画和 CSS3 动画。JS 动画是通过 JS 动态修改样式实现动画，在 PC 端兼容低版本浏览器不失为一种推荐方案。而在移动端，我们推荐性能更出色的浏览器原生实现方案：CSS3 动画。

然而，CSS3 动画在移动多终端设备的场景下，相对于 PC 端来说会有更多的性能问题，主要体现在动画的卡顿和闪烁。

目前对提升移动端 CSS3 动画体验的主要方法有以下几点：

尽可能多地利用硬件能力，如使用 3D 变形来开启 GPU 加速

* {
    -webkit-transform: translate3d(0, 0, 0);
    -moz-transform: translate3d(0, 0, 0);
    -ms-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
}

如动画过程有闪烁（通常发生在动画开始的时候），可以尝试一下下面的 Hack：

* {
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    -ms-backface-visibility: hidden;
    backface-visibility: hidden;

    -webkit-perspective: 1000;
    -moz-perspective: 1000;
    -ms-perspective: 1000;
    perspective: 1000;
}

一个元素通过 translate3d 右移 500px 的动画流畅度会明显优于使用 left 属性。

但是：3D 变形会消耗更多的内存和功耗，应确实有性能问题时才去使用它。

尽可能少的使用 box-shadow 和 gradients

box-shadow 和 gradients 往往都是页面的性能杀手，尤其是在同一个元素都使用了他们，所以拥抱扁平化设计吧。

尽可能的让动画元素不在文档流中

div {
    position: fixed;
    position: absolute;
}

优化 DOM layout 性能

我们从这个例子开始入手：

// 触发了两次 layout
var newWidth = aDiv.offsetWidth + 10; // Read
aDiv.style.width = newWidth + "px"; // Write
var newHeight = aDiv.offset + 10; // Read
aDiv.style.height = newHeight + "px"; // Write

// 只触发了一次 layout
var newWidth = aDiv.offsetWidth + 10; // Read
var newHeight = aDiv.offsetHeight + 10; // Read
aDiv.style.width = newWidth + "px"; // Write
aDiv.style.height = newHeight + "px"; // Write

从注释可以找到规律，连续的读取 offsetWidth/offsetHeight 属性与设置 width/height 属性，相比分别读取设置单个属性可以少触发一次 layout。

从结论看似乎与执行队列有关，这是浏览器的优化策略。所有可触发 layout 的操作都会暂时被放入 layout-queue 中，等到必须更新的时候再计算整个队列中所有操作影响的结果，如此就可以只进行一次的 layout，从而提升性能。