浠庝竴閬撻潰璇曢璋堣皥瀵?EventLoop 鐨勭悊瑙?/h1>

Posted 2021-04-30 鍓嶇璇曠偧

相关的知识，希望对你有一定的参考价值。

鍓嶈█

鍥犱负鎺橀噾鏀圭増涔嬪悗瀵逛簬瀛楁暟鏈変簡涓€瀹氱殑闄愬埗锛堜翰娴嬩簡涓嬪湪12500瀛楀乏鍙筹紝鎵€浠ョ湅鍒版爣棰樿繕鏈夊嚑涓囧瓧闀挎枃鐨勬爣棰樹竴瀹氭槸鍦ㄥ敩浣犵殑馃槀锛夋枃绔犵編鍖栨帓鐗堜箣鍚庡瓧鏁拌秴鍑轰簡闄愬埗鎵€浠ユ墦绠楀皢鍚庨潰鐨勯儴鍒嗗崟鐙嫀鍑烘潵鍐? 杩欐牱涔熸洿濂界殑鍐欏嚭鐩稿姣旇緝娣卞叆鐨勪竴鐐圭殑鍐呭, 瀵逛簬銆愬墠绔綋绯汇€?/code>杩欑被鏂囩珷鍐呭涓€瀹氭槸鍖呮嫭浣嗕笉闄愪簬鏍囬鐨勶紝鎴戜細灏藉彲鑳界殑鎷撳睍銆佹繁鍏ャ€佷互鍐欏嚭楂樿川閲忕殑濂芥枃绔犮€?/p>

鍦ㄧ嚎鍗戝井锛屽鏋滆寰楄繖绡囨枃绔犲浣犳湁甯姪鐨勮瘽娆㈣繋澶у鐐逛釜璧烉煈?/p>

浠庝竴閬撻寮曞嚭瀵笶vent Loop鐨勬€濊€?/span>

