JavaScript運行機制是什么-創(chuàng)新互聯(lián)

這篇文章主要為大家展示了JavaScript運行機制是什么，內(nèi)容簡而易懂，希望大家可以學(xué)習一下，學(xué)習完之后肯定會有收獲的，下面讓小編帶大家一起來看看吧。

成都創(chuàng)新互聯(lián)公司專注于無為企業(yè)網(wǎng)站建設(shè),成都響應(yīng)式網(wǎng)站建設(shè)公司,商城網(wǎng)站開發(fā)。無為網(wǎng)站建設(shè)公司,為無為等地區(qū)提供建站服務(wù)。全流程按需搭建網(wǎng)站，專業(yè)設(shè)計，全程項目跟蹤，成都創(chuàng)新互聯(lián)公司專業(yè)和態(tài)度為您提供的服務(wù)

JavaScript執(zhí)行順序

首先，JavaScript是按照順序，一行一行執(zhí)行的，且JS只有一條線程，即不可能進行兩條代碼同時執(zhí)行，也就是說，在一條代碼執(zhí)行時，它后面的所有代碼都需要等待，直到該代碼執(zhí)行結(jié)束，后面的才能繼續(xù)執(zhí)行。如果是這樣，就會導(dǎo)致用戶體驗度極其不好，例如一個請求發(fā)送給服務(wù)器，后續(xù)代碼就會一直等待，直到服務(wù)器返回結(jié)果，用戶才能進行新的操作。

這又是怎么回事呢？

詳細解釋JavaScript執(zhí)行機制

JavaScript執(zhí)行棧

JavaScript是以壓棧的方式進行代碼的執(zhí)行的，一開始執(zhí)行時棧內(nèi)為空，當執(zhí)行開始，JS引擎會將代碼放入棧底，若該代碼包含其他函數(shù)的調(diào)用，則將被調(diào)用的函數(shù)放在棧頂，若該代碼未包含其他函數(shù)的調(diào)用，則執(zhí)行該函數(shù)，執(zhí)行完成后出棧，以此類推，最終直到棧為空。

JavaScript的同步任務(wù)和異步任務(wù)

事實上，真正的JS內(nèi)部分為同步任務(wù)和異步任務(wù)，然而這并沒有改變JS單線程的特征。

  • 同步任務(wù)：執(zhí)行后直接返回結(jié)果，例：console.log()；c = a + b
  • 異步任務(wù)：執(zhí)行后無法立刻返回結(jié)果，需要等待一定時間，才能執(zhí)行回調(diào)函數(shù)，對返回結(jié)果進行操作

系統(tǒng)來說，JS存在一個主線程，它會首先執(zhí)行所有同步任務(wù)，而異步任務(wù)都會先進行注冊，然后主線程不會等待異步任務(wù)執(zhí)行結(jié)果的返回，而是繼續(xù)執(zhí)行下面的同步任務(wù)（在此過程中，如果異步任務(wù)返回結(jié)果，接下來的回調(diào)函數(shù)會放在Event Queue中等待），直到同步任務(wù)全部執(zhí)行完畢，主線程就會從Event Queue讀取任務(wù)進行執(zhí)行。該過程會不斷循環(huán)，即事件循環(huán)Event Loop。

事件循環(huán)是如何發(fā)生的

不覺得奇怪嗎，如果按照上述同步任務(wù)和異步任務(wù)的執(zhí)行方式，那不是一輪就可以執(zhí)行完畢嗎，又何來的Event Loop？

這是個小細節(jié)，異步任務(wù)存在多個時，每一個異步任務(wù)返回的結(jié)果所需的時間都是不同的，這就存在Event Queue以先進先出的形式將返回結(jié)果進行排隊，第一個異步任務(wù)返回結(jié)果，那么就將其放在隊列的首位，接下來的異步任務(wù)緊隨其后，就這樣排成一隊。當主線程空閑時（即同步任務(wù)執(zhí)行完畢后），便從Event Queue中讀取事件，放入主線程執(zhí)行。而循環(huán)來自于，當Event Queue執(zhí)行完畢后，過了一段時間，又有之前的異步任務(wù)返回結(jié)果，放到Event Queue中，監(jiān)控器檢測到Event Queue為非空，主線程又開始執(zhí)行Event Queue中的任務(wù)。

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

在解釋定義之前，我們先對異步任務(wù)進行說明：

  1. 對服務(wù)器的異步請求：最常見的異步任務(wù)，這涉及前后端的交互，需要服務(wù)器對請求進行處理，并返回請求結(jié)果
  2. setTimeout和setInterval：延時操作，后者為循環(huán)操作（都涉及延時值）
  3. Promise：JS用來處理異步操作的對象
  4. process.nextTick(callback)：類似node.js版的"setTimeout"，在事件循環(huán)的下一次循環(huán)中調(diào)用 callback 回調(diào)函數(shù)。

廣義上JS分為同步任務(wù)和異步任務(wù)，在此對任務(wù)進行更精細的定義：

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

在此，之所以提出宏任務(wù)和微任務(wù)，是為了更好的理解事件循環(huán)！

執(zhí)行過程：

  • 主線程會按順序先執(zhí)行第一次循環(huán)的宏任務(wù)，然后將第一次循環(huán)遇到的微任務(wù)放入微任務(wù)的Event Queue中，將遇到的宏任務(wù)放入宏任務(wù)Event Queue中，在此特別注意??！第一次循環(huán)的宏任務(wù)是整體script代碼！??；
  • 然后后執(zhí)行微任務(wù)的Event Queue；
  • 第二次循環(huán)時，會從宏任務(wù)的Event Queue中取出第一個宏任務(wù)，然后執(zhí)行當前宏任務(wù)中包含的代碼，同樣將遇到的微任務(wù)放入微任務(wù)的Event Queue中，將遇到的宏任務(wù)放入宏任務(wù)Event Queue中；
  • 再執(zhí)行當前微任務(wù)的Event Queue中的任務(wù)；
  • 第三次循環(huán)，從宏任務(wù)的Event Queue中取出第二個宏任務(wù)…(以此循環(huán))

簡而言之，就是先執(zhí)行宏任務(wù)，再執(zhí)行微任務(wù)，特別注意兩點即可：

  1. 第一次循環(huán)的宏任務(wù)是整體script代碼
  2. 宏任務(wù)隊列是一次循環(huán)執(zhí)行一條宏任務(wù)

這里看個例子：

 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')
  })
 })
 
 //作者：ssssyoki
 //鏈接：https://juejin.im/post/59e85eebf265da430d571f89
 //來源：掘金

另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)scvps.cn，海內(nèi)外云服務(wù)器15元起步，三天無理由+7*72小時售后在線，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國服務(wù)器、虛擬主機、免備案服務(wù)器”等云主機租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡單易用、服務(wù)可用性高、性價比高”等特點與優(yōu)勢，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應(yīng)用場景需求。

當前文章：JavaScript運行機制是什么-創(chuàng)新互聯(lián)
標題路徑：http://muchs.cn/article18/dhegdp.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供Google、域名注冊、定制開發(fā)、標簽優(yōu)化、手機網(wǎng)站建設(shè)、企業(yè)網(wǎng)站制作

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)

外貿(mào)網(wǎng)站建設(shè)