2019-12-16

一周拾遗-第1期

本期内容：

如何获取浏览器帧率
不要将svg转成base64使用

如何获取浏览器帧率

帧率即屏幕的刷新频率，大部分设备为 60次/秒，帧率越大动画越流畅。

1
2
3

50~60 FPS：流畅舒适
30~50 FPS：一般
30 FPS 以下：卡顿

浏览器中一个 Tab 页对应一个进程，进程 = 主线程(负责计算) + 合成线程(负责绘制)。

js 动画需要主线程和合成线程共同工作，css 动画只需要合成线程工作。

法一：Chrome 开发者工具

More tools -> Rendering -> FPS meter

法二：借助 requestAnimationFrame

// 监测浏览器帧率
/*
在 canvas 上测试不准确？（ fps meter 的值远远小于 requestAnimationFrame 计算的值）。
原因：requestAnimationFrame 只计算主线程。
 * /
function fps() {
  var lastTime = performance.now();
  var frame = 0;
  var lastFrameTime = performance.now();
  function loop() {
    var now = performance.now();
    lastFrameTime = now;
    frame ++;
    if (now - lastTime > 1000) {
      var fps = Math.round( 1000 * frame / (now - lastTime) );
      console.log('fps:', fps, '\n');
      frame = 0;
      lastTime = now;
    }
    requestAnimationFrame(loop);
  }
  requestAnimationFrame(loop);
}

// 测试一：验证多个回调可能在一帧执行？
/* 回调函数会被传入DOMHighResTimeStamp 参数，DOMHighResTimeStamp 指示当前被 requestAnimationFrame() 排序的回调函数被触发的时间。在同一个帧中的多个回调函数，它们每一个都会接受到一个相同的时间戳，即使在计算上一个回调函数的工作负载期间已经消耗了一些时间。
输出：
t: 810632.687 i: 0 
t: 810632.687 i: 1 
t: 810632.687 i: 2 
输出的 t 相同，说明回调是在同一帧中执行的。
*/
function fps() {
  for (let i = 0; i < 3; i++) {
    requestAnimationFrame(t => {
      console.log('t:', t, 'i:', i, '\n');
    });
  }
}

// 测试二：验证是否会掉帧？
/*
结论：不会掉帧，它只会影响帧率。所以要想获得流畅的动画体验，在两帧之间不要做耗时操作。
*/
var frame = 10;
var lastTime = performance.now();
function loop() {
  var now = performance.now();
  var fps = 1000 / (now - lastTime);
  lastTime = now;
  console.log('fps:', fps);
  // 在一帧中执行开销较大的操作
  for(let i = 0; i < 10000; i++) {
    var div = document.createElement('div');
    div.innerHTML = 'div'+i;
    document.body.appendChild(div);
    div.parentNode.removeChild(div);
  }
  console.log('frame', frame);
  frame --;
  frame && requestAnimationFrame(loop);
}
requestAnimationFrame(loop);