瀵逛簬Event Loop(浜嬩欢杞锛夋墍娑夊強鐨勭煡璇嗘蹇靛お澶氫簡锛屽鏋滀笂鏉ュ氨璁蹭竴澶у爢姒傚康鎬х殑涓滆タ澶灟鐕ヤ笖浠庝竴寮€濮嬪氨鏄寜鐓ф垜鐨勬€濊矾鏉ヨ蛋鐨勶紝鎵€浠ユ垜鎵撶畻鎹竴绉嶆柟寮忔潵鍐欒繖绡囨枃绔狅紝浣犲厛鎸夌収浣犱箣鍓嶅浜嶦vent Loop(浜嬩欢杞)鐨勭悊瑙ｆ潵瑙ｈ繖閬撻锛屾垜鍦ㄥ悗闈㈠啓鍑烘垜浠嶦vent Loop鐨勭悊瑙ｆ€濊€冭繖棰樼殑鏂瑰紡銆備袱绉嶄笉鍚岀殑鐞嗚В銆佹兂娉曘€佷簰鐩哥鎾烇紝鎴戝彲鑳芥湁鐞嗚В涓嶅鐨勶紝浣犱篃鍙兘鏈変箣鍓嶅拷鐣ョ殑涓€浜涚煡璇嗙偣锛屾垜浠?/p>

涓嶅ソ鎰忔€濇斁閿欎簡馃槄锛岃繖寮犲浘

棰樼洰

console.log('script start');

setTimeout(() => {
  console.log('鍖楁瓕');
}, 1 * 2000);

Promise.resolve()
.then(function() {
  console.log('promise1');
}).then(function() {
  console.log('promise2');
});


async function foo() {
  await bar()
  console.log('async1 end')
}
foo()

async function errorFunc () {
  try {
    await Promise.reject('error!!!')
  } catch(e) {
    console.log(e)
  }
  console.log('async1');
  return Promise.resolve('async1 success')
}
errorFunc().then(res => console.log(res))

function bar() {
  console.log('async2 end') 
}

console.log('script end');

濂戒簡锛屽彲浠ユ殏鏃朵笉寰€涓嬬炕锛屽厛鎸夌収鑷繁鐨勭悊瑙ｆ潵瑙ｄ笅杩欓亾棰樸€?/p>

---

---

---

-----------------------------------------------------------------------  鎴戞槸鍒嗗壊绾?-----------------------------------------------------------------------

---

---

---

鐩镐俊杩欓亾棰樿偗瀹氶毦涓嶅€掑ぇ瀹讹紝浣嗘槸澶у鏄寜鐓т粈涔堟牱鐨勬柟寮忔潵瑙ｅ嚭杩欓亾棰樼殑鍛紵鍏跺疄杩欓亾棰樿€冨療浣犱簡寰堝鐭ヨ瘑鐐癸紝涓嬮潰鎴戝皢鐢ㄦ垜鐨勭悊瑙ｆ潵璇磋瀵硅繖閬撻鐨勬€濊€冦€傛按骞虫湁闄愩€佹湁浠讳綍闂娆㈣繋璇勮鍖烘寚鍑恒€?/p>

JS鐨勮繍琛屾満鍒?/span>

鍏堟潵瑙ｉ噴涓婂浘涓嚭鐜扮殑鍑犱釜鍗曡瘝鎵€瑕佽〃杈剧殑鍚箟銆?/p>

Heap(鍫?銆丼tack(鏍?銆丵ueue(闃熷垪)銆丒vent Loop(浜嬩欢杞)

绋嬪簭涓殑鍫嗘爤闃熷垪

Heap(鍫?

鍫嗭紝 鏄竴绉嶅姩鎬佸瓨鍌ㄧ粨鏋勶紝鏄埄鐢ㄥ畬鍏ㄤ簩鍙夋爲缁存姢鐨勪竴缁勬暟鎹紝鍫嗗垎涓轰袱绉嶏紝涓€绉嶄负鏈€澶у爢锛屼竴绉嶄负鏈€灏忓爢锛屽皢鏍硅妭鐐规渶澶х殑鍫嗗彨鍋?span>鏈€澶у爢鎴?span>澶ф牴鍫?/strong>锛屾牴鑺傜偣鏈€灏忕殑鍫嗗彨鍋?span>鏈€灏忓爢鎴?span>灏忔牴鍫?/strong>銆傚爢鏄?span>绾挎€ф暟鎹粨鏋?/strong>锛岀浉褰撲簬涓€缁存暟缁?/strong>锛屾湁鍞竴鍚庣户銆?/p>

鏍堬紙Stack锛?/strong>

鏍堝湪绋嬪簭涓殑璁惧畾鏄檺瀹氫粎鍦ㄨ〃灏捐繘琛屾彃鍏ユ垨鍒犻櫎鎿嶄綔鐨勭嚎鎬ц〃銆傛爤鏄竴绉嶆暟鎹粨鏋勶紝瀹冩寜鐓?span>鍚庤繘鍏堝嚭(LIFO: last-in-first-out)鐨勫師鍒欏瓨鍌ㄦ暟鎹紝鍏堣繘鍏ョ殑鏁版嵁琚帇鍏ユ爤搴曪紝鏈€鍚庣殑鏁版嵁鍦ㄦ爤椤讹紝闇€瑕佽鏁版嵁鐨勬椂鍊欎粠鏍堥《寮€濮嬪脊鍑烘暟鎹€傛爤鏄彧鑳藉湪鏌愪竴绔彃鍏ュ拰鍒犻櫎鐨勭壒娈婄嚎鎬ц〃銆?/p>

闃熷垪锛圦ueue锛?/p>

闃熷垪鐗规畩涔嬪鍦ㄤ簬瀹冨彧鍏佽鍦ㄨ〃鐨勫墠绔紙front锛夎繘琛屽垹闄ゆ搷浣滐紝鑰屽湪琛ㄧ殑鍚庣锛?code class="mq-108">rear锛夎繘琛屾彃鍏ユ搷浣滐紝鍜屾爤涓€鏍凤紝闃熷垪鏄竴绉嶆搷浣滃彈闄愬埗鐨勭嚎鎬ц〃銆傝繘琛屾彃鍏ユ搷浣滅殑绔О涓洪槦灏撅紝杩涜鍒犻櫎鎿嶄綔鐨勭绉颁负闃熷ご銆?nbsp;闃熷垪涓病鏈夊厓绱犳椂锛岀О涓?span>绌洪槦鍒?/strong>銆?/p>

闃熷垪鐨勬暟鎹厓绱犲張绉颁负闃熷垪鍏冪礌銆傚湪闃熷垪涓彃鍏ヤ竴涓槦鍒楀厓绱犵О涓哄叆闃燂紝浠庨槦鍒椾腑鍒犻櫎涓€涓槦鍒楀厓绱犵О涓哄嚭闃熴€傚洜涓洪槦鍒楀彧鍏佽鍦ㄤ竴绔彃鍏ワ紝鍦ㄥ彟涓€绔垹闄わ紝鎵€浠ュ彧鏈夋渶鏃╄繘鍏ラ槦鍒楃殑鍏冪礌鎵嶈兘鏈€鍏堜粠闃熷垪涓垹闄わ紝鏁呴槦鍒楀張绉颁负鍏堣繘鍏堝嚭锛?code class="mq-110">FIFO: first-in-first-out锛?/p>

js涓殑鍫嗘爤闃熷垪

涓嬮潰鎴戣В閲婁笅JavaScript璇█涓殑鍫嗐€佹爤銆侀槦鍒椼€?/p>

鍫?/strong>

鍫嗭紝 鍔ㄦ€佸垎閰嶇殑鍐呭瓨锛屽ぇ灏忎笉瀹氫篃涓嶄細鑷姩閲婃斁锛屽瓨鏀?span>寮曠敤绫诲瀷锛屾寚閭ｄ簺鍙兘鐢卞涓€兼瀯鎴愮殑瀵硅薄锛屼繚瀛樺湪鍫嗗唴瀛樹腑锛屽寘鍚紩鐢ㄧ被鍨嬬殑鍙橀噺锛屽疄闄呬笂淇濆瓨鐨勪笉鏄彉閲忔湰韬紝鑰屾槸鎸囧悜璇ュ璞＄殑鎸囬拡銆傚彲浠ョ畝鍗曠悊瑙ｄ负瀛樺偍浠ｇ爜鍧椼€?/p>

鍫嗙殑浣滅敤锛氬瓨鍌ㄥ紩鐢ㄧ被鍨嬪€肩殑鏁版嵁

let obj = {
    name: '鍖楁瓕'锛?br>    puslic: '鍓嶇鑷椹跨珯'
}

let func = () => {
    console.log('hello world')
}

鏍?/strong>

js涓殑鏍堝噯纭潵灏嗗簲璇ュ彨璋冪敤鏍?EC Stack)锛屼細鑷姩鍒嗛厤鍐呭瓨绌洪棿锛屼細鑷姩閲婃斁锛屽瓨鏀?span>鍩烘湰绫诲瀷锛岀畝鍗曠殑鏁版嵁娈碉紝鍗犳嵁鍥哄畾澶у皬鐨勭┖闂淬€?/p>

鏍堢殑浣滅敤锛氬瓨鍌ㄥ熀鏈被鍨嬪€硷紝杩樻湁涓€涓緢瑕佺殑浣滅敤銆?span>鎻愪緵浠ｇ爜鎵ц鐨勭幆澧?/strong>

闃熷垪

js涓殑闃熷垪鍙互鍙仛浠诲姟闃熷垪鎴?span>寮傛闃熷垪锛屼换鍔￠槦鍒楅噷瀛樻斁鍚勭寮傛鎿嶄綔鎵€娉ㄥ唽鐨勫洖璋冿紝閲岄潰鍒嗕负涓ょ浠诲姟绫诲瀷锛屽畯浠诲姟(macroTask)鍜屽井浠诲姟(microTask)銆?/p>

濂斤紝涓嬮潰鍙互鍥炲埌姝ｉ涓婃潵浜嗐€?/p>

涓轰粈涔堜細鍑虹幇Event Loop

鎬绘墍鍛ㄧ煡JS鏄竴闂ㄥ崟绾跨▼鐨勯潪闃诲鑴氭湰璇█锛孍vent Loop灏辨槸涓轰簡瑙ｅ喅JS寮傛缂栫▼鐨勪竴绉嶈В鍐虫柟妗堛€?/p>

JS涓轰粈涔堟槸鍗曠嚎绋嬭瑷€锛岄偅瀹冩槸鎬庝箞瀹炵幇寮傛缂栫▼(闈為樆濉?杩愯鐨?/span>

绗竴涓棶棰橈細JavaScript鐨勮癁鐢熷氨鏄负浜嗗鐞嗘祻瑙堝櫒缃戦〉鐨勪氦浜掞紙DOM鎿嶄綔鐨勫鐞嗐€乁I鍔ㄧ敾绛?,  璁捐鎴愬崟绾跨▼鐨勫師鍥犲氨鏄笉鎯宠娴忚鍣ㄥ彉寰楀お澶嶆潅锛屽洜涓哄绾跨▼闇€瑕佸叡浜祫婧愩€佷笖鏈夊彲鑳戒慨鏀瑰郊姝ょ殑杩愯缁撴灉锛堜袱涓嚎绋嬩慨鏀逛簡鍚屼竴涓狣OM鑺傜偣灏变細浜х敓涓嶅繀瑕佺殑楹荤儲锛夛紝杩欏浜庝竴绉嶇綉椤佃剼鏈瑷€鏉ヨ杩欏氨澶鏉備簡銆?/p>

绗簩涓棶棰橈細JavaScript鏄崟绾跨▼鐨勪絾瀹冩墍杩愯鐨勫涓荤幆澧冣€旀祻瑙堝櫒鏄绾跨▼锛屾祻瑙堝櫒鎻愪緵浜嗗悇绉嶇嚎绋嬩緵Event Loop璋冨害鏉ュ崗璋僇S鍗曠嚎绋嬭繍琛屾椂涓嶄細闃诲銆?/p>

灏忕粨

鍏堟€荤粨涓€娉釜浜哄浜嶫S杩愯鏈哄埗鐨勭悊瑙ｏ細

浠ｇ爜鎵ц寮€鍚竴涓叏灞€璋冪敤鏍?涓绘爤)鎻愪緵浠ｇ爜杩愯鐨勭幆澧冿紝鍦ㄦ墽琛岃繃绋嬩腑鍚屾浠诲姟鐨勪唬鐮佺珛鍗虫墽琛岋紝閬囧埌寮傛浠诲姟灏嗗紓姝ョ殑鍥炶皟娉ㄥ唽鍒颁换鍔￠槦鍒椾腑锛岀瓑寰呭悓姝ヤ唬鐮佹墽琛屽畬姣曟煡鐪嬪紓姝ユ槸鍚﹀畬鎴愶紝濡傛灉瀹屾垚灏嗗綋鍓嶅紓姝ヤ换鍔＄殑鍥炶皟鎷垮埌涓绘爤涓墽琛?/p>

杩涚▼鍜岀嚎绋?/span>

杩涚▼锛氳繘绋嬫槸 CPU 璧勬簮鍒嗛厤鐨勬渶灏忓崟浣?鏄兘鎷ユ湁璧勬簮鍜岀嫭绔嬭繍琛岀殑鏈€灏忓崟浣?

绾跨▼锛氱嚎绋嬫槸 CPU 璋冨害鐨勬渶灏忓崟浣?绾跨▼鏄缓绔嬪湪杩涚▼鐨勫熀纭€涓婄殑涓€娆＄▼搴忚繍琛屽崟浣?

瀵逛簬杩涚▼鍜岀嚎绋嬪苟娌℃湁纭垏缁熶竴鐨勬弿杩帮紝鍙互绠€鍗曠殑鐞嗚В锛?/p>

姣斿涓€涓簲鐢ㄧ▼搴? 濡俀Q銆佹祻瑙堝櫒鍚姩鏃朵細寮€鍚竴涓繘绋嬶紝鑰岃杩涚▼鍙互鏈夊涓嚎绋嬫潵杩涜璧勬簮璋冨害鍜屽垎閰嶏紝杈惧埌杩愯绋嬪簭鐨勪綔鐢ㄣ€?/p>

鏇撮€氫織鐨勮瘽璁诧細鎵撳紑QQ搴旂敤绋嬪簭寮€鍚簡杩涚▼鏉ヨ繍琛岀▼搴?QQ), 鏈夊涓嚎绋嬫潵杩涜璧勬簮璋冨害鍜屽垎閰?澶氫釜绾跨▼鏉ュ垎閰嶆墦寮€QQ鎵€鍗犵敤鐨勮繍瀛?锛岃揪鍒拌繍琛岀▼搴?QQ)鐨勪綔鐢?

鐢ㄦ搷浣滅郴缁熸潵浣滀釜渚嬪瓙锛?/p>

绾跨▼渚濊禆杩涚▼锛屼竴涓繘绋嬪彲浠ユ湁涓€涓垨鑰呭涓嚎绋嬶紝浣嗘槸绾跨▼鍙兘鏄睘浜庝竴涓繘绋嬨€?/p>

JS鐨勫崟绾跨▼

js鐨勫崟绾跨▼鎸囩殑鏄痡avaScript寮曟搸鍙湁涓€涓嚎绋?/p>

鍗曠嚎绋嬪氨鎰忓懗鐫€锛屾墍鏈変换鍔￠渶瑕佹帓闃燂紝鍓嶄竴涓换鍔＄粨鏉燂紝鎵嶄細鎵ц鍚庝竴涓换鍔°€傚鏋滃墠涓€涓换鍔¤€楁椂寰堥暱锛屽悗涓€涓换鍔″氨涓嶅緱涓嶄竴鐩寸瓑鐫€銆俲s 寮曟搸鎵ц寮傛浠ｇ爜鑰屼笉鐢ㄧ瓑寰咃紝鏄洜鏈変负鏈変换鍔￠槦鍒楀拰浜嬩欢杞銆?/p>

• 浠诲姟闃熷垪锛氫换鍔￠槦鍒楁槸涓€涓厛杩涘厛鍑虹殑闃熷垪锛屽畠閲岄潰瀛樻斁鐫€鍚勭浠诲姟鍥炶皟銆?
• 浜嬩欢杞锛氫簨浠惰疆璇㈡槸鎸囦富绾跨▼閲嶅浠庝换鍔￠槦鍒椾腑鍙栦换鍔°€佹墽琛屼换鍔＄殑杩囩▼銆?

娴忚鍣ㄧ殑澶氱嚎绋?/span>

1. GUI 娓叉煋绾跨▼

• 缁樺埗椤甸潰锛岃В鏋?html銆丆SS锛屾瀯寤?DOM 鏍戯紝甯冨眬鍜岀粯鍒剁瓑
• 椤甸潰閲嶇粯鍜屽洖娴?
• 涓?JS 寮曟搸绾跨▼浜掓枼锛屼篃灏辨槸鎵€璋撶殑 JS 鎵ц闃诲椤甸潰鏇存柊

2. JS 寮曟搸绾跨▼

• 璐熻矗 JS 鑴氭湰浠ｇ爜鐨勬墽琛?
• 璐熻矗鍑嗘墽琛屽噯澶囧ソ寰呮墽琛岀殑浜嬩欢锛屽嵆瀹氭椂鍣ㄨ鏁扮粨鏉燂紝鎴栧紓姝ヨ姹傛垚鍔熷苟姝ｇ‘杩斿洖鐨勪簨浠?
• 涓?GUI 娓叉煋绾跨▼浜掓枼锛屾墽琛屾椂闂磋繃闀垮皢闃诲椤甸潰鐨勬覆鏌?

3. 浜嬩欢瑙﹀彂绾跨▼

• 璐熻矗灏嗗噯澶囧ソ鐨勪簨浠朵氦缁?JS 寮曟搸绾跨▼鎵ц
• 澶氫釜浜嬩欢鍔犲叆浠诲姟闃熷垪鐨勬椂鍊欓渶瑕佹帓闃熺瓑寰?JS 鐨勫崟绾跨▼)

