ブラウザの再描画のタイミング

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より大きいかどうかが確認されます。定義実行中のPromisesの数を記録するカウンター。配列内の数が1で、Promisesがすべて実行された場合、結果が返されます。

requestAnimationFrame与セットタイムアウト

requestAnimationFrame

setTimeoutタイマーに似たHTML5の新しいAPI。ウィンドウオブジェクトwindow.requestAnimationFrameブラウザーのメソッド（ブラウザーでのみ使用できるため）は、アニメーション専用のAPIを提供し、domアニメーションとキャンバスアニメーションを可能にします。svgアニメーション。webGLアニメーションには統一された更新メカニズムがあります。
機能：
1。フレームごとにWebページを再描画します。このメソッドは、アニメーションを実行することをブラウザに通知し、次の再描画の前にアニメーションを更新するためにドロップオフ関数を呼び出すようにブラウザに要求します。
2.システムがコールバック関数の実行メカニズムを決定します。ブラウザは、実行時にメソッド呼び出しを自動的に最適化します。
3.ディスプレイのリフレッシュレートは固定されています（60Hzまたは75Hz）。つまり、再描画できるのは1秒あたり最大60回または75回のみです。requestAnimationFrameの基本的な考え方は、ページの再描画の頻度をこの更新と同期させます。モニター画面などのレート。リフレッシュレートは60Hzです。requestAnimationFrameAPIを使用すると、コールバック関数は1000ms/60≈16.7msごとに実行されます。表示画面のリフレッシュレートが75Hzの場合、コールバック関数は1000ms /ごとに実行されます。 75≈13.3ms。
4. requestAnimationFrameを介してコールバック関数を呼び出すことによって発生するページの再描画またはリフローの時間間隔は、表示の更新時間間隔と同じです。したがって、requestAnimationFrameはsetTimeoutのように時間間隔を渡す必要はありませんが、ブラウザーはシステムを介して表示のリフレッシュレートを取得して使用します。

setTimeout

アニメーション効果を実現するために間隔時間を設定して、画像を継続的に変更します。この方法は、一部のローエンドマシンではスタックしてジッターが発生するように見えます。この現象には、一般に2つの理由があります
。1。setTimeoutの実行時間は不明です。リフレッシュレートは、画面の解像度と画面サイズの影響を受けます。デバイスによって画面のリフレッシュレートが異なる場合があります
。2.setTimeoutは、固定の時間間隔のみを設定できます。この時間と画面のリフレッシュ間隔は異なる場合があります。
上記の2つの状況では、setTimeoutの実行ペースと画面の更新ペースに一貫性がなくなり、フレームドロップが発生します。requestAnimationFrameを使用してアニメーションを実行する最大の利点は、コールバック関数が画面の各更新間隔で1回だけ実行されるようにすることです。これにより、フレームが失われたり、アニメーションがフリーズしたりすることはありません。

setTimeoutとrequestAnimationFrameの違い

エンジンレベル：setTimeoutはJSエンジンに属し、イベントポーリングとイベントキューがあります。
requestAnimationFrameはGUIエンジンに属しており、レンダリングプロセスの再描画と再配置の部分で発生します。これは、コンピューターの解像度と一致しています。
パフォーマンスレベル：ページが非表示または最小化されている場合、タイマーsetTimeoutは引き続きバックグラウンドでアニメーションタスクを実行しています。
ページが非アクティブ状態の場合、ページの画面更新タスクはシステムによって一時停止され、requestAnimationFrameも停止します。
アプリケーションレベル：アニメーションを実行するためのこのタイミングメカニズムであるsetTimeoutを使用して、一定の時間にページを更新することをシミュレートします。
requestAnimationFrameは、特にアニメーション用にブラウザーによって提供されるAPIです。ブラウザーは、実行時にメソッドの呼び出しを自動的に最適化し、特定の環境でCPUオーバーヘッドを効果的に節約できます。

バイト面接の質問の整理（パート1）