Vue nextTickの原理の分析

イベントループ

イベントループは、イベントループとして翻訳されます。イベントループには、1 つ以上のタスクキューが含まれます。継続スレッドは、キューから最も早いタスクを取り出して実行します。取り出されたタスクは、macroTask と呼ばれます。各 macroTask にはタスクソースがあります。各 macroTask が処理された後、次に早い macroTask がキューから取り出され、再実行されます。

タスクソース:

「」
    1. スクリプト
    2. イベント 3. DOM の相互作用 4. I/O
    5. UIレンダリング
    6.タイムアウトを設定する
    7. 間隔を設定する
    8. アニメーションフレームをリクエストする
    .....
「」

つまり、上記のような状況が発生すると、macroTask が生成され、キューにプッシュされます。

miscroTask (マイクロタスク)

各マクロタスクを実行した後、メインスレッドはマクロタスクの下のマイクロタスクが空かどうかを確認します。空でない場合は、早いものから遅いものへと時系列順に取り出されます。途中で新しいマイクロタスクに遭遇した場合は、マイクロタスクをマイクロタスクキューにプッシュし続けます。

UI レンダリング (重要なポイント)

miscroTask キューがクリアされると、メインスレッドは UI Render を実行します。つまり、インターフェイスをレンダリングします。ただし、ブラウザは UI Render タスクで毎回インターフェイスをレンダリングするとは限りません。状況によって異なります。現在主流のブラウザは、一般的に 60HZ、つまり 16.7ms のリフレッシュレートでレンダリングします (正確な推定値ではありません)。macroTask は通常 16.7ms 未満であるため、ブラウザは毎回状況に応じてレンダリングします。

次のサイクルをまとめる

1. マクロタスクキューから最も早く追加されたタスクを取り出す
2. タスクの実行を開始します。プロセス中に新しい macroTask が検出されると、macroTask キューの最後に追加されます。
3. マクロタスクを実行した後、イベントループはマイクロタスクキューを探します。
4. 同様に、途中で新しい microTask に遭遇した場合、それは macroTask の下の microTask キューの最後に配置されます。
5. microTaskを実行した後、UI Render macroTaskが実行されます。
6. ブラウザは現在の状況に基づいてDOMを更新するかどうかを決定します。通常は60Hzの頻度で行われます。
7. この時点でイベントループは終了する

次のチェック

nextTickの分析を開始します

上の図によると、nextTick を書く方法はいくつかあります。

    1. this.$nextTick(cb)
    2. this.$nextTick().then(cb)

すべてのcbはコールバック配列に入れられ、1回限りの呼び出しを待ちます。上の図では、コールバックが主にtimerFunc関数によって呼び出されていることがわかります。以下でこの関数に注目してみましょう。まず、ソースコードを見てみましょう。

timerFuncは状況に応じて異なる割り当てを持つことがわかります。

まず、ブラウザが promise 属性をサポートしているかどうかを判断します。サポートしている場合は、timerFunc が Promise に割り当てられます。ここで小さな問題があります。つまり、iOS では、Promise オブジェクトがあり、microTask キューにプッシュされますが、キューは更新されません。このとき、microTask キューを強制的に更新するには、macroTask を追加する必要があります。

MutationObserver、このAPIを知らない人も多いと思いますが、これはDOMの変更を監視できるAPIで、microTaskに属し、Promiseよりも優先度が低いです。新しいテキストノードを作成した後、手動でテキストノードを変更してmicroTaskをトリガーします。

ここで小さな問題があります:

テキストノードが正常にレンダリングされた場合、他の DOM レンダリングも成功することを意味しますか?

これは代替ソリューションであり、主にマイクロタスクであるため、DOMを監視するためではなく使用されます。

すべてのマイクロタスクが失敗した後、次善の策は setImmediate を選択することです。これは、高バージョンの IE および Edge ブラウザにのみ搭載されている可能性のある API です。主に大量のデータを計算するときに使用されます。

最後に、setTimeout

これを読んで、何か疑問はありましたか?

上記のコードは、DOM の更新をリッスンした後に nextTick が実行されることを示していませんか?何だって？？？その瞬間、頭が真っ白になった。

次に最も重要なのは

DOM ツリーはリアルタイムで更新されます。 DOM ツリーはリアルタイムで更新されます。 DOM ツリーはリアルタイムで更新されます。これを 3 回繰り返します。これは、DOM の更新を監視する必要がないことを意味します。 DOM に対する操作はリアルタイムのフィードバックを得ることができます。前のコード行で DOM を操作し、次の行でそれを取得します。

すると、nextTick はいったい何をするのだろうと混乱する人もいるでしょう。

nextTick の役割は、キューからコレクション Watcher を 1 つずつ取り出し、データを変更して DOM を一度にレンダリングすることです。DOM を操作するコストが高いことはわかっています。ブラウザーが Web ページを開くと、スレッドで構成されるプロセスが開始されます。

1. GUIレンダリングスレッド
2. js エンジンスレッド (メインスレッド)
3. EventLoop トレーニングスレッド
4. ネットワークなどのその他のスレッド

クロススレッド操作はコストがかかるため、DOM を一度にレンダリングすると、パフォーマンスを効果的に最適化できます。！