使用ChromeTimeline来优化页面性能

 
 

  
  
// animation.js  
  
  
  
  
  
// 粒子总数  
  
  
var COUNT = 500;  
  
  
// 重力  
  
  
var G = -0.1;  
  
  
// 摩擦力  
  
  
var F = -0.04;  
  
  
  
  
  
function init() {  
  
  
    for (var i = 0; i < COUNT; i++) {  
  
  
        var d = Math.random() * 2 * Math.PI;  
  
  
        var v = Math.random() * 5;  
  
  
        var circle = $('

效果如下(右上角的 FPS 计数器是 Chrome 调试工具自带的)：

只有 10 FPS……10 FPS……坑爹呢这是!

好吧，打开 Timeline，按下记录按钮，点一下页面中的“点我”，稍微过一会儿停止记录，就会得到一些数据。放大一些，对 jQuery 比较熟悉的同学可以看出来，这些大部分是 jQuery 的函数。我们点一下那个 updateCircle 的区块，然后看下面：

这里告诉我们，这个函数运行了多久、函数代码在哪儿。我们点一下那个链接，于是就跳到了 Source 页：

是不是很震撼，之前这个页面只是用来 Debug 的，没想到现在居然带了精确到行的运行时间统计。当然，这个时间是当前这一行在“刚才我们点击的区块对应的执行时间段”中运行的时间。所以我们就拿最慢的几句话来下手吧!

优化一：减少 DOM 操作

看到这几行代码，***反应是：mdzz。本来 DOM 操作就慢，还要在字符串和 float 之间转来转去。果断改掉!于是用一个单独的数组来存 x、y、d、v 这些属性。

 
 

  
  
var objects = []; 
  
  
// 在 init 函数中 
  
  
objects.push({ 
  
  
    x: 250, 
  
  
    y: 250, 
  
  
    d: d, 
  
  
    v: v 
  
  
}); 
  
  
// 在 updateCircle 函数中 
  
  
var x = objects[i].x; 
  
  
var y = objects[i].y; 
  
  
var d = objects[i].d; 
  
  
var v = objects[i].v; 
  
  
// …. 
  
  
objects[i].x = x; 
  
  
objects[i].y = y; 
  
  
objects[i].d = d; 
  
  
objects[i].v = v;   
 
 
 

效果显著!我们再来看一下精确到行的数据：

优化二：减少不必要的运算

所以最耗时的那句话已经变成了计算 vx 和 vy，毕竟三角函数算法比较复杂嘛，可以理解。至于后面的三角函数为什么那么快，我猜可能是 Chrome 的 V8 引擎将其缓存了(这句话不保证正确性)。然而不知道大家有没有发现，其实计算 d 完全没必要!我们只需要存 vx 和 vy 即可，不需要存 v 和 d!

 
 

  
  
// init 
  
  
var vx = v * Math.cos(d); 
  
  
var vy = v * Math.sin(d); 
  
  
objects.push({ 
  
  
    x: 250, 
  
  
    y: 250, 
  
  
    vx: vx, 
  
  
    vy: vy 
  
  
}); 
  
  
// updateCircle 
  
  
var vx = objects[i].vx; 
  
  
var vy = objects[i].vy; 
  
  
// 计算新速度 
  
  
var v = Math.sqrt(vx * vx + vy * vy); 
  
  
if (Math.abs(vx) < 1e-9) vx = 0; 
  
  
// 速度分量改变 
  
  
vx += F * vx / v; 
  
  
vy += F * vy / v + G; 
  
  
// …. 
  
  
objects[i].vx = vx; 
  
  
objects[i].vy = vy; 
 
 

只有加减乘除和开平方运算，每次比原来的时间又少了两毫秒。从流畅的角度来说其实已经可以满帧运行了，然而为什么我还是觉得偶尔会有点卡呢?

优化三：替换 setInterval

既然偶尔会掉帧，那么就看看是怎么掉的呗~原则上来说，在每一次浏览器进行绘制之前，Timeline 里面应该有一个叫 Paint 的事件，就像这样：

看到这些绿色的东西了没?就是它们!看上面的时间轴，虽然代码中 setInterval 的长度是 1000/16 毫秒，但是其实根本不能保证!所以我们需要使用 requestAnimationFrame 来代替它。这是浏览器自带的专门为动画服务的函数，浏览器会自动优化这个函数的调用时机。并且如果页面被隐藏，浏览器还会自动暂停调用，有效地减少了 CPU 的开销。

 
 

  
  
// 在 updateCircle ***加一句 
  
  
requestAnimationFrame(updateCircle); 
  
  
// 去掉全部跟 setInterval 有关的句子，把 showAnimation ***一句直接改成这个 
  
  
updateCircle(); 
 
 

我们至少可以保证，我们每算一次，屏幕上就会显示一次，因此不会掉帧(前提是每计算一次的时间小于 12ms)。但是虽然计算时间少了，浏览器重计算样式、绘制图像的时间可是一点都没变。能不能再做优化呢?

优化四：使用硬件加速、避免反复查找元素

如果我们用 transform 来代替 left 和 top 来对元素进行定位，那么浏览器会为这个元素单***立一个合成层，专门使用 GPU 进行渲染，这样可以把重计算的代价降到***。有兴趣的同学可以研究一下“CSS 硬件加速”的机制。同时，我们可以缓存一下 jQuery 的元素(或者 DOM 元素)，这样不用每次都重新查找，也能稍微提高一点效率。如果把元素缓存在 objects 数组中，那么连 id 都不用写了!

 
 

  
  
// init 
  
  
var circle = $('