JavaScript フレームワークを作成する: setTimeout よりも優れたタイミングで実行-jsチュートリアル-php.cn

これは JavaScript フレームワークシリーズの第 2 章です。この章では、ブラウザーで非同期コードを実行するさまざまな方法について説明する予定です。 setTimeout や Promises など、タイマーとイベントループのさまざまな違いについて学びます。

このシリーズは、NX と呼ばれるオープンソースクライアントフレームワークについてです。このシリーズでは、このフレームワークを作成する際に克服しなければならなかった主な困難について主に説明します。 NX に興味がある場合は、当社のホームページをご覧ください。

このシリーズには次の章が含まれています:

プロジェクト構造

スケジュールされた実行 (現在の章)

サンドボックスコード評価

データバインディングの概要

データバインディングと ES6 プロキシ

カスタム要素

顧客エンドルーティング

非同期コード実行

コードを非同期に実行する方法である Promise、process.nextTick()、setTimeout()、そしておそらく requestAnimationFrame() についてはよくご存知かもしれません。どちらも内部でイベントループを使用しますが、正確なタイミングにはいくつかの違いがあります。

この章では、それらの違いを説明し、NX のような高度なフレームワークでタイミングシステムを実装する方法を示します。車輪を再発明するのではなく、ネイティブイベントループを使用して目標を達成します。

イベントループ

イベントループは ES6 仕様にも記載されていません。 JavaScript 自体にはタスク (ジョブ) とタスクキュー (ジョブキュー) しかありません。より複雑なイベントループは、NodeJS と HTML5 の仕様でそれぞれ定義されています。この記事ではフロントエンドについて説明します。

イベントループは、ある条件のループとして見ることができます。実行する新しいタスクを常に探しています。このループ内の反復はティックと呼ばれます。ティック中に実行されるコードはタスクと呼ばれます。

while (eventLoop.waitForTask()) {   
  eventLoop.processNextTask() 
}

ログイン後にコピー

タスクは、ループ内の他のタスクをスケジュールする同期コードです。新しいタスクを呼び出す簡単な方法は、setTimeout(taskFn) です。いずれにせよ、タスクはユーザーイベント、ネットワーク、DOM 操作など、さまざまなソースから取得される可能性があります

JavaScript フレームワークを作成する: setTimeout よりも優れたタイミングで実行

タスクキュー

物事をさらに複雑にするために、イベントループには複数のタスクキューを含めることができます。ここには 2 つの制約があります。同じタスクソースからのイベントは同じキューに存在する必要があり、タスクは挿入された順序で処理される必要があります。それ以外は、ブラウザーはやりたいことは何でもできます。たとえば、次にどのタスクキューを処理するかを決定できます。

while (eventLoop.waitForTask()) {   
  const taskQueue = eventLoop.selectTaskQueue() 
  if (taskQueue.hasNextTask()) { 
    taskQueue.processNextTask() 
  } 
}

ログイン後にコピー

このモデルではタイミングを正確に制御することができません。 setTimeout() を使用すると、ブラウザはキューを実行する前に他のいくつかのキューを実行することを決定する場合があります。

JavaScript フレームワークを作成する: setTimeout よりも優れたタイミングで実行

マイクロタスクキュー

幸いなことに、イベントループはマイクロタスクキューと呼ばれる単一のキューも提供します。現在のタスクが終了すると、マイクロタスクキューはティックごとにタスクをクリアします。

while (eventLoop.waitForTask()) {   
  const taskQueue = eventLoop.selectTaskQueue() 
  if (taskQueue.hasNextTask()) { 
    taskQueue.processNextTask() 
  } 
  const microtaskQueue = eventLoop.microTaskQueue 
  while (microtaskQueue.hasNextMicrotask()) { 
    microtaskQueue.processNextMicrotask() 
  } 
}

ログイン後にコピー

マイクロタスクを呼び出す最も簡単な方法は、Promise.resolve().then(microtaskFn) です。マイクロタスクは挿入順に処理され、マイクロタスクキューは 1 つだけであるため、ブラウザがタイミングを狂わせることはありません。

