网页卡顿监控

一、网页的FPS

网页在不断地变化之中，网页的FPS是指浏览器在渲染这些变化时的帧率。帧率越高，用户感觉网页越流畅，反之则会感觉卡顿。

最优的帧率是 60，即16.5ms 左右渲染一次。

通过 Chrome 或者 Firfox 等的性能工具也可以查看浏览器的帧率：

 FPS extension 是 Chrome 的一个扩展，可以显示当前网页的 FPS 值，即页面是否卡顿。该工具没有使用浏览器原生的API，而是通过浏览器的 requestAnimationFrame API 来实现。

代码类似：

 

 

var lastTime = performance.now();
var frame = 0;
var lastFameTime = performance.now();
var loop = function(time) {
    var now =  performance.now();
    var fs = (now - lastFameTime);   // 距上次的时间
    lastFameTime = now;
    var fps = Math.round(1000/fs);   // FPS
    frame++;
    if (now > 1000 + lastTime) {    // 两次不连续，间隔时间超过1s
        var fps = Math.round( ( frame * 1000 ) / ( now - lastTime ) );
        frame = 0;    
        lastTime = now;    
    };           
    window.requestAnimationFrame(loop);   
}
    

二、如何通过 FPS 确定网页存在卡顿呢？

按照我们对卡顿的观察，连续出现3个低于20的 FPS 即可认为网页存在卡顿。

function isBlocking(fpsList, below=20, last=3) {
  var count = 0;
  for(var i = 0; i < fpsList.length; i++) {
    if (fpsList[i] && fpsList[i] < below) {
      count++;
    } else {
      count = 0
    }
    if (count >= last) {
      return true
    }
  }
  return false
}

以此可以获得页面卡顿的数据，并进行优化。

 

参考：前端早读课