av激情亚洲男人的天堂国语,日韩欧美精品一中文字幕,无码av一区二区三区无码,国产又色又爽又刺激的a片,国产又色又爽又刺激的a片

前端進階之JS運行原理和機制詳解

前言

之前我們一直說要介紹下前端的知識點，一直沒空總結(jié)，這不來了;

創(chuàng)新互聯(lián)主要從事成都網(wǎng)站設(shè)計、做網(wǎng)站、網(wǎng)頁設(shè)計、企業(yè)做網(wǎng)站、公司建網(wǎng)站等業(yè)務(wù)。立足成都服務(wù)堆龍德慶,十年網(wǎng)站建設(shè)經(jīng)驗,價格優(yōu)惠、服務(wù)專業(yè),歡迎來電咨詢建站服務(wù):18980820575

js運行機制，來一篇總結(jié)

一、js的基礎(chǔ)知識點介紹

  • js作為瀏覽器腳本語言，它的主要用途是與用戶互動，以及操作DOM，因此js是單線程，也避免了同時操作同一個DOM的矛盾問題;
  • 為了利用多核CPU的計算能力，H5的Web Worker實現(xiàn)的“多線程”實際上指的是“多子線程”，完全受控于主線程，且不允許操作DOM;
  • js引擎存在monitoring process進程，會持續(xù)不斷的檢查主線程執(zhí)行棧是否為空，一旦為空，就會去Event Queue那里檢查是否有等待被調(diào)用的函數(shù)。這個過程是循環(huán)不斷的，所以整個的這種運行機制又稱為Event Loop(事件循環(huán));
  • 所有同步任務(wù)都在主線程上執(zhí)行，形成一個執(zhí)行棧(execution context stack);
  • 如果在微任務(wù)執(zhí)行期間微任務(wù)隊列加入了新的微任務(wù)，會將新的微任務(wù)加入隊列尾部，之后也會被執(zhí)行;

二、相關(guān)概念

1、JS為什么是單線程的?

  • JavaScript語言的一大特點就是單線程，也就是說，同一個時間只能做一件事。那么，為什么JavaScript不能有多個線程呢?這樣能提高效率啊。
  • JavaScript的單線程，與它的用途有關(guān)。作為瀏覽器腳本語言，JavaScript的主要用途是與用戶互動，以及操作DOM。這決定了它只能是單線程，否則會帶來很復雜的同步問題。比如，假定JavaScript同時有兩個線程，一個線程在某個DOM節(jié)點上添加內(nèi)容，另一個線程刪除了這個節(jié)點，這時瀏覽器應(yīng)該以哪個線程為準?
  • 所以，為了避免復雜性，從一誕生，JavaScript就是單線程，這已經(jīng)成了這門語言的核心特征，將來也不會改變;
  • 為了利用多核CPU的計算能力，HTML5提出Web Worker標準，允許JavaScript腳本創(chuàng)建多個線程，但是子線程完全受主線程控制，且不得操作DOM。所以，這個新標準并沒有改變JavaScript單線程的本質(zhì);

2、JS為什么需要異步?

如果JS中不存在異步，只能自上而下執(zhí)行，如果上一行解析時間很長，那么下面的代碼就會被阻塞。對于用戶而言，阻塞就意味著"卡死"，這樣就導致了很差的用戶體驗;

3、JS單線程又是如何實現(xiàn)異步的呢?

既然JS是單線程的，只能在一條線程上執(zhí)行，又是如何實現(xiàn)的異步呢?

是通過的事件循環(huán)(event loop)，理解了event loop機制，就理解了JS的執(zhí)行機制。