さらに、マイクロタスクは、同じキューに挿入され、同じティック内で処理される新しいマイクロタスクをスケジュールできます。

JavaScript フレームワークを作成する: setTimeout よりも優れたタイミングで実行

描画レンダリング

最後のステップは、レンダリングのスケジュール設定です。イベント処理や分解とは異なり、レンダリングは別のバックグラウンドタスクで完了しません。これは、各ループティックの最後に実行できるアルゴリズムです。

ここではブラウザーには大きな自由があります。各タスクの後に描画することもありますが、何百ものタスクが実行された後に描画しないこともあります。

幸いなことに、次の描画の前に渡された関数を実行する requestAnimationFrame() があります。最終的なイベントモデルは次のようになります:

while (eventLoop.waitForTask()) {   
  const taskQueue = eventLoop.selectTaskQueue() 
  if (taskQueue.hasNextTask()) { 
    taskQueue.processNextTask() 
  } 
  const microtaskQueue = eventLoop.microTaskQueue 
  while (microtaskQueue.hasNextMicrotask()) { 
    microtaskQueue.processNextMicrotask() 
  } 
  if (shouldRender()) { 
    applyScrollResizeAndCSS() 
    runAnimationFrames() 
    render() 
  } 
}

ログイン後にコピー

既知のことを使用してタイミングシステムを作成します!

イベントループを利用します

最新のフレームワークと同様、NX は DOM 操作とデータバインディングに基づいています。バッチ操作と非同期実行によりパフォーマンスが向上します。上記の理由から、Promises、MutationObservers、requestAnimationFrame() を使用します。

期待されるタイマーは次のとおりです:

コードは開発者から提供されます

データバインディングとDOM操作はNXによって実行されます

開発者定義のイベントフック

ブラウザが描画します

ステップ1

NX登録オブジェクトが実行されますES6 プロキシに基づいて同期的に実行され、MutationObserver に基づいて DOM が変更されます (詳細は次のセクションで説明します)。ステップ 2 が実行されるまで、マイクロタスクの遅延として機能します。この遅延には Promise.resolve().then(reaction) でオブジェクト変換があり、変更オブザーバーを通じて自動的に実行されます。

ステップ2

開発者からのコード(タスク)が完成しました。マイクロタスクは NX によって登録され、実行が開始されます。これらはマイクロタスクであるため、順番に実行されます。私たちはまだ同じループの中にいることに注意してください。

步骤 3

开发者通过 requestAnimationFrame(hook) 通知 NX 运行钩子。这可能在滴答循环后发生。重要的是，钩子运行在下一次绘制之前和所有数据操作之后，并且 DOM 和 CSS 改变都已经完成。

步骤 4

浏览器绘制下一个视图。这也有可能发生在滴答循环之后，但是绝对不会发生在一个滴答的步骤 3 之前。

牢记在心里的事情

我们在原生的事件循环之上实现了一个简单而有效的定时系统。理论上讲它运行的很好，但是还是很脆弱，一个轻微的错误可能会导致很严重的 BUG。

在一个复杂的系统当中，最重要的就是建立一定的规则并在以后保持它们。在 NX 中有以下规则：

永远不用 setTimeout(fn, 0) 来进行内部操作

用相同的方法来注册微任务

微任务仅供内部操作

不要干预开发者钩子运行时间

规则 1 和 2

数据反射和 DOM 操作将按照操作顺序执行。这样只要不混合就可以很好的延迟它们的执行。混合执行会出现莫名其妙的问题。

setTimeout(fn, 0) 的行为完全不可预测。使用不同的方法注册微任务也会发生混乱。例如，下面的例子中 microtask2 不会正确地在 microtask1 之前运行。

Promise.resolve().then().then(microtask1)   
Promise.resolve().then(microtask2)

ログイン後にコピー

JavaScript フレームワークを作成する: setTimeout よりも優れたタイミングで実行

分离开发者的代码执行和内部操作的时间窗口是非常重要的。混合这两种行为会导致不可预测的事情发生，并且它会需要开发者了解框架内部。我想很多前台开发者已经有过类似经历。