前端性能 - javascript如何判断页面的性能

Question

前端开发中，有时候为了更好的用户体验，需要判断用户当前的页面（或者浏览器、电脑）的性能。例如，如果当前页面已经很卡了，就不要显示一些高级动画，或者不要执行一些复杂的计算。那么如何怎样用javascript来判断当前页面的性能呢？

---

可能有人不理解我的提问，我这里抛个砖。下面是我找到的其中一种方法，通过计算setTimeout实际的延迟来判断当前页面性能。

var start = new Date().getTime();
var standardTime = 100; // 标准是100ms
var timer = setTimeout(function(){
    clearTimeout(timer);
    var end = new Date().getTime();
    var realTime = end - start;
    var delay = realTime - standardTime; // 时间差
    console.log('性能差异：', delay, standardTime);
}, standardTime);

但setTimeout可能会被当前执行的其他脚本或者UI渲染给阻塞了，所有这种方法应该是不太真实反映当前页面的性能。欢迎大家说说自己的想法。

Answer 1

我觉得你这个想法不太对路，判断客户端的性能这件事情就和判断客户端的浏览器型号一样太不靠谱了，因为你要判断的面实在太广了，这个标准无法量化啊。

就拿你这个例子来说吧，100 ms 的标准是谁定的？你怎么知道这个标准就是一个恰当的分界线呢？如果我作为一个用户计算出的时间差总是在你的判断临界点（delay）上下浮动，那我看你的网站岂不是一会儿有效果，一会儿没效果，我不以为你的应用疯了啊？

所以我觉得即使能够真实反映当前页面的性能，但由于每一次渲染都是有差异的（比如说刷新之后），所以这个思路会给部分倒霉的用户（刚好在临界点上下波动）很不好的体验。

Answer 2

现在的电脑性能已经足够强劲了 但是各个浏览器的差距还是很大 这个性能主要体现在渲染上而不是js上
所以靠js做一些数学计算估算不太靠谱
原则上不要设计太炫酷的动画（我记得bootstrap有个主题demo居然用了1920的图做各种动画渲染 i5+chrome都卡死） 偏偏有些框架比如slideshow那么吊连ie7都给你兼容
个人感觉对路的话还是针对浏览器版本优化（当然有调用gpu渲染的hack） chrome和ie11真是能吊着ie8打

Answer 3

console.time("Array initialize");
操作代码
console.timeEnd("Array initialize");

Answer 4

曾经想做过，后来由于项目时间问题放弃了。一些思路

• 用requestAnimationFrame处理绘制
• 绘制的同时收集Date.now()，计算fps
• fps过低时降低渲染质量，过高时提升渲染质量