4、任務(wù)隊列

  • "任務(wù)隊列"是一個事件的隊列(也可以理解成消息的隊列)，IO設(shè)備完成一項任務(wù)，就在"任務(wù)隊列"中添加一個事件，表示相關(guān)的異步任務(wù)可以進入"執(zhí)行棧"了。主線程讀取"任務(wù)隊列"，就是讀取里面有哪些事件;
  • "任務(wù)隊列"中的事件，除了IO設(shè)備的事件以外，還包括一些用戶產(chǎn)生的事件(比如鼠標點擊、頁面滾動等等)。只要指定過回調(diào)函數(shù)，這些事件發(fā)生時就會進入"任務(wù)隊列"，等待主線程讀取。
  • 所謂"回調(diào)函數(shù)"(callback)，就是那些會被主線程掛起來的代碼。異步任務(wù)必須指定回調(diào)函數(shù)，當主線程開始執(zhí)行異步任務(wù)，就是執(zhí)行對應(yīng)的回調(diào)函數(shù);
  • "任務(wù)隊列"是一個先進先出的數(shù)據(jù)結(jié)構(gòu)，排在前面的事件，優(yōu)先被主線程讀取。主線程的讀取過程基本上是自動的，只要執(zhí)行棧一清空，"任務(wù)隊列"上第一位的事件就自動進入主線程。但是，由于存在后文提到的"定時器"功能，主線程首先要檢查一下執(zhí)行時間，某些事件只有到了規(guī)定的時間，才能返回主線程。
  • 讀取到一個異步任務(wù)，首先是將異步任務(wù)放進事件表格(Event table)中，當放進事件表格中的異步任務(wù)完成某種事情或者說達成某些條件(如setTimeout事件到了，鼠標點擊了，數(shù)據(jù)文件獲取到了)之后，才將這些異步任務(wù)推入事件隊列(Event Queue)中，這時候的異步任務(wù)才是執(zhí)行棧中空閑的時候才能讀取到的異步任務(wù);

5、Event Loop

  • 主線程從"任務(wù)隊列"中讀取事件，這個過程是循環(huán)不斷的，所以整個的這種運行機制又稱為Event Loop(事件循環(huán));
  • Event Loop是javascript的執(zhí)行機制

6、setTimeout(fn,0)

  • setTimeout(fn,0)的含義是，指定某個任務(wù)在主線程最早可得的空閑時間執(zhí)行，也就是說，盡可能早得執(zhí)行。它在"任務(wù)隊列"的尾部添加一個事件，因此要等到同步任務(wù)和"任務(wù)隊列"現(xiàn)有的事件都處理完，才會得到執(zhí)行。
  • HTML5標準規(guī)定了setTimeout()的第二個參數(shù)的最小值(最短間隔)，不得低于4毫秒，如果低于這個值，就會自動增加。在此之前，老版本的瀏覽器都將最短間隔設(shè)為10毫秒。另外，對于那些DOM的變動(尤其是涉及頁面重新渲染的部分)，通常不會立即執(zhí)行，而是每16毫秒執(zhí)行一次。這時使用requestAnimationFrame()的效果要好于setTimeout()。
  • 需要注意的是，setTimeout()只是將事件插入了"任務(wù)隊列"，必須等到當前代碼(執(zhí)行棧)執(zhí)行完，主線程才會去執(zhí)行它指定的回調(diào)函數(shù)。要是當前代碼耗時很長，有可能要等很久，所以并沒有辦法保證，回調(diào)函數(shù)一定會在setTimeout()指定的時間執(zhí)行

三、js執(zhí)行機制介紹

1、javascript的同步和異步

  • 單線程就意味著，所有任務(wù)需要排隊，前一個任務(wù)結(jié)束，才會執(zhí)行后一個任務(wù)。如果前一個任務(wù)耗時很長，后一個任務(wù)就不得不一直等著。
  • 如果排隊是因為計算量大，CPU忙不過來，倒也算了，但是很多時候CPU是閑著的，因為IO設(shè)備(輸入輸出設(shè)備)很慢(比如Ajax操作從網(wǎng)絡(luò)讀取數(shù)據(jù))，不得不等著結(jié)果出來，再往下執(zhí)行。
  • JavaScript語言的設(shè)計者意識到，這時主線程完全可以不管IO設(shè)備，掛起處于等待中的任務(wù)，先運行排在后面的任務(wù)。等到IO設(shè)備返回了結(jié)果，再回過頭，把掛起的任務(wù)繼續(xù)執(zhí)行下去。
  • 于是，所有任務(wù)可以分成兩種，一種是同步任務(wù)(synchronous)，另一種是異步任務(wù)(asynchronous)。同步任務(wù)指的是，在主線程上排隊執(zhí)行的任務(wù)，只有前一個任務(wù)執(zhí)行完畢，才能執(zhí)行后一個任務(wù);異步任務(wù)指的是，不進入主線程、而進入"任務(wù)隊列"(task queue)的任務(wù)，只有"任務(wù)隊列"通知主線程，某個異步任務(wù)可以執(zhí)行了，該任務(wù)才會進入主線程執(zhí)行。

  • 同步和異步任務(wù)分別進入不同的執(zhí)行"場所"，同步的進入主線程，異步的進入Event Table并注冊函數(shù)。
  • 當Event Table中指定的事情完成時，會將這個函數(shù)移入Event Queue。
  • 主線程內(nèi)的任務(wù)執(zhí)行完畢為空，會去Event Queue讀取對應(yīng)的函數(shù)，進入主線程執(zhí)行。
  • 上述過程會不斷重復，也就是常說的Event Loop(事件循環(huán))。
  • 我們不禁要問了，那怎么知道主線程執(zhí)行棧為空啊?js引擎存在monitoring process進程，會持續(xù)不斷的檢查主線程執(zhí)行棧是否為空，一旦為空，就會去Event Queue那里檢查是否有等待被調(diào)用的函數(shù);

