字节面试题整理（其一）

浏览器重绘的时机

function demo() {
     
  const now = Date.now();
  document.body.style.backgroundColor = 'red';
  while(Date.now() - now <= 2000) {
      continue; }
  document.body.style.backgroundColor = 'blue';
}

由于当前宏队列的任务未完成时，背景变红的操作并不会被重绘，所以这边背景只会直接变蓝。

异步处理相加事件

function addAsync(a, b) {
     
  return new Promise((resolve, reject) => {
     
    resolve(a + b);
  })
}

const addSum = async (arrs) => {
     
  let asyns = [];
  while (arrs.length >= 2) {
     
    asyns.push(addAsync(arrs[0], arrs[1]));
    arrs.splice(0, 2);
  }
  arrs.length && asyns.push(arrs[0]);
  arrs = await Promise.all(asyns);
  if (arrs.length === 1) return arrs[0];
  else return addSum(arrs);
}

let arr = [];
for (let i = 1; i < 100; i++) arr.push(i);

addSum(arr).then(sum => console.log(sum));

面试官对此答案并不十分满意，Promise中还需添加竞速机制，新定义一个数组，在每个Promise的回调中去确认数组中的个数是否大于2，若大于2则继续自调，再定义一个计数器，记录正在执行的Promise个数，如果数组中的个数为1，且Promise全部执行完毕，则返回结果。

requestAnimationFrame与setTimeout

requestAnimationFrame

HTML5新增的api，类似于setTimeout定时器。window对象的一个方法window.requestAnimationFrame 浏览器（所以只能在浏览器中使用）专门为动画提供API，让dom动画，canvas动画。svg动画。webGL动画等有一个统一的刷新机制。
特点：
1.按帧对网页进行重绘。该方法告诉浏览器希望执行动画并请求浏览器在下一次重绘之前调用就掉函数更新动画。
2.由系统来决定回调函数的执行机制。在运行时浏览器会自动优化方法的调用。
3.显示器有固定的刷新频率（60Hz 或 75Hz），也就是说，每秒最多只能重绘60 次或 75 次，requestAnimationFrame 的基本思想让页面重绘的频率与这个刷新频率保持同步比如显示器屏幕刷新率为 60Hz，使用 requestAnimationFrame API，那么回调函数就每 1000ms / 60 ≈ 16.7ms 执行一次；如果显示器屏幕的刷新率为 75Hz，那么回调函数就每 1000ms / 75 ≈ 13.3ms 执行一次。
4.通过 requestAnimationFrame 调用回调函数引起的页面重绘或回流的时间间隔和显示器的刷新时间间隔相同。所以 requestAnimationFrame 不需要像setTimeout 那样传递时间间隔，而是浏览器通过系统获取并使用显示器刷新频率。

setTimeout

通过设置一个间隔时间不断改变图像，达到动画效果。该方法在一些低端机上会出现卡顿、抖动现象。这种现象一般有两个原因：
1.setTimeout 的执行时间并不是确定的。刷新频率受屏幕分辨率和屏幕尺寸影响，不同设备的屏幕刷新率可能不同，
2.setTimeout 只能设置固定的时间间隔，这个时间和屏幕刷新间隔可能不同。
以上两种情况都会导致 setTimeout 的执行步调和屏幕的刷新步调不一致，从而引起丢帧现象。使用 requestAnimationFrame 执行动画，最大优势是能保证回调函数在屏幕每一次刷新间隔中只被执行一次，这样就不会引起丢帧，动画也就不会卡顿。

setTimeout 与 requestAnimationFrame 的区别

• 引擎层面：setTimeout 属于 JS 引擎，存在事件轮询，存在事件队列。
  requestAnimationFrame 属于 GUI 引擎，发生在渲染过程的中重绘重排部分，与电脑分辨路保持一致。
• 性能层面：当页面被隐藏或最小化时，定时器 setTimeout 仍在后台执行动画任务。
  当页面处于未激活的状态下，该页面的屏幕刷新任务会被系统暂停，requestAnimationFrame 也会停止。
• 应用层面：利用 setTimeout，这种定时机制去做动画，模拟固定时间刷新页面。
  requestAnimationFrame 由浏览器专门为动画提供的 API，在运行时浏览器会自动优化方法的调用，在特定性环境下可以有效节省了CPU 开销。