4. 瀹氭椂鍣ㄨЕ鍙戠嚎绋?/p>

• 璐熻矗鎵ц寮傛鐨勫畾鏃跺櫒绫荤殑浜嬩欢锛屽 setTimeout銆乻etInterval
• 瀹氭椂鍣ㄥ埌鏃堕棿涔嬪悗鎶婃敞鍐岀殑鍥炶皟鍔犲埌浠诲姟闃熷垪鐨勯槦灏?

5. HTTP 璇锋眰绾跨▼

• 璐熻矗鎵ц寮傛璇锋眰
• 涓荤嚎绋嬫墽琛屼唬鐮侀亣鍒板紓姝ヨ姹傜殑鏃跺€欎細鎶婂嚱鏁颁氦缁欒绾跨▼澶勭悊锛屽綋鐩戝惉鍒扮姸鎬佸彉鏇翠簨浠讹紝濡傛灉鏈夊洖璋冨嚱鏁帮紝璇ョ嚎绋嬩細鎶婂洖璋冨嚱鏁板姞鍏ュ埌浠诲姟闃熷垪鐨勯槦灏剧瓑寰呮墽琛?

Event Loop

鍛硷紝缁堜簬鍥炲埌姝ｉ浜嗭紒

瀵逛簬浜嬩欢杞涓婇潰鍏跺疄宸茬粡瑙ｉ噴鐨勫緢娓呮浜嗭細