2、JavaScript的宏任務(wù)與微任務(wù)

你是否覺得同步異步的執(zhí)行機制流程就是JavaScript執(zhí)行機制的全部?不是的，JavaScript除了廣義上的的同步任務(wù)何異步任務(wù)，其對任務(wù)還有更精細的定義：

  • macro-task(宏任務(wù))：包括整體代碼script，setTimeout，setInterval
  • micro-task(微任務(wù))：Promise，process.nextTick

不同類型的任務(wù)會進入對應(yīng)的Event Queue。

事件循環(huán)的順序，決定js代碼的執(zhí)行順序。進入整體代碼(宏任務(wù))后，開始第一次循環(huán)。接著執(zhí)行所有的微任務(wù)。然后再次從宏任務(wù)開始，找到其中一個任務(wù)隊列執(zhí)行完畢，再執(zhí)行所有的微任務(wù)。

3、實例來說明JavaScript的執(zhí)行機制

3.1、同步

 
 
 
 
    
  
  
  
  
  1. console.log(1); 
    2.   
  
  
  
  2. console.log(2); 
    3.   
  
  
  
  3. console.log(3); 
    4.   
  
  
  
  4. /* 
    5.   
  
  
  
  5.     執(zhí)行結(jié)果：1、2、3 
    6.   
  
  
  
  6.     同步任務(wù)，按照順序一步一步執(zhí)行 
    7.   
  
  
  
  7. */ 
    8.

3.2、同步和異步

 
 
 
 
    
  
  
  
  
  1. console.log(1); 
    2.   
  
  
  
  2. setTimeout(function() { 
    3.   
  
  
  
  3.     console.log(2); 
    4.   
  
  
  
  4. },1000) 
    5.   
  
  
  
  5. console.log(3); 
    6.   
  
  
  
  6. /* 
    7.   
  
  
  
  7.     執(zhí)行結(jié)果：1、3、2 
    8.   
  
  
  
  8.     同步任務(wù)，按照順序一步一步執(zhí)行 
    9.   
  
  
  
  9.     異步任務(wù)，放入消息隊列中，等待同步任務(wù)執(zhí)行結(jié)束，讀取消息隊列執(zhí)行 
    10.   
  
  
  
  10. */ 
    11.

3.3、異步任務(wù)進一步分析

 
 
 
 
    
  
  
  
  
  1. console.log(1); 
    2.   
  
  
  
  2. setTimeout(function() { 
    3.   
  
  
  
  3.     console.log(2); 
    4.   
  
  
  
  4. },1000) 
    5.   
  
  
  
  5. setTimeout(function() { 
    6.   
  
  
  
  6.     console.log(3); 
    7.   
  
  
  
  7. },0) 
    8.   
  
  
  
  8. console.log(4); 
    9.   
  
  
  
  9. /* 
    10.   
  
  
  
  10.     猜測是：1、4、2、3   但實際上是：1、4、3、2 
    11.   
  
  
  
  11.     分析： 
    12.   
  
  
  
  12.         同步任務(wù)，按照順序一步一步執(zhí)行 
    13.   
  
  
  
  13.         異步任務(wù)，當讀取到異步任務(wù)的時候，將異步任務(wù)放置到Event table（事件表格） 
    14.   
  
  
  
  14. 中，當滿足某種條件或者說指定事情完成了（這里的是時間分別是達到了0ms和1000ms）當指定 
    15.   
  
  
  
  15. 事件完成了才從Event table中注冊到Event Queue（事件隊列），當同步事件完成了，便從 
    16.   
  
  
  
  16. Event Queue中讀取事件執(zhí)行。（因為3的事情先完成了，所以先從Event table中注冊到 
    17.   
  
  
  
  17. Event Queue中，所以先執(zhí)行的是3而不是在前面的2） 
    18.   
  
  
  
  18. */ 
    19.

