Give it to me I'm worth it Baby I'm worth it Uh huh I'm worth it Gimme gimme I'm worth it Give it to me I'm worth it Baby I'm worth it Uh huh I'm worth it Gimme gimme I'm worth it Okay, I tell her bring it back like she left some Bring it Bring it back like she left some Uh in the club with the lights off What you actin shy fo', come and show me that you wid it, wid it, wid it, wid it, wid it Stop playin', how you know that I wid it, wid it, wid it, wid it, wid it, wid it What you actin shy for Just give me you, just give me you Just give me you, that's all I wanna do And if what they say is true, if its true I might give me to you I may take a lot of stuff Guaranteed I can back it up I think I'ma call you bluff Hurry up, I'm waiting out front Uh huh, you see me in the spot like oooh I love your style Uh huh, show me what you got, cus I don't wanna waste my time Uh huh, you see me in the spot like oooh I love your style Uh huh, show me what you got now come and make it worth my while Give it to me I'm worth it Baby I'm worth it Uh huh I'm worth it Gimme gimme I'm worth it Give it to me I'm worth it Baby I'm worth it Uh huh I'm worth it Gimme gimme I'm worth it It's all on you, it's all on you It's all on you, so what you wanna do And if you don't have a clue, not a clue I'll tell you what to do Come harder just because I don't like it, like it too soft I like it a little rough, not too much, but maybe just enough Uh huh, you see me in the spot like oooh I love your style Uh huh, show me what you got, cus I don't wanna waste my time Uh huh, you see me in the spot like oooh I love your style Uh huh, show me what you got now come and make it worth my while Give it to me I'm worth it Baby I'm worth it Uh huh I'm worth it Gimme gimme I'm worth it Give it to me I'm worth it Baby I'm worth it Uh huh I'm worth it Gimme gimme I'm worth it Okay, I tell her bring it back like she left some Bring it Bring it back like she left some Uh in the club with the lights off What you actin shy fo', come and show me that you wid it, wid it, wid it, wid it, wid it Stop playin', how you know that I wid it, wid it, wid it, wid it, wid it, wid it What you actin shy for Uh huh, you see me in the spot like oooh I love your style Uh huh, show me what you got, cus I don't wanna waste my time Uh huh, you see me in the spot like oooh I love your style Uh huh, show me what you got now come and make it worth my while Give it to me I'm worth it Baby I'm worth it Uh huh I'm worth it Gimme gimme I'm worth it Give it to me I'm worth it Baby I'm worth it Uh huh I'm worth it Gimme gimme I'm worth it 最近研究了一下页面性能优化这一块,参照着这篇文章来实际动手做了一下
原文说的非常好,一路做下来确实很有成就感,页面的性能得到了非常大的提升,实时渲染帧率从原来十几帧提高到了接近60帧。
先嗮一下成果:




根据上图的结果来看,能够优化到这个程度确实算很不错了,但是在实际做的过程中,还是发现了许多问题
下面就说一下我在实际写的过程中的一些记录

一、新版Chrome里面FPS计数器的打开方法

文中说FPS计数器是自带的,于是我就去谷歌了下怎么打开,结果搜出来的都是老版Chrome的打开方法,当时的FPS Meter还在实验测试期呢,还要从chrome://flags里面去找。我找了找没找到,还以为没有这个功能了呢。
后来仔细一找,才发现这个功能已经可以在控制台里面找到了。下面说下新版Chrome里面打开FPS计数器的方法
F12打开控制台 -> DevTools -> More Tools -> Rendering settings



然后在打开的面板上面勾上 FPS Meter 即可看到FPS计数器出来了



二、关于 requestAnimationFrame 这个函数

对于这个函数,个人感觉有点不稳定,时好时坏,之前在公司的电脑上试的时候,倒是出现了卡帧的现象,弄得我还以为这个函数不能用呢,过了几天再来试了试,居然又没问题了。。。总的来说感觉这个函数我在家里的电脑上试的时候,跟setInterval条件下的帧率进行比较,发现并没有太大区别,可能是现在的浏览器的渲染性能越来越强的缘故吧。不知道这个 API 在移动端上的表现怎样,感觉可能会出现兼容性问题。
在PC上跟setInterval的比较情况如下:
使用setInterval:



使用requestAnimationFrame:




要说二者的最大区别,应该就是实现方式了吧。通过上面的结果,不难发现,requestAnimationFrame用的是递归式的调用,JS Heap一直在上升,然后上升到一定程度之后就被Chrome的垃圾清理给释放掉了,如此反复。而setInterval的JS Heap曲线基本上保持稳定不变,因为它是是非递归式的,这样来看似乎setInterval比requestAnimationFrame更有优势一些,不过个人感觉其实差别真的不大,爱用哪个用哪个吧。

注:这个 API 已经被写入了 HTML5.1标准
HTML 5.1-Web application APIs:Animation Frames

三、移除jquery,改用原生DOM操作

随着jquery越来越庞大,越来越多的人开始诟病jquery的大小和性能问题,尤其是在这种以实时渲染为基础的应用中,使用jquery来进行dom操作也是影响帧率的重要因素,经过实际动手操作后,发现确实若不使用jquery,dom操作的时间会大幅缩短
下面这张是去掉jquery之前的情况:





对比一下下面这张去掉了jquery之后的情况:





可以看到,Scripting脚本计算的时间大大缩短,取而代之的是Rendering渲染频率的提高,还是比较明显的能够发现去掉jquery能够带来的性能提升

四、使用 createDocumentFragment 拼接元素

使用这个方法的好处有不少,下面我就来随便列几点:

  1. 它能够比jquery更快地构造DOM树
  2. 能够实现在for循环构造完成DOM树以后再进行一次性的append,减少反复DOM操作浪费的时间
  3. 去掉在js中的html代码,将视图构造转换为业务逻辑
  4. 当需要修改里面的小圆的位置时,可以直接从js中调出对应的Element进行修改,不需要再进行一次DOM查询操作

这是改良以后的实现:

    var object = [];
    var mainContainer = document.getElementsByClassName("main")[0];
    var docFrag = document.createDocumentFragment();
    for (var i = 0; i < COUNT; i++) {
        var d = Math.random() * 2 * Math.PI;
        var v = Math.random() * 5;
        var circle = document.createElement("div");
        circle.id = "circle-" + i;
        circle.className = 'circle';
        docFrag.appendChild(circle);
        var vx = v * Math.cos(d);
        var vy = v * Math.sin(d);
        object.push({
          x: 250,
          y: 250,
          vx: vx,
          vy: vy,
          dom: circle
        });
    }
    mainContainer.appendChild(docFrag);


当需要修改小圆的位置时,进需要从object数组中取出对应的小圆进行修改即可

for (var i = 0; i < COUNT; i++) {
    var x = object[i].x;
    var y = object[i].y;
    var vx = object[i].vx;
    var vy = object[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;
    x += vx;
    y += vy;

    object[i].x = x;
    object[i].y = y;
    object[i].vx = vx;
    object[i].vy = vy;

    object[i].dom.style.transform = 'translate(' + x + 'px, ' + (400 - y) + 'px)';
}



最后附上优化好了之后的代码:
js性能优化初体验——代码

参考资料:
使用 Chrome Timeline 来优化页面性能
使用Chrome DevTools的Timeline分析页面性能
网页性能管理详解:浅谈chrome-Timeline及window.requestAnimationFrame()方法