浜嬩欢杞灏辨槸瑙ｅ喅javascript鍗曠嚎绋嬪浜庡紓姝ユ搷浣滅殑涓€浜涚己闄凤紝璁?javaScript鍋氬埌鏃㈡槸鍗曠嚎绋?/strong>锛屽張缁濆涓嶄細闃诲鐨勬牳蹇冩満鍒讹紝鏄敤鏉ュ崗璋冨悇绉嶄簨浠躲€佺敤鎴蜂氦浜掋€佽剼鏈墽琛屻€乁I 娓叉煋銆佺綉缁滆姹傜瓑鐨勪竴绉嶆満鍒躲€?/p>

娴忚鍣ㄤ腑鐨凟veent Loop鎵ц椤哄簭

Processing model^[1]瑙勮寖瀹氫箟浜?code class="mq-225">Eveent Loop鐨勫惊鐜繃绋嬶細

涓€涓狤veent Loop鍙瀛樺湪锛屽氨浼氫笉鏂墽琛屼笅杈圭殑姝ラ锛?/p>

• 1.鍦╰asks(浠诲姟)闃熷垪涓€夋嫨鏈€鑰佺殑涓€涓猼ask,鐢ㄦ埛浠ｇ悊鍙互閫夋嫨浠讳綍task闃熷垪锛屽鏋滄病鏈夊彲閫夌殑浠诲姟锛屽垯璺冲埌涓嬭竟鐨刴icrotasks姝ラ銆?
• 2.灏嗕笂杈归€夋嫨鐨則ask璁剧疆涓? 姝ｅ湪杩愯鐨則ask ^[2]銆?
• 3.Run: 杩愯琚€夋嫨鐨則ask銆?
• 4.灏咵veent Loop鐨? currently running task ^[3]鍙樹负null銆?
• 5.浠巘ask闃熷垪閲岀Щ闄ゅ墠杈硅繍琛岀殑task銆?
• 6.Microtasks: 鎵ц microtasks浠诲姟妫€鏌ョ偣 ^[4]銆傦紙涔熷氨鏄墽琛宮icrotasks闃熷垪閲岀殑浠诲姟锛?
• 7.鏇存柊娓叉煋锛圲pdate the rendering锛夛細鍙互绠€鍗曠悊瑙ｄ负娴忚鍣ㄦ覆鏌?..
• 8.濡傛灉杩欐槸涓€涓獁orker event loop锛屼絾鏄病鏈変换鍔″湪task闃熷垪涓紝骞朵笖 WorkerGlobalScope ^[5]瀵硅薄鐨刢losing鏍囪瘑涓簍rue锛屽垯閿€姣丒veent Loop锛屼腑姝㈣繖浜涙楠わ紝鐒跺悗杩涜瀹氫箟鍦? Web workers ^[6]绔犺妭鐨? run a worker ^[7]銆?
• 9.杩斿洖鍒扮涓€姝ャ€?

Eveent Loopp浼氫笉鏂惊鐜笂闈㈢殑姝ラ锛屾鎷鏉ワ細

• Eveent Loop浼氫笉鏂惊鐜殑鍘诲彇 tasks闃熷垪鐨勪腑鏈€鑰佺殑涓€涓猼ask(鍙互鐞嗚В涓哄畯浠诲姟锛夋帹鍏ユ爤涓墽琛岋紝骞跺湪褰撴寰幆閲屼緷娆℃墽琛屽苟娓呯┖ microtask闃熷垪閲岀殑浠诲姟銆?
• 鎵ц瀹? microtask闃熷垪閲岀殑浠诲姟锛屾湁 鍙兘浼氭覆鏌撴洿鏂般€傦紙娴忚鍣ㄥ緢鑱槑锛屽湪涓€甯т互鍐呯殑澶氭dom鍙樺姩娴忚鍣ㄤ笉浼氱珛鍗冲搷搴旓紝鑰屾槸浼氱Н鏀掑彉鍔ㄤ互鏈€楂?0HZ(澶х害16.7ms姣忓抚)鐨勯鐜囨洿鏂拌鍥撅級

瀹忎换鍔″拰寰换鍔′紭鍏堥棶棰?/span>

鍦ㄤ换鍔″鍒?queue)涓敞鍐岀殑寮傛鍥炶皟鍙堝垎涓轰袱绉嶇被鍨嬶紝瀹忎换鍔″拰寰换鍔°€傛垜浠负浜嗘柟渚跨悊瑙ｅ彲浠ヨ涓哄湪浠诲姟闃熷垪涓湁瀹忎换鍔￠槦鍒楀拰寰换鍔￠槦鍒椼€傚畯浠诲姟闃熷垪鏈夊涓紝寰换鍔″彧鏈変竴涓?/p>

• 瀹忎换鍔?macro Task)

• script(鏁翠綋浠ｇ爜)
• setTimeout/setInterval
• setImmediate(Node鐜)
• UI 娓叉煋
• requestAnimationFrame
• ....

• 寰换鍔?micro Task)

• Promise鐨則hen()銆乧atch()銆乫inally()閲岄潰鐨勫洖璋?/p>