3.4、宏任務(wù)和微任務(wù)

 
 
 
 
    
  
  
  
  
  1. console.log(1); 
    2.   
  
  
  
  2. setTimeout(function() { 
    3.   
  
  
  
  3.     console.log(2) 
    4.   
  
  
  
  4. },1000); 
    5.   
  
  
  
  5. new Promise(function(resolve) { 
    6.   
  
  
  
  6.     console.log(3); 
    7.   
  
  
  
  7.     resolve(); 
    8.   
  
  
  
  8. } 
    9.   
  
  
  
  9. ).then(function() { 
    10.   
  
  
  
  10.     console.log(4) 
    11.   
  
  
  
  11. }); 
    12.   
  
  
  
  12. console.log(5); 
    13.   
  
  
  
  13. /* 
    14.   
  
  
  
  14.     以同步異步的方式來判斷的結(jié)果應(yīng)該是：1、3、5、2、4 
    15.   
  
  
  
  15.     但是事實上結(jié)果是：1、3、5、4、2 
    16.   
  
  
  
  16.     為什么是這樣呢？因為以同步異步的方式來解釋執(zhí)行機制是不準確的，更加準確的方式是宏任務(wù)和微任務(wù)： 
    17.   
  
  
  
  17.     因此執(zhí)行機制便為：執(zhí)行宏任務(wù) ===> 執(zhí)行微任務(wù) ===> 執(zhí)行另一個宏任務(wù) ===> 不斷循環(huán) 
    18.   
  
  
  
  18.         即：在一個事件循環(huán)中，執(zhí)行第一個宏任務(wù)，宏任務(wù)執(zhí)行結(jié)束，執(zhí)行當前事件循環(huán)中的微任務(wù)， 
    19.   
  
  
  
  19. 執(zhí)行完畢之后進入下一個事件循環(huán)中，或者說執(zhí)行下一個宏任務(wù) 
    20.   
  
  
  
  20. */ 
    21.

