JavaScriptイベントサイクル(Event Loop)

1、なぜ事件の循環があるのですか?
jsはシングルスレッドであるため、イベントサイクルはjsの実行メカニズムであり、jsの非同期化を実現する方法でもある.
jsが単一スレッドである以上、窓口が一つしかない銀行のように、お客様は一つの手続き業務に並ぶ必要があります.一つのタスクが長すぎると、後のタスクも待っていなければなりません.問題が来ました.もしニュースを見たいですが、ニュースに含まれている超清の画像のロードが遅いです.私達のウェブページは写真が完全に表示されるまでずっと押さえていますか?したがって、賢いプログラマはタスクを二つに分類します.

同期タスク

非同期タスク

私達がウェブサイトを開ける時、ウェブページのレンダリングの過程は多くの同期の任務で、たとえばページの骨格とページの要素のレンダリング.画像音楽をロードするなど資源を大量に消耗する任務は非同期です.
2、マクロタスクとマイクロタスク
JavaScriptでは、幅広い同期タスクと非同期タスクを除いて、より細かい定義があります.

macro-task(マクロタスク):含まれる script、setTimeout、setInterval・

micro-task:Promise、process.nextTick

異なるタイプのタスクは、SET Timeout、set Intervalなど、異なるイベントキューに入ります.Promiseは別のイベントキューに入ります.

                   。       ，  js       。      (   -       
         )，       ，          。          ，                 ，
         。 ：</code></pre> 
 <pre><code><script>
    setTimeout(function() {
        console.log('setTimeout');
    })

    new Promise(function(resolve) {
        console.log('promise');
    }).then(function() {
        console.log('then');
    })

    console.log('console');

    /* ----------------------------   start--------------------------------- */

    1、`<script>`              ，     。          
    2、  setTimeout，        Event table   ，        Event Queue 
    3、     new Promise、Promise，    ； then        Event Queue 。  : promise
    4、  console.log，    。  : console
    5、                ，                 ，     then  ，            。
  : then
    6、         
             。       ，                 ，            setTimeout       ，
     。                 ，                  ，    。           ；
  ：setTimeout

    /* ----------------------------   end--------------------------------- */

3、より複雑なコードを分析する

    console.log('1');

    setTimeout(function() {
        console.log('2');
        process.nextTick(function() {
            console.log('3');
        })
        new Promise(function(resolve) {
            console.log('4');
            resolve();
        }).then(function() {
            console.log('5')
        })
    })
    process.nextTick(function() {
        console.log('6');
    })
    new Promise(function(resolve) {
        console.log('7');
        resolve();
    }).then(function() {
        console.log('8')
    })

    setTimeout(function() {
        console.log('9');
        process.nextTick(function() {
            console.log('10');
        })
        new Promise(function(resolve) {
            console.log('11');
            resolve();
        }).then(function() {
            console.log('12')
        })
    })

一、一回目の事件循環

a)、                 ，          
b)、  console.log，    。  ：1
c)、  setTimeout，        Event table   ，             。       setTimeout1
d)、  process.nextTick，       Event table   ，              。  process1
e)、  new Promise、Promise，    ；then      Event table   ，              。  then1。
  : 7
f)、  setTimeout，        Event table   ，             。       setTimeout2</code></pre> 
 <p>              ，                 Event Queue   </p> 
 <table> 
  <thead> 
   <tr> 
    <th>-</th> 
    <th>       </th> 
    <th>       </th> 
   </tr> 
  </thead> 
  <tbody> 
   <tr> 
    <td>       </td> 
    <td>(      )</td> 
    <td>process1、then1</td> 
   </tr> 
   <tr> 
    <td>       (   )</td> 
    <td>setTimeout1</td> 
    <td> </td> 
   </tr> 
   <tr> 
    <td>       (   )</td> 
    <td>setTimeout2</td> 
    <td> </td> 
   </tr> 
  </tbody> 
 </table> 
 <p>                                  ，              ，    </p> 
 <pre><code>g)、  process1。  ：6
h)、  then1。  ：8</code></pre> 
 <p><strong>           ！</strong></p> 
 <hr> 
 <h3> 、       </h3> 
 <pre><code>a）、           setTimeout1  。  console.log，    。  : 2
b）、  process.nextTick，       Event table   ，              。  process2
c）、  new Promise，    ；then      Event table   ，              。  then2。  : 4</code></pre> 
 <p>              ，                 Event Queue   </p> 
 <table> 
  <thead> 
   <tr> 
    <th>-</th> 
    <th>       </th> 
    <th>       </th> 
   </tr> 
  </thead> 
  <tbody> 
   <tr> 
    <td>       (   )</td> 
    <td> </td> 
    <td> </td> 
   </tr> 
   <tr> 
    <td>       </td> 
    <td>(      )</td> 
    <td>process2、then2</td> 
   </tr> 
   <tr> 
    <td>       (   )</td> 
    <td>setTimeout2</td> 
    <td> </td> 
   </tr> 
  </tbody> 
 </table> 
 <p>                                  ，              ，    </p> 
 <pre><code>d)、  process2。  ：3
e)、  then2。  ：5</code></pre> 
 <p><strong>           ！</strong></p> 
 <hr> 
 <h3> 、       </h3> 
 <pre><code>a)、           setTimeout2  。  console.log，    。  : 9
d)、  process.nextTick，       Event table   ，              。  process3
c)、  new Promise，    ；then      Event table   ，              。  then3。  : 11</code></pre> 
 <p>              ，                 Event Queue   </p> 
 <table> 
  <thead> 
   <tr> 
    <th>-</th> 
    <th>       </th> 
    <th>       </th> 
   </tr> 
  </thead> 
  <tbody> 
   <tr> 
    <td>       (   )</td> 
    <td> </td> 
    <td> </td> 
   </tr> 
   <tr> 
    <td>       (   )</td> 
    <td> </td> 
    <td> </td> 
   </tr> 
   <tr> 
    <td>       (   )</td> 
    <td>(      )</td> 
    <td>process3、then3</td> 
   </tr> 
  </tbody> 
 </table> 
 <p>                                  ，              ，    </p> 
 <pre><code>d)、  process3。  ：10
e)、  then3。  ：12
</code></pre> 
 <h2>4、js      </h2> 
 <p>1）、js                 ，     <scirpt>  <br>2）、              ，            ，    ，        <br>3）、  render（       ，            ）<br>4）、      </p> 
 <h1>5、    </h1> 
 <p>https://juejin.im/post/59e85e...<br>https://segmentfault.com/a/11...</p> 
</div>
                            </div>
                        </div>
                    </div>
                    <!--PC WAP    -->
                    <div id="SOHUCS" sid="1177277623575834624"></div>
                    <script type="text/javascript" src="/views/front/js/chanyan.js">