• process.nextTick(Node 鐜锛?/p>

• ...

涓汉鐞嗚В鐨勬墽琛岄『搴忥細

1. 浠ｇ爜浠庡紑濮嬫墽琛岃皟鐢ㄤ竴涓叏灞€鎵ц鏍堬紝script鏍囩浣滀负瀹忎换鍔℃墽琛?/p>

2. 鎵ц杩囩▼涓悓姝ヤ唬鐮佺珛鍗虫墽琛岋紝寮傛浠ｇ爜鏀惧埌浠诲姟闃熷垪涓紝浠诲姟闃熷垪瀛樻斁鏈変袱绉嶇被鍨嬬殑寮傛浠诲姟锛屽畯浠诲姟闃熷垪锛屽井浠诲姟闃熷垪銆?/p>

3. 鍚屾浠ｇ爜鎵ц瀹屾瘯涔熷氨鎰忓懗鐫€绗竴涓畯浠诲姟鎵ц瀹屾瘯(script)

• 1銆佸厛鏌ョ湅浠诲姟闃熷垪涓殑寰换鍔￠槦鍒楁槸鍚﹀瓨鍦ㄥ畯浠诲姟鎵ц杩囩▼涓墍浜х敓鐨勫井浠诲姟

  1-1銆佹湁鐨勮瘽灏卞皢寰换鍔￠槦鍒椾腑鐨勬墍鏈夊井浠诲姟娓呯┖

  2-2銆佸井浠诲姟鎵ц杩囩▼涓墍浜х敓鐨勫井浠诲姟鏀惧埌寰换鍔￠槦鍒椾腑锛屽湪姝ゆ鎵ц涓竴骞舵竻绌?/p>

• 2銆佸鏋滄病鏈夊啀鐪嬬湅瀹忎换鍔￠槦鍒椾腑鏈夋病鏈夊畯浠诲姟锛屾湁鐨勮瘽鎵ц锛屾病鏈夌殑璇濅簨浠惰疆璇㈢涓€娉㈢粨鏉?/p>

  2-1銆佹墽琛岃繃绋嬩腑鎵€浜х敓鐨勫井浠诲姟鏀惧埌寰换鍔￠槦鍒?/p>

  2-2銆佸畬鎴愬畯浠诲姟涔嬪悗鎵ц娓呯┖寰换鍔￠槦鍒楃殑浠ｇ爜

鎵€浠ユ槸瀹忎换鍔′紭鍏堬紝鍦ㄥ畯浠诲姟鎵ц瀹屾瘯涔嬪悗鎵嶄細鏉ヤ竴娆℃€ф竻绌轰换鍔￠槦鍒椾腑鐨勬墍鏈夊井浠诲姟銆?/p>

瑙ｉ鍒嗘瀽杩囩▼

灏嗘渶寮€濮嬬殑閭ｉ亾棰樻惉涓嬫潵

// => 浠ｇ爜涓€鎵ц灏卞紑濮嬫墽琛屼簡涓€涓畯浠诲姟-瀹?
console.log('script start'); 

setTimeout(() => { // 瀹?nbsp;1
  console.log('鍖楁瓕');
}, 1 * 2000);

Promise.resolve()
    .then(function() { // 寰?-1
      console.log('promise1');
    })
    .then(function() { // 寰?-4 => 杩欎釜then涓殑浼氱瓑寰呬笂涓€涓猼hen鎵ц瀹屾垚涔嬪悗寰楀埌鍏剁姸鎬佹墠浼氬悜Queue娉ㄥ唽鐘舵€佸搴旂殑鍥炶皟锛屽亣璁句笂涓€涓猼hen涓富鍔ㄦ姏閿欎笖娌℃湁鎹曡幏锛岄偅灏辨敞鍐岀殑鏄繖涓猼hen涓殑绗簩涓洖璋冧簡銆?/span>
      console.log('promise2'); 
    });


async function foo() {
  await bar() // => await(promise鐨勮娉曠硸)锛屼細寮傛绛夊緟鑾峰彇鍏惰繑鍥炲€?/span>
  // => 鍚庨潰鐨勪唬鐮佸彲浠ョ悊瑙ｄ负鏀惧埌寮傛闃熷垪寰换鍔′腑銆?nbsp;杩欓噷鍙互淇濈暀鐤戦棶鍚庨潰浼氳缁嗚
  console.log('async1 end') // 寰?-2
}
foo()

function bar() {
  console.log('async2 end') 
}

async function errorFunc () {
  try {
    await Promise.reject('error!!!')
  } catch(e) {
      // => 浠庤繖鍚庨潰寮€濮嬫墍鏈夌殑浠ｇ爜鍙互鐞嗚В涓烘斁鍒板紓姝ラ槦鍒楀井浠诲姟涓?/span>
    console.log(e)  // 寰?-3
  }
  console.log('async1');
  return Promise.resolve('async1 success')
}
errorFunc().then(res => console.log(res)) // 寰?-5

console.log('script end');

涓婇潰浠ｇ爜瀵逛簬Promise鐨勭敤娉曟垜灏变笉澶氳浜? 鍦ㄥ悗闈㈡垜浼氬啓鍏充簬Promise婧愮爜瑙ｆ瀽鐨勬枃绔犮€?/p>

娉ㄦ剰涓€鐐瑰氨鏄疨romise.then().then()锛屽湪娉ㄥ唽寮傛浠诲姟鐨勬椂鍊欙紝绗簩涓猼hen涓殑鍥炶皟鏄緷璧栫涓€涓猼hen涓洖璋冪殑缁撴灉鐨勶紝濡傛灉鎵ц娌℃湁寮傚父鎵嶄細鍦ㄨ寮傛浠诲姟鎵ц瀹屾瘯涔嬪悗娉ㄥ唽鐘舵€佸搴旂殑鍥炶皟

绗竴娆℃墽琛?/span>

鍏ㄥ眬涓€涓畯浠诲姟鎵ц, 杈撳嚭鍚屾浠ｇ爜銆傛寕杞藉畯1銆佸井1-1銆佸井1-2銆佸井1-3銆佸井1-4銆?-琛ㄧず灞炰簬绗竴娆¤疆璇?/p>

run: script start銆?nbsp;async2 end銆乻cript end

绗簩娆℃墽琛?/span>

鍚屾浠ｇ爜鎵ц瀹屾瘯锛屽紑濮嬫墽琛屽紓姝ヤ换鍔′腑鐨勫井浠诲姟闃熷垪涓殑浠ｇ爜銆?/p>

寰换鍔￠槦鍒楋細鍙湁涓€涓槦鍒椾笖浼氬湪褰撳墠杞涓€娆℃竻绌?/strong>

run:
 鎵ц寰?span class="mq-390">1-1: promise1
 鎵ц寰?span class="mq-392">1-2: async1 end
 鎵ц寰?span class="mq-394">1-3: error!!!銆乤sync1 銆傚綋鍓嶅紓姝ュ洖璋冩墽琛屽畬姣曟墠Promise.resolve('async1 success')锛岀劧鍚庢敞鍐宼hen()涓殑鎴愬姛鐨勫洖璋?寰?span class="mq-398">1-5
 鎵ц寰?span class="mq-400">1-4: promise2
    鎵ц鍒氬垰娉ㄥ唽鐨勫井1-5: async1 success

鍒拌繖绗竴娉㈣疆璇㈢粨鏉?/strong>

绗笁娆℃墽琛?/span>

寮€鍚浜屾尝杞锛氭墽琛屽畯1

run: '鍖楁瓕'

鍒拌繖銆傛暣涓疆璇㈢粨鏉熴€?/p>

鍏跺疄鐩稿闅句互鐞嗚В鐨勪篃灏辨槸寰换鍔★紝瀵逛簬寰换鍔′篃灏辨槸涓婇潰璇寸殑鍙湁涓€涓槦鍒椾細鍦?span>姝ゆ杞涓竴娆℃竻绌?鍖呮嫭姝ゆ鎵ц杩囩▼涓墍浜х敓鐨勫井浠诲姟)銆?/p>

涓句釜鏍楀瓙馃尠

浣犲幓鍫傞鎺掗槦鎵撹彍锛屽師鏈綘璁″垝浠婂ぉ鍙悆涓や釜鑿?寰换鍔￠槦鍒椾腑鍙敞鍐屼簡涓や釜鍥炶皟)锛屽湪鎵撹彍鐨勮繃绋嬩腑浣犵湅鍒颁綘鏈€鍠滄鍚冪殑绾㈢儳鑲?寰换鍔℃墽琛岀殑杩囩▼涓亣鍒扮殑鏂扮殑寰换鍔?锛屼綘鑲畾寰楀啀鍔犱釜鑿?灏嗗井浠诲姟鍔犲叆鍒板井浠诲姟闃熷垪)

鎵撴€繘闃?/span>