3.5、是否徹底理解JavaScript執(zhí)行機制實例

 
 
 
 
    
  
  
  
  
  1. console.log('1'); 
    2.   
  
  
  
  2. setTimeout(function() { 
    3.   
  
  
  
  3.     console.log('2'); 
    4.   
  
  
  
  4.     process.nextTick(function() { 
    5.   
  
  
  
  5.         console.log('3'); 
    6.   
  
  
  
  6.     }) 
    7.   
  
  
  
  7.     new Promise(function(resolve) { 
    8.   
  
  
  
  8.         console.log('4'); 
    9.   
  
  
  
  9.         resolve(); 
    10.   
  
  
  
  10.     }).then(function() { 
    11.   
  
  
  
  11.         console.log('5') 
    12.   
  
  
  
  12.     }) 
    13.   
  
  
  
  13. }) 
    14.   
  
  
  
  14. process.nextTick(function() { 
    15.   
  
  
  
  15.     console.log('6'); 
    16.   
  
  
  
  16. }) 
    17.   
  
  
  
  17. new Promise(function(resolve) { 
    18.   
  
  
  
  18.     console.log('7'); 
    19.   
  
  
  
  19.     resolve(); 
    20.   
  
  
  
  20. }).then(function() { 
    21.   
  
  
  
  21.     console.log('8') 
    22.   
  
  
  
  22. }) 
    23.   
  
  
  
  23. setTimeout(function() { 
    24.   
  
  
  
  24.     console.log('9'); 
    25.   
  
  
  
  25.     process.nextTick(function() { 
    26.   
  
  
  
  26.         console.log('10'); 
    27.   
  
  
  
  27.     }) 
    28.   
  
  
  
  28.     new Promise(function(resolve) { 
    29.   
  
  
  
  29.         console.log('11'); 
    30.   
  
  
  
  30.         resolve(); 
    31.   
  
  
  
  31.     }).then(function() { 
    32.   
  
  
  
  32.         console.log('12') 
    33.   
  
  
  
  33.     }) 
    34.   
  
  
  
  34. }) 
    35.   
  
  
  
  35. /* 
    36.   
  
  
  
  36. 1、 第一輪事件循環(huán)流程分析如下： 
    37.   
  
  
  
  37.     整體script作為第一個宏任務(wù)進入主線程，遇到console.log，輸出1。 
    38.   
  
  
  
  38.     遇到setTimeout，其回調(diào)函數(shù)被分發(fā)到宏任務(wù)Event Queue中。我們暫且記為setTimeout1。 
    39.   
  
  
  
  39.     遇到process.nextTick()，其回調(diào)函數(shù)被分發(fā)到微任務(wù)Event Queue中。我們記為process1。 
    40.   
  
  
  
  40.     遇到Promise，new Promise直接執(zhí)行，輸出7。then被分發(fā)到微任務(wù)Event Queue中。我們記為then1。 
    41.   
  
  
  
  41.     又遇到了setTimeout，其回調(diào)函數(shù)被分發(fā)到宏任務(wù)Event Queue中，我們記為setTimeout2。 
    42.   
  
  
  
  42.     宏任務(wù)Event Queue   微任務(wù)Event Queue 
    43.   
  
  
  
  43.     setTimeout1         process1 
    44.   
  
  
  
  44.     setTimeout2         then1 
    45.   
  
  
  
  45.     上表是第一輪事件循環(huán)宏任務(wù)結(jié)束時各Event Queue的情況，此時已經(jīng)輸出了1和7。 
    46.   
  
  
  
  46.     我們發(fā)現(xiàn)了process1和then1兩個微任務(wù)。 
    47.   
  
  
  
  47.     執(zhí)行process1,輸出6。 
    48.   
  
  
  
  48.     執(zhí)行then1，輸出8。 
    49.   
  
  
  
  49.     好了，第一輪事件循環(huán)正式結(jié)束，這一輪的結(jié)果是輸出1，7，6，8。 
    50.   
  
  
  
  50. 2、 那么第二輪時間循環(huán)從setTimeout1宏任務(wù)開始： 
    51.   
  
  
  
  51.     首先輸出2。接下來遇到了process.nextTick()，同樣將其分發(fā)到微任務(wù)Event Queue中， 
    52.   
  
  
  
  52. 記為process2。new Promise立即執(zhí)行輸出4，then也分發(fā)到微任務(wù)Event Queue中，記為then2。 
    53.   
  
  
  
  53.     宏任務(wù)Event Queue     微任務(wù)Event Queue 
    54.   
  
  
  
  54.     setTimeout2           process2 
    55.   
  
  
  
  55.                           then2 
    56.   
  
  
  
  56.     第二輪事件循環(huán)宏任務(wù)結(jié)束，我們發(fā)現(xiàn)有process2和then2兩個微任務(wù)可以執(zhí)行。 
    57.   
  
  
  
  57.         輸出3。 
    58.   
  
  
  
  58.         輸出5。 
    59.   
  
  
  
  59.         第二輪事件循環(huán)結(jié)束，第二輪輸出2，4，3，5。 
    60.   
  
  
  
  60. 3、 第三輪事件循環(huán)開始，此時只剩setTimeout2了，執(zhí)行。 
    61.   
  
  
  
  61.         直接輸出9。 
    62.   
  
  
  
  62.         將process.nextTick()分發(fā)到微任務(wù)Event Queue中。記為process3。 
    63.   
  
  
  
  63.         直接執(zhí)行new Promise，輸出11。 
    64.   
  
  
  
  64.         將then分發(fā)到微任務(wù)Event Queue中，記為then3。 
    65.   
  
  
  
  65.     宏任務(wù)Event Queue     微任務(wù)Event Queue 
    66.   
  
  
  
  66.                             process3 
    67.   
  
  
  
  67.                             then3      
    68.   
  
  
  
  68.     第三輪事件循環(huán)宏任務(wù)執(zhí)行結(jié)束，執(zhí)行兩個微任務(wù)process3和then3。 
    69.   
  
  
  
  69.         輸出10。 
    70.   
  
  
  
  70.         輸出12。 
    71.   
  
  
  
  71.         第三輪事件循環(huán)結(jié)束，第三輪輸出9，11，10，12。 
    72.   
  
  
  
  72.     整段代碼，共進行了三次事件循環(huán)，完整的輸出為1，7，6，8，2，4，3，5，9，11，10，12。 
    73.   
  
  
  
  73. */ 
    74.

總結(jié)

javascript是一門單線程語言;

Event Loop是javascript的執(zhí)行機制;

客戶端也是要學習前端語言的，以后我們會講解一些前端的知識點

本文轉(zhuǎn)載自微信公眾號「Android開發(fā)編程」


當前文章：前端進階之JS運行原理和機制詳解
分享鏈接：http://uogjgqi.cn/article/dpgdddd.html
掃二維碼與項目經(jīng)理溝通

我們在微信上24小時期待你的聲音

解答本文疑問/技術(shù)咨詢/運營咨詢/技術(shù)建議/互聯(lián)網(wǎng)交流