JS同期および非同期

       Java Scriptの最大の特徴は、シングルスレッドであることです 。シングルスレッドとは、同時に実行できるのは1つだけであることを意味します。たとえば、DOMでは、要素を追加または削除するには、追加してから削除することしかできません。それら、同時にではありません。シングルスレッドとは、すべてのタスクをキューに入れる必要があり、前のタスクは次のタスクの前にのみ実行できることを意味します。これにより、コードが長すぎる場合、ページレンダリングの一貫性が失われたり、レンダリングや読み込みのブロックなどが発生したりする可能性があります。

この問題を解決するために、HTML5はJava Scriptが複数のスレッドを作成できるようにするwebworker標準を提案しました。これにより、同期非同期が実現します。


同期:

コードを順番に実行し、前のタスクが終了してから次のタスクを実行します。プログラムの実行シーケンスは、コードの書き込みシーケンスと同じです。

非同期:

一つのことをするのに時間がかかる場合は、最初に他のことに対処することができます。たとえば、料理をするときは、水を沸騰させたときに野菜を切ることができ、水が沸騰するのを待つ必要はありません。野菜を切る。

たとえば、このコードでは次のようになります。

 <script>
        window.setTimeout(function(){
               console.log(1);
        },2000)
        console.log(2);
    </script>

通常の同期の考え方では、1が最初に出力され、次に2が順次出力されると考えられますが、実際には、2が最初に出力され、次に1が出力されます。これはタイマーが発生したためです。コードを順次実行する場合、待ち時間が比較的長いため、最初に次のコードを実行し、最後にタイマーコールバック関数のコードを実行することで、プログラムの実行効率を大幅に向上させます。


同期および非同期のタスク実行プロセス:

同期タスク:同期タスクはメインスレッドで実行され、メインスレッド実行スタックを形成します

非同期タスク:非同期タスクは通常、コールバック関数を介して実装されます。非同期タスクには通常、クリック、マウスオーバー、フォーカスなどのタイプと、タイマーsetTimeout、setIntervalなどがあり、非同期タスクは関連するコールバック関数をに追加します。タスクキュー.medium(またはメッセージキュー)


したがって、今の場合は次の図のように簡単に理解できます。コードは最初に同期的に実行されます。コールバック関数に遭遇した後、コールバック関数はタスクキューに入れられ、次にタスクがスキップされ、次のコードが最初に実行されます。 、メインスレッドがスタックを実行するのを待っています。すべての同期タスクが実行されたら、タスクキューに移動して、実行する未実行のコールバック関数を見つけます。この抽象化を使用して、メインスレッド実行スタックをメインレーンとして抽象化できます。タスクキューは緊急レーンとして、コールバックは途中で壊れた車として機能します。メインレーンを離れても通常の交通には影響せず、タスクキューで車両を修理するのを待ってから、結局緊急レーンから幹線道路まで運転します。メインレーンの車両が出発しました。


複数のコールバック関数を使用したタスク実行プロセス:

複数のコールバック関数がある場合、タスクキューで最初に実行されるコールバック関数が問題になります。この場合、非同期プロセス処理が必要になります。

 <script>
       document.addEventListener('click',function(){
           console.log(1);
       })
        window.setTimeout(function(){
               console.log(2);
        },2000)
    </script>

たとえば、プログラムはこのコードをどのように実行しますか?実際、コールバック関数がタスクキューに渡される前に、非同期プロセスによって処理されます。トリガーされた場合にのみ、タスクキューに入れられます。クリックすると、そのコールバック関数がタスクキューに入れられます。クリックしないと、タスクキューに入れられません。もう1つの例は、2番目のタイマーです。2秒が経過すると、そのコールバック関数がタスクキューに入れられます。

 メインスレッドは終了後、常にタスクリストに移動して新しいコールバック関数タスクを取得し、実行してから取得し、再度実行します。この段階をイベントループイベントループと呼びます。

おすすめ

転載: blog.csdn.net/weixin_52212950/article/details/123429594