閫氳繃涓婇潰鐨勮瑙ｇ幇鍦ㄥ彲浠ュ埛鍑犻亾棰樻潵鐪嬬湅鑷繁鎾戞彙鐨勬€庝箞鏍蜂簡銆?/p>

榛勯噾棰?/span>

console.log('1');

setTimeout(() => {
  console.log('2');
  Promise.resolve().then(() => {
    console.log('3');
  })
  new Promise((resolve) => {
    console.log('4');
    resolve();
  }).then(() => {
    console.log('5')
  })
})

Promise.reject().then(() => {
  console.log('13');
}, () => {
  console.log('12');
})

new Promise((resolve) => {
  console.log('7');
  resolve();
}).then(() => {
  console.log('8')
})

setTimeout(() => {
  console.log('9');
  Promise.resolve().then(() => {
    console.log('10');
  })
  new Promise((resolve) => {
    console.log('11');
    resolve();
  }).then(() => {
    console.log('12')
  })
})

鐮栫煶棰?/span>

new Promise((resolve, reject) => {
    console.log(1)
    resolve()
  })
  .then(() => {
    console.log(2)
    new Promise((resolve, reject) => {
        console.log(3)
        setTimeout(() => {
          reject();
        }, 3 * 1000);
        resolve()
    })
      .then(() => {
        console.log(4)
        new Promise((resolve, reject) => {
            console.log(5)
            resolve();
          })
          .then(() => {
            console.log(7)
          })
          .then(() => {
            console.log(9)
          })
      })
      .then(() => {
        console.log(8)
      })
  })
  .then(() => {
    console.log(6)
  })

鐜嬭€呴

Promise.resolve()
  .then(() => {
    console.log('promise1');
    return new Promise((resolve, reject) => {
        setTimeout(() => {
          console.log('timer2')
          resolve()
        }, 0)
    })
      .then(async () => {
        await foo();
        return new Error('error1')
      })
      .then((ret) => {
        setTimeout(() => {
          console.log(ret);
          Promise.resolve()
          .then(() => {
            return new Error('error!!!')
          })
          .then(res => {
            console.log("then: ", res)
          })
          .catch(err => {
            console.log("catch: ", err)
          })
        }, 1 * 3000)
      }, err => {
        console.log(err);
      })
      .finally((res) => {
        console.log(res);
        throw new Error('error2')
      })
      .then((res) => {
        console.log(res);
      }, err => {
        console.log(err);
      })
  })
  .then(() => {
    console.log('promise2');
  })

function foo() {
  setTimeout(() => { 
    console.log('async1');
  }, 2 * 1000);
}

setTimeout(() => {
  console.log('timer1')
  Promise.resolve()
    .then(() => {
      console.log('promise3')
    })
}, 0)

console.log('start');

鑽ｈ€€鐜嬭€?/span>

涓嬮潰璁╂垜浠潵涓€璧峰仛鏈€鍚庤繖閬撻銆?/p>

async function async1() {
  console.log('async1 start');
  new Promise((resolve, reject) => {
    try {
      throw new Error('error1')
    } catch(e) {
      console.log(e);
    }
    setTimeout(() => { // 瀹?
      resolve('promise4')
    }, 3 * 1000);
  })
    .then((res) => { // 寰?-1
      console.log(res);
    }, err => {
      console.log(err);
    })
    .finally(res => { // 寰?-2 // TODO娉?
      console.log(res);
    })
  console.log(await async2()); // TODO-娉?
  console.log('async1 end'); // 寰?-1 // TODO-娉?
}

function async2() {
  console.log('async2');
  return new Promise((resolve) => {
    setTimeout(() => { // 瀹?
      resolve(2)
    }, 1 * 3000);
  })
}

console.log('script start');

setTimeout(() => { // 瀹?
  console.log('setTimeout');
}, 0)

async1();

new Promise((resolve) => {
  console.log('promise1');
  resolve();
})
  .then(() => { // 寰?-2
    console.log('promise2');
    return new Promise((resolve) => {
      resolve()
    })
      .then(() => { // 寰?-3
        console.log('then 1-1')
      })
  })
  .then(() => { // 寰?-4
    console.log('promise3');
  })


console.log('script end');

瑙勫畾

鐜板湪涓轰簡鏂逛究澶у鐞嗚В锛岃璁颁綇涓€涓嬭瀹氾細

• 鍒嗘瀽浠ユ瘡娆¤疆璇㈠仛涓哄垎鏋愶紝鍚屾浠ｇ爜鍧楁槸鐩存帴杈撳嚭缁撴灉鐨?
• 寮傛浠诲姟浠ｇ爜鍧椾腑锛岀孩鑹茶〃绀哄畯浠诲姟锛岀豢鑹茶〃绀哄井浠诲姟
• 寰?-琛ㄧず绗竴娆¤疆璇腑鐨勫井浠诲姟闃熷垪涓殑鎵€鏈夊井浠诲姟锛? 寰?-琛ㄧず绗簩娆★紝浠ユ绫绘帹

绗竴娆¤疆璇?/span>

script鏍囩(瀹?)鎵ц

杈撳嚭鍚屾浠ｇ爜锛?/p>

script start -> async1 start -> error1 -> async2 -> promise1 -> script end

鎸傝浇寮傛浠诲姟:

-() => { // 瀹?
-  console.log('setTimeout');
-}

-() => { // 瀹?
-  resolve('promise4')
-}

-() => { // 瀹?
-  resolve(2)
-}


+() => { // 寰?-1
+  console.log('promise2');
+  return new Promise((resolve) => {
+  resolve()
+}

鍚屾浠ｇ爜瀹屾瘯鐨勫悓鏃剁涓€涓畯浠诲姟涔熸墽琛屽畬姣曪紝寮€濮嬫竻绌哄紓姝ヤ换鍔′腑鐨勫井浠诲姟闃熷垪锛?/p>

寰?span class="mq-763">1-1: promise2 -> 寰?span class="mq-765">1-2: then 1-1 -> 寰?span class="mq-769">1-3: promise3

鎵ц寰换鍔′腑鎵€浜х敓鏂扮殑寰换鍔? 鏀惧埌寰换鍔￠槦鍒椾腑锛岃寰换鍔′篃浼氬湪姝ゆ杞涓娓呯┖:

+() => { // 寰?-2
+  console.log('then 1-1')
+}

+() => { // 寰?-3
+  console.log('promise3');
+}

鎵ц寰换鍔¤繃绋嬩腑鎵€浜х敓鐨勫畯浠诲姟鏀惧埌鏂板畯浠诲姟闃熷垪涓細

鏈寰换鍔℃墽琛屾病鏈変骇鐢熸柊鐨勫畯浠诲姟

娉?

杩欓噷寰楄涓€涓嬶紝寰堝浜鸿涓篴wait灏嗕唬鐮佸悓姝ュ寲鐨勬剰鎬濓紝鍏跺疄await鏄疨romise鐨勮娉曠硸锛屽唴閮ㄧ殑瀹炵幇涔熸槸渚濋潬Promise, 鍏惰癁鐢熶篃灏辨槸涓轰簡浼樺寲promise鐨則hen閾惧啓娉曪紝鐢ㄥ悓姝ョ殑鏂瑰紡缂栧啓寮傛浠ｇ爜锛岃浠ｇ爜鐪嬭捣鏉ユ洿绠€娲佹槑浜?await鐨勭湡瀹炴剰鎬濇槸 async wait(寮傛绛夊緟鐨勬剰鎬?await琛ㄨ揪寮忕浉褰撲簬璋冪敤鍚庨潰杩斿洖promise鐨則hen鏂规硶锛屽紓姝ワ紙绛夊緟锛夎幏鍙栧叾杩斿洖鍊笺€傚嵆 await<==>promise.then

杩欓噷鐨刟sync2鍑芥暟杩斿洖鐨凱romise涓紑鍚簡涓€涓畯浠诲姟锛宎wait寮傛绛夊緟闇€瑕佺瓑寰呭畯浠诲姟鎵ц鎵嶈兘鑾峰彇鍏惰繑鍥炲€硷紝涔熷氨鏄瀹忎换鍔′笉鎵цawait琛ㄨ揪寮忓氨鍘嬫牴涓嶈兘璋冪敤Promise鐨則hen鏂规硶

娉?

鍓嶉潰璇磋繃await琛ㄨ揪寮忓悗闈㈢殑浠ｇ爜鍙互绠€鍗曠悊瑙ｄ负鏀惧叆鍒板井浠诲姟涓紝浣嗘槸鍓嶉潰await 琛ㄨ揪寮忓帇鏍瑰氨娌℃湁鑾峰彇寮傛绛夊緟鐨勭粨鏋滆繖鍚庨潰鐨勪唬鐮佷粠璺冲嚭褰撳墠鎵ц鏍堝悗灏卞帇鏍规病鏈夋寕杞藉埌寮傛浠诲姟涓紝鏈変簺鏁欑▼璇寸殑await 琛ㄨ揪寮忓悗闈㈢殑浠ｇ爜鍙互鐪嬫垚寰换鍔￠槦鍒楃殑绗竴涓繖绉嶈娉曟槸閿欒鐨勶紒

姝ゆ杞缁撴潫杈撳嚭缁撴灉鏈夛細

script start -> async1 start -> error1 -> async2 -> promise1 -> script end
寰?span class="mq-796">1-1: promise2 -> 寰?span class="mq-798">1-2: then 1-1 -> 寰?span class="mq-802">1-3: promise3

绗簩娆¤疆璇?/span>

涓婇潰绗竴娉㈣疆璇㈢粨鏉燂紝寮€鍚浜屾尝杞

鎵ц绗簩涓畯浠诲姟闃熷垪(瀹忎换鍔￠槦鍒楀彧瀛樻斁涓€涓畯浠诲姟)锛?/p>

瀹?span class="mq-812">2锛歴etTimeout

瀹忎换鍔℃墽琛屽畬姣曟病鏈変骇鐢熸柊鐨勫井浠诲姟锛屼篃娌℃湁浜х敓鏂扮殑瀹忎换鍔°€傜浜屾杞缁撴潫

姝ゆ杞缁撴潫杈撳嚭缁撴灉鏈夛細

瀹?锛歴etTimeout

绗笁娆¤疆璇?/span>

鎵ц绗笁涓畯浠诲姟闃熷垪(瀹忎换鍔￠槦鍒楀彧瀛樻斁涓€涓畯浠诲姟)锛?/p>

瀹忎换鍔℃湰韬病鏈夎緭鍑哄暐锛屼笉杩囩‘瀹氫簡涓?span class="mq-825">Promise鐨勭姸鎬佸苟浼犻€掍簡涓?span class="mq-826">'promise4'缁欎笅涓€涓猼hen涓殑鎴愬姛鍥炶皟

瀹忎换鍔℃墽琛岃繃绋嬩腑浜х敓鐨勬柊鐨勫井浠诲姟鏀惧埌寰换鍔￠槦鍒?

+(res) => { // 寰?-1
+  console.log(res);
+}

瀹忎换鍔℃墽琛屽畬姣曞紑濮嬫竻绌哄紓姝ヤ换鍔′腑鐨勫井浠诲姟闃熷垪锛?/p>

寰?span class="mq-838">3-1: promise4 -> 寰?span class="mq-840">3-2: undefined

鎵ц寰换鍔′腑鎵€浜х敓鏂扮殑寰换鍔? 鏀惧埌寰换鍔￠槦鍒椾腑锛岃寰换鍔′篃浼氬湪姝ゆ杞涓娓呯┖:

+res => { // 寰?-2 // TODO娉?
+  console.log(res);
+}

鎵ц寰换鍔¤繃绋嬩腑鎵€浜х敓鐨勫畯浠诲姟鏀惧埌鏂板畯浠诲姟闃熷垪涓細

鏈寰换鍔℃墽琛屾病鏈変骇鐢熸柊鐨勫畯浠诲姟

姝ゆ杞缁撴潫杈撳嚭缁撴灉鏈夛細

寰?span class="mq-858">3-1: promise4 -> 寰?span class="mq-860">3-2: undefined

娉?

鍓嶉潰璇磋繃promise.finally()涔熸槸寰换鍔★紝finally鍙互鐞嗚В涓轰笉绠romise鐨勭姸鎬佹槸鎴愬姛鎴栧け璐ラ兘瑕佹墽琛屾垜銆備絾鏄垜涓嶆帴鍙椾换浣曠粨鏋溿€傚洜姝inally鎺ュ彈涓嶅埌杩斿洖鍊紃es涓簎ndefined

绗洓娆¤疆璇?/span>

鎵ц绗洓涓畯浠诲姟闃熷垪(瀹忎换鍔￠槦鍒楀彧瀛樻斁涓€涓畯浠诲姟)锛?/p>

瀹忎换鍔℃湰韬病鏈夎緭鍑哄暐锛屼笉杩囩‘瀹氫簡涓?span class="mq-873">Promise鐨勭姸鎬佸苟浼犻€掍簡涓?span class="mq-874">2缁欎笅涓€涓猼hen涓殑鎴愬姛鍥炶皟

瀹忎换鍔℃墽琛岃繃绋嬩腑浜х敓鐨勬柊鐨勫井浠诲姟鏀惧埌寰换鍔￠槦鍒?

涓婇潰璇磋繃await => Promise.then(), 涓婇潰瀹忎换鍔℃墽琛屽畬姣曠‘瀹氫簡promise鐘舵€佸彲浠ュ幓鑾峰彇寮傛绛夊緟鐨勭粨鏋溿€傜浉褰撲簬杩欐牱锛歅romise.then((res) => {return res}) 鑰宎wait琛ㄨ揪寮忓悗闈㈢殑浠ｇ爜鐩稿綋浜庡湪寮傛绛夊緟鑾峰彇缁撴灉鍚?/strong>鏀惧埌寰换鍔￠槦鍒椾腑 鐩稿綋浜庤繖鏍凤細Promise.then((res) => {return res}).finally(() => {}), 鍙湁鍦╝wait 琛ㄨ揪寮忓墠闈㈣幏鍙栧埌缁撴灉鍚庢墠浼氬湪浠ｇ爜鎸傚湪鍒板紓姝ラ槦鍒椾腑

鍙互鍋氫釜瀹為獙灏嗕笂闈㈠紓姝ョ瓑寰呭畾鏃跺櫒鐨勫€艰瀹氫负鏇撮暱鏃堕棿锛岃繖涓椂鍊檃wait琛ㄨ揪寮忓悗闈㈢殑浠ｇ爜鏄笉涓哄搷搴旂殑锛屽彧鏈夎幏鍙栧埌浜嗗紓姝ョ瓑寰呯殑缁撴灉锛屾墠浼氬搷搴斻€?/p>

+(res) => {return res} // 寰?-1

+() => {async1 end} // 寰?-2

瀹忎换鍔℃墽琛屽畬姣曞紑濮嬫竻绌哄紓姝ヤ换鍔′腑鐨勫井浠诲姟闃熷垪锛?/p>

寰?span class="mq-887">4-1: 2 -> 寰?span class="mq-890">4-2: async1 end

鎵ц寰换鍔′腑鎵€浜х敓鏂扮殑寰换鍔? 鏀惧埌寰换鍔￠槦鍒椾腑锛岃寰换鍔′篃浼氬湪姝ゆ杞涓娓呯┖:

鏈寰换鍔℃墽琛屾病鏈変骇鐢熸柊鐨勫井浠诲姟

鎵ц寰换鍔¤繃绋嬩腑鎵€浜х敓鐨勫畯浠诲姟鏀惧埌鏂板畯浠诲姟闃熷垪涓細

鏈寰换鍔℃墽琛屾病鏈変骇鐢熸柊鐨勫畯浠诲姟

姝ゆ杞缁撴潫杈撳嚭缁撴灉鏈夛細

寰?span class="mq-904">4-1: 2 -> 寰?span class="mq-907">4-2: async1 end

鎵€鏈夎疆璇㈠畬姣曚箣鍚庣殑瀹屾暣缁撴灉

script start -> async1 start -> error1 -> async2 -> promise1 -> script end
寰?span class="mq-915">1-1: promise2 -> 寰?span class="mq-917">1-2: then 1-1 -> 寰?span class="mq-921">1-3: promise3

瀹?span class="mq-923">2锛歴etTimeout

寰?span class="mq-924">3-1: promise4 -> 寰?span class="mq-926">3-2: undefined

寰?span class="mq-929">4-1: 2 -> 寰?span class="mq-932">4-2: async1 end

濡傛灉浣犲洓閬撻鍏ㄥ鐨勮瘽锛岄偅涔堟伃鍠滀綘銆?/p>

鍐欏湪鏈€鍚?/span>

瀵逛簬銆愬墠绔綋绯汇€戣繖绯诲垪鐨勬枃绔犳垜鏄姳鐫€寰堣鐪燂紝寰堟兂鍐欏ソ鐨勫績鎬佺殑锛屼絾姣曠珶鎴戣繕鏄墠绔皬鐧?amp;鍐欎綔鏂颁汉锛屽鏋滄枃绔犱腑鏈夐偅鍧楀啓鐨勪笉澶ソ鎴栨湁闂娆㈣繋澶у鎸囧嚭锛屾垜涔熶細鍦ㄥ悗闈㈢殑鏂囩珷涓嶅仠淇敼銆備篃甯屾湜鑷繁杩涙鐨勫悓鏃惰兘璺熶綘浠竴璧锋垚闀裤€傚枩娆㈡垜鏂囩珷鐨勬湅鍙嬩滑涔熷彲浠ュ叧娉ㄤ竴涓?/p>

鎴戜細寰堟劅婵€绗竴鎵瑰叧娉ㄦ垜鐨勪汉銆?span>姝ゆ椂锛屽勾杞荤殑鎴戝拰浣狅紝杞昏涓婇樀锛涜€屽悗锛屽瘜瑁曠殑浣犲拰鎴戯紝婊¤浇鑰屽綊銆?/strong>

绯诲垪鏂囩珷

銆愬墠绔綋绯汇€戜粠鍦板熀寮€濮嬫墦閫犱竴搴т竾涓堥珮妤?/span>^[8]

鍙傝€冩枃绔?/span>

娣卞叆鐞嗚В JavaScript Event Loop^[9]

鍙傝€冭祫鏂?/span>

[1]

Processing model: https://html.spec.whatwg.org/multipage/webappapis.html#event-loop-processing-model

[2]

姝ｅ湪杩愯鐨則ask: https://html.spec.whatwg.org/multipage/webappapis.html#currently-running-task

[3]

currently running task: https://html.spec.whatwg.org/multipage/webappapis.html#currently-running-task

[4]

microtasks浠诲姟妫€鏌ョ偣: https://html.spec.whatwg.org/multipage/webappapis.html#perform-a-microtask-checkpoint

[5]

WorkerGlobalScope: https://html.spec.whatwg.org/multipage/workers.html#workerglobalscope

[6]

Web workers: https://html.spec.whatwg.org/multipage/workers.html#workers

[7]

run a worker: https://html.spec.whatwg.org/multipage/workers.html#run-a-worker

[8]

銆愬墠绔綋绯汇€戜粠鍦板熀寮€濮嬫墦閫犱竴搴т竾涓堥珮妤? https://juejin.im/post/6867784542338416648#comment

[9]

娣卞叆鐞嗚В JavaScript Event Loop: https://zhuanlan.zhihu.com/p/34229323

浜ゆ祦璁ㄨ

濡傛灉浣犱笉鎯冲姞缇わ紝鍙槸鎯冲姞鎴戜篃鏄彲浠ョ殑銆?/p>

濡傛灉瑙夊緱杩欑瘒鏂囩珷杩樹笉閿欙紝鏉ヤ釜銆愬垎浜€佺偣璧炪€佸湪鐪嬨€戜笁杩炲惂锛岃鏇村鐨勪汉涔熺湅鍒皛

以上是关于浠庝竴閬撻潰璇曢璋堣皥瀵?EventLoop 鐨勭悊瑙?/h1>

的主要内容，如果未能解决你的问题，请参考以下文章

褰撳瘑鐮併€侀獙璇佺爜閮藉彲鑳借鏀诲厠锛屼粈涔堟墠鏄繚闅滈噾铻嶅畨鍏ㄧ殑鏈€鍚庝竴閬撻槻绾匡紵

绗旇瘯-4399銆?020鏍℃嫑銆慦eb鍚庣寮€鍙戝伐绋嬪笀绗旇瘯棰橈紙鎴戝張琛屼簡锛熺劧鍚庝竴浠介潰璇曢€氱煡閮芥病鏈夛紝鎴戞槸鐪熺殑鑿滃晩銆傘€傘€傘€傦級

璋堣皥golang涓殑寮曠敤绫诲瀷涓庡湴鍧€鍒嗛厤

Vue3 DOM Diff 鏍稿績绠楁硶瑙ｆ瀽

骞茶揣锛屾帴鍙ｆ祴璇曢潰璇曢

鈥滈€冪鈥濆寳浜潵鍒颁簩绾垮煄甯傦紝璋堣皥闈㈣瘯鍜岃亴涓氳鍒?/a>