涓€鏂囧交搴曞紕鎳?Event Loop

Posted 2021-04-30 鍓嶇鍔犲姞

鏈枃鐢卞浘闆€绀惧尯璁よ瘉浣滆€?Horace 鍐欎綔鑰屾垚锛岀偣鍑婚槄璇诲師鏂囨煡鐪嬩綔鑰呮帢閲戦摼鎺ワ紝鍦ㄦ枃绔犲熬閮ㄦ煡鐪嬩綔鑰呯殑鍗氬閾炬帴^[1]锛屾劅璋綔鑰呯殑浼樿川杈撳嚭锛岃鎴戜滑鐨勬妧鏈笘鐣屽彉寰楁洿鍔犵編濂金煒?/p>

绗旇€呮渶杩戝繖鐫€鍋氶」鐩箣绫荤殑锛屾枃绔犺緭鍑洪仐钀戒笅浜嗕竴娈垫椂闂达紝杩欐鎴戜滑灏辨潵鑱婁竴涓潰璇曚腑涓€涓瘮杈冮噸瑕佺殑鐭ヨ瘑鐐?鈥斺€?Event Loop

鍙兘鏈変汉浼氬鎬竴涓?EventLoop 杩樿兘鍐欏嚭浠€涔堬紝涓斿惉鎴戞參鎱㈡潵閫煎彣锛岀湅瀹岃繖绡囨枃绔犲甫浣犳悶瀹?Event Loop 浠ュ強瀹冪浉鍏崇殑涓€浜涚煡璇嗙偣銆?/p>

涓€銆丒vent Loop 鏄粈涔?/h1>

鍦ㄥ紑濮嬭 Event Loop 涔嬪墠锛屾垜浠厛鏉ヨ璇嗕竴涓嬪畠鍒板簳鏄釜浠€涔堜笢瑗裤€?/p>

In computer science, the event loop is a programming construct or design pattern that waits for and dispatches events or messages in a program. The event loop works by making a request to some internal or external "event provider" (that generally blocks the request until an event has arrived), then calls the relevant event handler ("dispatches the event"). The event loop is also sometimes referred to as the message dispatcher, message loop, message pump, or run loop.

涓婇潰杩欐鏄?span class="mq-17">Wikipedia^[2]瀵?Event Loop 鐨勮В閲婏紝绠€鍗曠殑鏉ヨ灏辨槸Event Loop鏄竴涓▼搴忕粨鏋勶紝鐢ㄤ簬绛夊緟鍜屽垎娲炬秷鎭拰浜嬩欢鎴戜釜浜虹殑鐞嗚В鏄?JS 涓殑 Event Loop 鏄祻瑙堝櫒鎴?Node 鐨勪竴绉嶅崗璋?JavaScript 鍗曠嚎绋嬭繍琛屾椂涓嶄細闃诲鐨勪竴绉嶆満鍒躲€?/p>

涓轰粈涔堣瀛?Event Loop锛?/h2>

鍙兘鏈変汉浼氭瘮杈冪枒鎯戝墠绔负浠€涔堣瀛︾湅璧锋潵姣旇緝搴曞眰鐨?Event Loop锛屼笉浠呬粎鏄洜涓鸿繖鏄竴閬撻潰璇曠殑甯歌€冮銆?/p>

1. 浣滀负涓€涓▼搴忓憳锛屼簡瑙ｇ▼搴忕殑杩愯鏈哄埗鏄緢閲嶈鐨勶紝杩欐牱鍙互甯姪浣犲幓杈撳嚭鏇翠紭璐ㄧ殑浠ｇ爜銆?
2. 鍓嶇鏄竴涓寖鍥村緢骞跨殑棰嗗煙锛屾妧鏈竴鐩村湪鏇存柊杩唬锛屾帉鎻′簡搴曞眰鐨勫師鐞嗗彲浠ュ簲瀵规柊鐨勬妧鏈€?
3. 涓€涓紭绉€鐨勭▼搴忓憳瑕佽兘璁╁啓鐨勪唬鐮佹寜鐓ц嚜宸辨兂鐨勫幓杩愯锛屽鏋滆繛浠ｇ爜鏈韩鐨勮繍琛屾満鍒堕兘鏃犳硶鎺屾彙鐨勮瘽锛屽氨涓嶇敤璋堜粈涔堟帉鎺ц嚜宸辩殑浠ｇ爜浜嗐€?

浜屻€佽繘绋嬪拰绾跨▼

涓婃枃鎴戣浜?Event Loop 鏄崟绾跨▼闃诲闂鐨勪竴绉嶈В鍐虫満鍒讹紝鎵€浠ュ湪姝ｅ紡寮€濮嬪墠杩樻槸瑕佸厛浠庤繘绋嬪拰绾跨▼鐨勮搴︽潵鑱婁竴鑱娿€備紬鎵€鍛ㄧ煡鐨勪竴浠朵簨鏄紝JavaScript 鏄竴涓崟绾跨▼鏈哄埗鐨勮瑷€锛岄偅鎴戜滑鍏堟潵鐪嬬湅杩涚▼鍜岀嚎绋嬬殑瀹氫箟锛?/p>

瀹氫箟

1. 杩涚▼锛氳繘绋嬫槸 CPU 璧勬簮鍒嗛厤鐨勬渶灏忓崟浣?
2. 绾跨▼锛氱嚎绋嬫槸 CPU 璋冨害鐨勬渶灏忓崟浣?

鏇撮€氫織鐨勬潵璇达紝杩涚▼灏卞儚鏄竴瀹跺伐鍘傦紝澶氫釜宸ュ巶涔嬮棿鏄嫭绔嬪瓨鍦ㄧ殑銆傝€岀嚎绋嬪氨鍍忔槸宸ュ巶涓殑閭ｄ簺宸ヤ汉锛屽叡浜祫婧愶紝瀹屾垚鍚屼竴涓ぇ鐩爣銆?/p>

JS 鐨勫崟绾跨▼

寰堝浜洪兘鐭ラ亾鐨勬槸锛孞avaScript 鏄竴闂?span class="mq-39">鍔ㄦ€佺殑瑙ｉ噴鍨嬬殑璇█锛屽叿鏈?span class="mq-40">璺ㄥ钩鍙版€?/strong>銆傚湪琚棶鍒?JavaScript 涓轰粈涔堟槸涓€闂ㄥ崟绾跨▼鐨勮瑷€锛屾湁鐨勪汉鍙兘浼氳繖涔堝洖绛旓細鈥滆瑷€鐗规€у喅瀹氫簡 JavaScript 鏄竴涓崟绾跨▼璇█锛孞avaScript 澶╃敓鏄竴涓崟绾跨▼璇█鈥濓紝杩欏彧涓嶈繃鏄竴灞傜硸琛ｇ舰浜嗐€?/p>

JavaScript 浠庤癁鐢熻捣灏辨槸鍗曠嚎绋嬶紝鍘熷洜澶ф鏄笉鎯宠娴忚鍣ㄥ彉寰楀お澶嶆潅锛屽洜涓哄绾跨▼闇€瑕佸叡浜祫婧愩€佷笖鏈夊彲鑳戒慨鏀瑰郊姝ょ殑杩愯缁撴灉锛屽浜庝竴绉嶇綉椤佃剼鏈瑷€鏉ヨ锛岃繖灏卞お澶嶆潅浜嗐€?/p>

鍑嗙‘鐨勬潵璇达紝鎴戣涓?javascript 鐨勫崟绾跨▼鏄寚 JavaScript 寮曟搸鏄崟绾跨▼鐨勶紝JavaScript 鐨勫紩鎿庡苟涓嶆槸鐙珛杩愯鐨勶紝璺ㄥ钩鍙版剰鍛崇潃 JavaScript 渚濊禆鍏惰繍琛岀殑瀹夸富鐜 --- 娴忚鍣?澶ч儴鍒嗘儏鍐典笅鏄祻瑙堝櫒)銆?/p>

娴忚鍣ㄩ渶瑕佹覆鏌?DOM锛孞avaScript 鍙互淇敼 DOM 缁撴瀯锛孞avaScript 鎵ц鏃讹紝娴忚鍣?DOM 娓叉煋鍋滄銆傚鏋?JavaScript 寮曟搸绾跨▼涓嶆槸鍗曠嚎绋嬬殑锛岄偅涔堝彲浠ュ悓鏃舵墽琛屽娈?JavaScript锛屽鏋滆繖澶氭 JavaScript 閮芥搷浣?DOM锛岄偅涔堝氨浼氬嚭鐜?DOM 鍐茬獊銆?/p>

涓句釜渚嬪瓙鏉ヨ锛屽湪鍚屼竴鏃跺埢鎵ц涓や釜 script 瀵瑰悓涓€涓?DOM 鍏冪礌杩涜鎿嶄綔锛屼竴涓慨鏀?DOM锛屼竴涓垹闄?DOM锛岄偅杩欐牱璇濇祻瑙堝櫒灏变細鎳甸€间簡锛屽畠灏变笉鐭ラ亾鍒板簳璇ュ惉璋佺殑锛屼細鏈夎祫婧愮珵浜夛紝杩欎篃鏄?JavaScript 鍗曠嚎绋嬬殑鍘熷洜涔嬩竴銆?/p>

涓夈€佹祻瑙堝櫒

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

涔嬪墠璇磋繃锛孞avaScript 杩愯鐨勫涓荤幆澧冩祻瑙堝櫒鏄绾跨▼鐨勩€?/p>

浠?Chrome 鏉ヨ锛屾垜浠彲浠ラ€氳繃 Chrome 鐨勪换鍔＄鐞嗗櫒鏉ョ湅鐪嬨€?/p>

Chrome浠诲姟绠＄悊鍣?

褰撲綘鎵撳紑涓€涓?Tab 椤甸潰鐨勬椂鍊欙紝灏卞垱寤轰簡涓€涓繘绋嬨€傚鏋滀粠涓€涓〉闈㈡墦寮€浜嗗彟涓€涓〉闈紝鎵撳紑鐨勯〉闈㈠拰褰撳墠鐨勯〉闈㈠睘浜庡悓涓€绔欑偣鐨勮瘽锛岄偅涔堣繖涓〉闈細澶嶇敤鐖堕〉闈㈢殑娓叉煋杩涚▼銆?/p>

娴忚鍣ㄤ富绾跨▼甯搁┗绾跨▼

1. GUI 娓叉煋绾跨▼
• 缁樺埗椤甸潰锛岃В鏋?html銆丆SS锛屾瀯寤?DOM 鏍戯紝甯冨眬鍜岀粯鍒剁瓑
• 椤甸潰閲嶇粯鍜屽洖娴?
• 涓?JS 寮曟搸绾跨▼浜掓枼锛屼篃灏辨槸鎵€璋撶殑 JS 鎵ц闃诲椤甸潰鏇存柊
2. JS 寮曟搸绾跨▼
• 璐熻矗 JS 鑴氭湰浠ｇ爜鐨勬墽琛?
• 璐熻矗鍑嗘墽琛屽噯澶囧ソ寰呮墽琛岀殑浜嬩欢锛屽嵆瀹氭椂鍣ㄨ鏁扮粨鏉燂紝鎴栧紓姝ヨ姹傛垚鍔熷苟姝ｇ‘杩斿洖鐨勪簨浠?
• 涓?GUI 娓叉煋绾跨▼浜掓枼锛屾墽琛屾椂闂磋繃闀垮皢闃诲椤甸潰鐨勬覆鏌?
3. 浜嬩欢瑙﹀彂绾跨▼
• 璐熻矗灏嗗噯澶囧ソ鐨勪簨浠朵氦缁?JS 寮曟搸绾跨▼鎵ц
• 澶氫釜浜嬩欢鍔犲叆浠诲姟闃熷垪鐨勬椂鍊欓渶瑕佹帓闃熺瓑寰?JS 鐨勫崟绾跨▼)
4. 瀹氭椂鍣ㄨЕ鍙戠嚎绋?
• 璐熻矗鎵ц寮傛鐨勫畾鏃跺櫒绫荤殑浜嬩欢锛屽 setTimeout銆乻etInterval
• 瀹氭椂鍣ㄥ埌鏃堕棿涔嬪悗鎶婃敞鍐岀殑鍥炶皟鍔犲埌浠诲姟闃熷垪鐨勯槦灏?
5. HTTP 璇锋眰绾跨▼
• 璐熻矗鎵ц寮傛璇锋眰
• 涓荤嚎绋嬫墽琛屼唬鐮侀亣鍒板紓姝ヨ姹傜殑鏃跺€欎細鎶婂嚱鏁颁氦缁欒绾跨▼澶勭悊锛屽綋鐩戝惉鍒扮姸鎬佸彉鏇翠簨浠讹紝濡傛灉鏈夊洖璋冨嚱鏁帮紝璇ョ嚎绋嬩細鎶婂洖璋冨嚱鏁板姞鍏ュ埌浠诲姟闃熷垪鐨勯槦灏剧瓑寰呮墽琛?

杩欓噷娌＄湅鎳傛病鍏崇郴锛屽悗闈㈡垜浼氬啀璇淬€?/p>

鍥涖€佹祻瑙堝櫒绔殑 Event Loop

鐪嬪埌杩欓噷锛屾€荤畻鏄繘鍏ユ棰樹簡锛屽厛璁茶娴忚鍣ㄧ鐨?Event Loop 鏄粈涔堟牱鐨勩€?/p>

JS杩愯鏈哄埗鍥?

涓婂浘鏄竴寮?JS 鐨勮繍琛屾満鍒跺浘锛孞s 杩愯鏃跺ぇ鑷翠細鍒嗕负鍑犱釜閮ㄥ垎锛?/p>

1. Call Stack锛氳皟鐢ㄦ爤(鎵ц鏍?锛屾墍鏈夊悓姝ヤ换鍔″湪涓荤嚎绋嬩笂鎵ц锛屽舰鎴愪竴涓墽琛屾爤锛屽洜涓?JS 鍗曠嚎绋嬬殑鍘熷洜锛屾墍浠ヨ皟鐢ㄦ爤涓瘡娆″彧鑳芥墽琛屼竴涓换鍔★紝褰撻亣鍒扮殑鍚屾浠诲姟鎵ц瀹屼箣鍚庯紝鐢变换鍔￠槦鍒楁彁渚涗换鍔＄粰璋冪敤鏍堟墽琛屻€?
2. Task Queue锛氫换鍔￠槦鍒楋紝瀛樻斁鐫€寮傛浠诲姟锛屽綋寮傛浠诲姟鍙互鎵ц鐨勬椂鍊欙紝浠诲姟闃熷垪浼氶€氱煡涓荤嚎绋嬶紝鐒跺悗璇ヤ换鍔′細杩涘叆涓荤嚎绋嬫墽琛屻€備换鍔￠槦鍒椾腑鐨勯兘鏄凡缁忓畬鎴愮殑寮傛鎿嶄綔锛岃€屼笉鏄娉ㄥ唽涓€涓紓姝ヤ换鍔″氨浼氳鏀惧湪杩欎釜浠诲姟闃熷垪涓€?

璇村埌杩欓噷锛孍vent Loop 涔熷彲浠ョ悊瑙ｄ负锛氫笉鏂湴浠庝换鍔￠槦鍒椾腑鍙栧嚭浠诲姟鎵ц鐨勪竴涓繃绋嬨€?/p>

鍚屾浠诲姟鍜屽紓姝ヤ换鍔?/h2>

涓婃枃宸茬粡璇磋繃浜?JavaScript 鏄竴闂ㄥ崟绾跨▼鐨勮瑷€锛屼竴娆″彧鑳芥墽琛屼竴涓换鍔★紝濡傛灉鎵€鏈夌殑浠诲姟閮芥槸鍚屾浠诲姟锛岄偅涔堢▼搴忓彲鑳藉洜涓虹瓑寰呬細鍑虹幇鍋囨鐘舵€侊紝杩欏浜庝竴涓敤鎴蜂綋楠屽緢寮虹殑璇█鏉ヨ鏄潪甯镐笉鍙嬪ソ鐨勩€?/p>

姒傚康

绠€鍗曠殑浠嬬粛涓€涓嬪悓姝ヤ换鍔″拰寮傛浠诲姟鐨勬蹇点€?/p>

1. 鍚屾浠诲姟锛氬繀椤荤瓑鍒扮粨鏋滄潵浜嗕箣鍚庢墠鑳藉仛鍏朵粬鐨勪簨鎯咃紝涓句緥鏉ヨ灏辨槸浣犵儳姘寸殑鏃跺€欎竴鐩寸瓑鍦ㄦ按澹舵梺杈圭瓑姘寸儳寮€锛屾湡闂翠笉鍋氬叾浠栫殑浠讳綍浜嬫儏銆?
2. 寮傛浠诲姟锛氫笉闇€瑕佺瓑鍒扮粨鏋滄潵浜嗘墠鑳界户缁線涓嬭蛋锛岀瓑缁撴灉鏈熼棿鍙互鍋氬叾浠栫殑浜嬫儏锛岀粨鏋滄潵浜嗕細鏀跺埌閫氱煡銆備妇渚嬫潵璇村氨鏄綘鐑ф按鐨勬椂鍊欏彲浠ュ幓鍋氳嚜宸辨兂鍋氱殑浜嬫儏锛屽惉鍒版按鐑у紑鐨勫０闊充箣鍚庡啀鍘诲鐞嗐€?

浠庢蹇靛氨鍙互鐪嬪嚭鏉ワ紝寮傛浠诲姟浠庝竴瀹氱▼搴︿笂鏉ョ湅姣斿悓姝ヤ换鍔℃洿楂樻晥涓€浜涳紝鏍稿績鏄彁楂樹簡鐢ㄦ埛浣撻獙銆?/p>

Event Loop

Event Loop 寰堝ソ鐨勮皟搴︿簡浠诲姟鐨勮繍琛岋紝瀹忎换鍔″拰寰换鍔′篃鐭ラ亾浜嗭紝鐜板湪鎴戜滑灏辨潵鐪嬬湅瀹冪殑璋冨害杩愯鏈哄埗銆?/p>

JavaScript 鐨勪唬鐮佹墽琛屾椂锛屼富绾跨▼浼氫粠涓婂埌涓嬩竴姝ユ鐨勬墽琛屼唬鐮侊紝鍚屾浠诲姟浼氳渚濇鍔犲叆鎵ц鏍堜腑鍏堟墽琛岋紝寮傛浠诲姟浼氬湪鎷垮埌缁撴灉鐨勬椂鍊欏皢娉ㄥ唽鐨勫洖璋冨嚱鏁版斁鍏ヤ换鍔￠槦鍒楋紝褰撴墽琛屾爤涓殑娌℃湁浠诲姟鍦ㄦ墽琛岀殑鏃跺€欙紝寮曟搸浼氫粠浠诲姟闃熷垪涓鍙栦换鍔″帇鍏ユ墽琛屾爤(Call Stack)涓鐞嗘墽琛屻€?/p>

瀹忎换鍔″拰寰换鍔?span class="mq-110">

鐜板湪灏辨湁涓€涓棶棰樹簡锛屼换鍔￠槦鍒楁槸涓€涓秷鎭槦鍒楋紝鍏堣繘鍏堝嚭锛岄偅灏辨槸璇达紝鍚庢潵鐨勪簨浠堕兘鏄鍔犲湪闃熷熬绛夊埌鍓嶉潰鐨勪簨浠舵墽琛屽畬浜嗘墠浼氳鎵ц銆傚鏋滃湪鎵ц鐨勮繃绋嬩腑绐佺劧鏈夐噸瑕佺殑鏁版嵁闇€瑕佽幏鍙栵紝鎴栨槸璇存湁浜嬩欢绐佺劧闇€瑕佸鐞嗕竴涓嬶紝鎸夌収闃熷垪鐨勫厛杩涘厛鍑洪『搴忚繖浜涙槸鏃犳硶寰楀埌鍙婃椂澶勭悊鐨勩€傝繖涓椂鍊欏氨鍌敓浜嗗畯浠诲姟鍜屽井浠诲姟锛屽井浠诲姟浣垮緱涓€浜涘紓姝ヤ换鍔″緱鍒板強鏃剁殑澶勭悊銆?/p>

鏇剧粡鐪嬪埌鐨勪竴涓緥瀛愬緢濂斤紝瀹忎换鍔″拰寰换鍔″舰璞＄殑鏉ヨ灏辨槸锛氫綘鍘昏惀涓氬巺鍔炰竴涓笟鍔′細鏈変竴涓帓闃熷彿鐮侊紝褰撳彨鍒颁綘鐨勫彿鐮佺殑鏃跺€欎綘鍘荤獥鍙ｅ姙鍏呭€间笟鍔?瀹忎换鍔℃墽琛?锛屽湪浣犲姙鐞嗗厖鍊肩殑鏃跺€欎綘鍙堟兂鏀逛釜濂楅(寰换鍔?锛岃繖涓椂鍊欏伐浣滀汉鍛樹細鐩存帴甯綘鍔烇紝涓嶅彲鑳借浣犻噸鏂版帓闃熴€?/p>

鎵€浠ヤ笂鏂囪杩囩殑寮傛浠诲姟鍙堝垎涓哄畯浠诲姟鍜屽井浠诲姟锛孞S 杩愯鏃朵换鍔￠槦鍒椾細鍒嗕负瀹忎换鍔￠槦鍒楀拰寰换鍔￠槦鍒楋紝鍒嗗埆瀵瑰簲瀹忎换鍔″拰寰换鍔°€?/p>

鍏堜粙缁嶄竴涓?娴忚鍣ㄧ幆澧冪殑)瀹忎换鍔″拰寰换鍔″ぇ鑷存湁鍝簺锛?/p>

• 瀹忎换鍔★細
1. script(鏁翠綋鐨勪唬鐮?
2. setTimeout
3. setInterval
4. I/O 鎿嶄綔
5. UI 娓叉煋 (瀵硅繖涓瑪鑰呮寔淇濈暀鎰忚)
• 寰换鍔★細
1. Promise.then
2. MutationObserver

浜嬩欢杩愯椤哄簭

1. 鎵ц鍚屾浠诲姟锛屽悓姝ヤ换鍔′笉闇€瑕佸仛鐗规畩澶勭悊锛岀洿鎺ユ墽琛?涓嬮潰鐨勬楠や腑閬囧埌鍚屾浠诲姟閮芥槸涓€鏍峰鐞? --- 绗竴杞粠 script寮€濮?
2. 浠庡畯浠诲姟闃熷垪涓彇鍑洪槦澶翠换鍔℃墽琛?
3. 濡傛灉浜х敓浜嗗畯浠诲姟锛屽皢瀹忎换鍔℃斁鍏ュ畯浠诲姟闃熷垪锛屼笅娆¤疆寰殑鏃跺€欐墽琛?
4. 濡傛灉浜х敓浜嗗井浠诲姟锛屽皢寰换鍔℃斁鍏ュ井浠诲姟闃熷垪
5. 鎵ц瀹屽綋鍓嶅畯浠诲姟涔嬪悗锛屽彇鍑哄井浠诲姟闃熷垪涓殑鎵€鏈変换鍔′緷娆℃墽琛?
6. 濡傛灉寰换鍔℃墽琛岃繃绋嬩腑浜х敓浜嗘柊鐨勫井浠诲姟锛屽垯缁х画鎵ц寰换鍔★紝鐩村埌寰换鍔＄殑闃熷垪涓虹┖
7. 杞惊锛屽惊鐜互涓?2 - 6

鎬荤殑鏉ヨ灏辨槸锛氬悓姝ヤ换鍔?瀹忎换鍔?-> 鎵ц浜х敓鐨勬墍鏈夊井浠诲姟(鍖呮嫭寰换鍔′骇鐢熺殑寰换鍔? -> 鍚屾浠诲姟/瀹忎换鍔?-> 鎵ц浜х敓鐨勬墍鏈夊井浠诲姟(鍖呮嫭寰换鍔′骇鐢熺殑寰换鍔? -> 寰幆......

娉ㄦ剰锛氬井浠诲姟闃熷垪

涓句釜鏍楀瓙

鍏夎涓嶇粌鍋囨妸寮忥紝鐜板湪灏辨潵鐪嬩竴涓緥瀛愶細

涓句釜鏍楀瓙

鏀惧浘鐨勫師鍥犳槸涓轰簡璁╁ぇ瀹跺湪鐪嬭В鏋愪箣鍓嶅彲浠ュ厛鑷繁鎸夌収杩愯椤哄簭璧颁竴閬嶏紝鍐欏ソ绛旀涔嬪悗鍐嶆潵鐪嬭В鏋愩€?br>瑙ｆ瀽锛?br>(鐢ㄧ豢鑹茬殑琛ㄧず鍚屾浠诲姟鍜屽畯浠诲姟锛岀孩鑹茶〃绀哄井浠诲姟)

+ console.log('script start')
+ setTimeout(function() {
+ console.log('setTimeout')
+ }, 0)
+ new Promise((resolve, reject)=>{
+ console.log("promise1")
+ resolve()
+ })
- .then(()=>{
- console.log("then11")
+ new Promise((resolve, reject)=>{
+ console.log("promise2")
+ resolve();
+ })
- .then(() => {
- console.log("then2-1")
- })
- .then(() => {
- console.log("then2-2")
- })
- })
- .then(()=>{
- console.log("then12")
- })
+ console.log('script end')

1. 棣栧厛閬囧埌 console.log()锛岃緭鍑? script start
2. 閬囧埌 setTimeout 浜х敓瀹忎换鍔★紝娉ㄥ唽鍒? 瀹忎换鍔￠槦鍒梉setTimeout]锛屼笅涓€杞?Event Loop 鐨勬椂鍊欏湪鎵ц
3. 鐒跺悗閬囧埌 new Promise 鏋勯€犲０鏄?鍚屾)锛宭og 杈撳嚭 promise1锛岀劧鍚?resolve
4. resolve 鍖归厤鍒? promise1 鐨勭涓€涓?then锛屾妸杩欎釜 then 娉ㄥ唽鍒? 寰换鍔￠槦鍒梉then11]涓?/strong>锛岀户缁綋鍓嶆暣浣撹剼鏈殑鎵ц
5. 閬囧埌鏈€鍚庣殑涓€涓?log锛岃緭鍑? script end锛? 褰撳墠鎵ц鏍堟竻绌?/strong>
6. 浠庡井浠诲姟闃熷垪涓彇鍑洪槦澶翠换鍔?then11' 杩涜鎵ц锛屽叾涓湁涓€涓?log锛岃緭鍑? then11
7. 寰€涓嬮亣鍒?new Promise 鏋勯€犲０鏄?鍚屾)锛宭og 杈撳嚭 promise2锛岀劧鍚?resolve
8. resolve 鍖归厤鍒? promise2 鐨勭涓€涓?then锛屾妸杩欎釜 then 娉ㄥ唽鍒? 寰换鍔￠槦鍒梉then2-1]锛屽綋鍓?then11 鍙墽琛岄儴鍒嗙粨鏉燂紝鐒跺悗浜х敓浜? promise1 鐨勭浜屼釜 then锛屾妸杩欎釜 then 娉ㄥ唽鍒? 寰换鍔￠槦鍒梉then2-1, then12]
9. 鎷垮嚭寰换鍔￠槦澶翠换鍔?then2-1' 鎵ц锛宭og 杈撳嚭 then2-1锛岃Е鍙? promise2 鐨勭浜屼釜 then锛屾敞鍐屽埌 寰换鍔￠槦鍒梉then12, then2-2]
10. 鎷垮嚭寰换鍔￠槦澶翠换鍔?then12'锛宭og 杈撳嚭 then12
11. 鎷垮嚭寰换鍔￠槦澶翠换鍔?then2-2'锛宭og 杈撳嚭 then2-2
12. 寰换鍔￠槦鍒楁墽琛屽畬姣曪紝鍒繕浜嗗畯浠诲姟闃熷垪涓殑 setTimeout锛宭og 杈撳嚭 setTimeout

缁忚繃浠ヤ笂涓€鐣紲(xia)瀵?gao)鍒嗘瀽锛屽笇鏈涙病鏈夌粫鏅曚綘锛屾渶鍚庣殑杈撳嚭缁撴灉灏辨槸锛?br>script start -> promise1 -> script end -> then11 -> promise2 -> then2-1 -> then12 -> then2-2 -> setTimeout

瀹忎换鍔★紵寰换鍔★紵

涓嶇煡閬撳ぇ瀹剁湅浜嗗畯浠诲姟鍜屽井浠诲姟涔嬪悗浼氫笉浼氭湁涓€涓枒鎯戯紝瀹忎换鍔″拰寰换鍔￠兘鏄紓姝ヤ换鍔★紝寰换鍔′箣鍓嶈杩囦簡鏄负浜嗗強鏃惰В鍐充竴浜涘繀瑕佷簨浠惰€屼骇鐢熺殑銆?/p>

• 涓轰粈涔堣鏈夊井浠诲姟锛?br>涓轰粈涔堣鏈夊井浠诲姟鐨勫師鍥犲墠闈㈠凡缁忚浜嗭紝杩欓噷灏变笉鍐嶈禈杩帮紝绠€鍗曡涓€涓嬪氨鏄负浜嗗強鏃跺鐞嗕竴浜涗换鍔★紝涓嶇劧绛夊埌鏈€鍚庡啀鎵ц鐨勬椂鍊欐嬁鍒扮殑鏁版嵁鍙兘宸茬粡鏄姹℃煋鐨勬暟鎹揪涓嶅埌棰勬湡鐩爣浜嗐€?/p>

• 鏄粈涔堝畯浠诲姟锛熶粈涔堟槸寰换鍔★紵
  鐩镐俊澶у鍦ㄥ涔?Event Loop 鏌ユ壘璧勬枡鐨勬椂鍊欙紝鑲畾鍚勭璧勬枡閲岄潰閮戒細璁插埌瀹忎换鍔″拰寰换鍔★紝浣嗘槸涓嶇煡閬撲綘鏈夋病鏈夌伒榄傛嫹闂繃浣犺嚜宸憋細浠€涔堟槸瀹忎换鍔★紵浠€涔堟槸寰换鍔★紵鎬庝箞鍖哄垎瀹忎换鍔″拰寰换鍔★紵涓嶈兘鍙槸榛樿鎺ュ彈杩欎釜姒傚康锛屽湪杩欓噷锛屾垜鏍规嵁鎴戠殑涓汉鐞嗚В杩涜涓€鐣(hu)鏄?che)

• 瀹忎换鍔″拰寰换鍔＄殑鐪熼潰鐩?br>鍏跺疄鍦?Chrome 鐨勬簮鐮佷腑骞舵病鏈変粈涔堝畯浠诲姟鍜屽井浠诲姟鐨勪唬鐮佹垨鏄鏄庯紝鍦?JS 澶т細^[3]涓婃彁鍒拌繃寰换鍔¤繖涓悕璇嶏紝浣嗘槸涔熸病鏈夎鍒板簳浠€涔堟槸寰换鍔°€?/p>

  瀹忎换鍔?br>鏂囩珷鏈€寮€濮嬬殑鏃跺€欒杩囷紝鍦?chrome 閲岋紝姣忎釜椤甸潰閮藉搴斾竴涓繘绋嬨€傝€岃杩涚▼鍙堟湁澶氫釜绾跨▼锛屾瘮濡?JS 绾跨▼銆佹覆鏌撶嚎绋嬨€両O 绾跨▼銆佺綉缁滅嚎绋嬨€佸畾鏃跺櫒绾跨▼绛夌瓑锛岃繖浜涚嚎绋嬩箣闂寸殑閫氫俊鏄€氳繃鍚戝璞＄殑浠诲姟闃熷垪涓坊鍔犱竴涓换鍔★紙postTask锛夋潵瀹炵幇鐨勩€?span class="mq-228">瀹忎换鍔＄殑鏈川鍙互璁や负鏄绾跨▼浜嬩欢寰幆鎴栨秷鎭惊鐜紝涔熷氨鏄嚎绋嬮棿閫氫俊鐨勪竴涓秷鎭槦鍒椼€?/strong>

  灏辨嬁 setTimeout 涓句緥鏉ヨ锛屽綋閬囧埌瀹冪殑鏃跺€欙紝娴忚鍣ㄥ氨浼氬 Event Loop 璇达細鍢匡紝鎴戞湁涓€涓换鍔′氦缁欎綘锛孍vent Loop 灏变細璇达細濂界殑锛屾垜浼氭妸瀹冨姞鍒版垜鐨?todoList 涓紝涔嬪悗鎴戜細鎵ц瀹冿紝瀹冩槸闇€瑕佽皟鐢?API 鐨勩€?/p>

  瀹忎换鍔＄殑鐪熼潰鐩槸娴忚鍣ㄦ淳鍙戯紝涓?JS 寮曟搸鏃犲叧鐨勶紝鍙備笌浜?Event Loop 璋冨害鐨勪换鍔?/strong>

  寰换鍔?br>寰换鍔℃槸鍦ㄨ繍琛屽畯浠诲姟/鍚屾浠诲姟鐨勬椂鍊欎骇鐢熺殑锛屾槸灞炰簬褰撳墠浠诲姟鐨勶紝鎵€浠ュ畠涓嶉渶瑕佹祻瑙堝櫒鐨勬敮鎸侊紝鍐呯疆鍦?JS 褰撲腑锛岀洿鎺ュ湪 JS 鐨勫紩鎿庝腑灏辫鎵ц鎺変簡銆?/p>

鐗规畩鐨勭偣

1. async 闅愬紡杩斿洖 Promise 浣滀负缁撴灉

2. 鎵ц瀹?await 涔嬪悗鐩存帴璺冲嚭 async 鍑芥暟锛岃鍑烘墽琛岀殑鎵€鏈夋潈

3. 褰撳墠浠诲姟鐨勫叾浠栦唬鐮佹墽琛屽畬涔嬪悗鍐嶆鑾峰緱鎵ц鏉冭繘琛屾墽琛?/p>

4. 绔嬪嵆 resolve 鐨?Promise 瀵硅薄锛屾槸鍦ㄦ湰杞?浜嬩欢寰幆"鐨勭粨鏉熸椂鎵ц锛岃€屼笉鏄湪涓嬩竴杞?浜嬩欢寰幆"鐨勫紑濮嬫椂

鍐嶄妇涓牀瀛?span class="mq-247">

  console.log('script start')

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

  setTimeout(function() {
      console.log('setTimeout')
  }, 0)

  new Promise(resolve => {
      console.log('Promise')
      resolve()
  })
  .then(function() {
      console.log('promise1')
  })
  .then(function() {
      console.log('promise2')
  })

  console.log('script end')

鎸夌収涔嬪墠鐨勫垎鏋愭柟娉曞幓鍒嗘瀽涔嬪悗灏变細寰楀嚭涓€涓粨鏋滐細
script start => async2 end => Promise => script end => promise1 => promise2 => async1 end => setTimeout

鍙互鐪嬪嚭 async1 鍑芥暟鑾峰彇鎵ц鏉冩槸浣滀负寰换鍔＄殑闃熷熬锛屼絾鏄紝鍦?Chrome73(閲戜笣闆€) 鐗堟湰涔嬪悗锛宎sync 鐨勬墽琛屼紭鍖栦簡锛屽畠浼氬湪 promise1 鍜?promise2 鐨勮緭鍑轰箣鍓嶆墽琛屻€傜瑪鑰呭ぇ姒備簡瑙ｄ簡涓€涓嬪簲璇ユ槸鐢?PromiseResolve 瀵?await 杩涜浜嗕紭鍖栵紝鍑忓皯浜?Promise 鐨勫啀娆″垱寤猴紝鏈夊叴瓒ｇ殑灏忎紮浼村彲浠ョ湅鐪?Chrome 鐨勬簮鐮併€?/p>

浜斻€丯ode 涓殑 Event Loop

Node 涓篃鏈夊畯浠诲姟鍜屽井浠诲姟锛屼笌娴忚鍣ㄤ腑鐨勪簨浠跺惊鐜被浼笺€侼ode 涓庢祻瑙堝櫒浜嬩欢寰幆涓嶅悓锛屽叾涓湁澶氫釜瀹忎换鍔￠槦鍒楋紝鑰屾祻瑙堝櫒鏄彧鏈変竴涓畯浠诲姟闃熷垪銆?/p>

Node 鐨勬灦鏋勫簳灞傛槸鏈?libuv锛屽畠鏄?Node 鑷韩鐨勫姩鍔涙潵婧愪箣涓€锛岄€氳繃瀹冨彲浠ュ幓璋冪敤涓€浜涘簳灞傛搷浣滐紝Node 涓殑 Event Loop 鍔熻兘灏辨槸鍦?libuv 涓皝瑁呭疄鐜扮殑銆?/p>

瀹忎换鍔″拰寰换鍔?/h2>

Node 涓殑瀹忎换鍔″拰寰换鍔″湪娴忚鍣ㄧ鐨?JS 鐩告瘮澧炲姞浜嗕竴浜涳紝杩欓噷鍙垪鍑烘祻瑙堝櫒绔病鏈夌殑锛?/p>

• 瀹忎换鍔?
1. setImmediate
• 寰换鍔?
1. process.nextTick

浜嬩欢寰幆鏈哄埗鐨勫叚涓樁娈?/h2>

鍏釜闃舵

Node 鐨勪簨浠跺惊鐜垎鎴愪簡鍏釜闃舵锛屾瘡涓樁娈靛搴斾竴涓畯浠诲姟闃熷垪锛岀浉褰撲簬鏄畯浠诲姟杩涜浜嗕竴涓垎绫汇€?/p>

1. timers(璁℃椂鍣?
   鎵ц setTimeout 浠ュ強 setInterval 鐨勫洖璋?
2. I/O callbacks
   澶勭悊缃戠粶銆佹祦銆乀CP 鐨勯敊璇洖璋?
3. idel, prepare --- 闂茬疆闃舵
   node 鍐呴儴浣跨敤
4. poll(杞惊)
   鎵ц poll 涓殑 I/O 闃熷垪锛屾鏌ュ畾鏃跺櫒鏄惁鍒版椂闂?
5. check(妫€鏌?
   瀛樻斁 setImmediate 鍥炶皟
6. close callbacks
   鍏抽棴鍥炶皟锛屼緥濡?sockect.on('close')

杞惊椤哄簭

鎵ц鐨勮疆寰『搴?--- 姣忎釜闃舵閮借绛夊搴旂殑瀹忎换鍔￠槦鍒楁墽琛屽畬姣曟墠浼氳繘鍏ュ埌涓嬩竴涓樁娈电殑瀹忎换鍔￠槦鍒?/p>

1. timers
2. I/O callbacks
3. poll
4. setImmediate
5. close events

姣忎袱涓樁娈典箣闂存墽琛屽井浠诲姟闃熷垪

Event Loop 杩囩▼

1. 鎵ц鍏ㄥ眬鐨?script 鍚屾浠ｇ爜
2. 鎵ц寰换鍔￠槦鍒楋紝鍏堟墽琛屾墍鏈?Next Tick 闃熷垪涓殑鎵€鏈変换鍔★紝鍐嶆墽琛屽叾浠栫殑寰换鍔￠槦鍒椾腑鐨勬墍鏈変换鍔?
3. 寮€濮嬫墽琛屽畯浠诲姟锛屽叡鍏釜闃舵锛屼粠绗竴涓樁娈靛紑濮嬫墽琛岃嚜宸卞畯浠诲姟闃熷垪涓殑鎵€鏈変换鍔?娴忚鍣ㄦ槸浠庡畯浠诲姟闃熷垪涓彇绗竴涓墽琛岋紒锛?
4. 姣忎釜闃舵鐨勫畯浠诲姟鎵ц瀹屾瘯涔嬪悗锛屽紑濮嬫墽琛屽井浠诲姟
5. TimersQueue -> 姝ラ2 -> I/O Queue -> 姝ラ2 -> Check Queue -> 姝ラ2 -> Close Callback Queue -> 姝ラ2 -> TimersQueue ...

杩欓噷瑕佹敞鎰忕殑鏄紝nextTick 浜嬩欢鏄竴涓崟鐙殑闃熷垪锛屽畠鐨勪紭鍏堢骇浼氶珮浜庡井浠诲姟锛屾墍浠ュ湪褰撳墠瀹忎换鍔?鍚屾浠诲姟鎵ц瀹屾垚涔嬪悗锛屼細鍏堟墽琛?nextTick 闃熷垪涓殑鎵€鏈変换鍔★紝鍐嶅幓鎵ц寰换鍔￠槦鍒椾腑鐨勬墍鏈変换鍔°€?/p>

setTimeout 鍜?setImmediate

鍦ㄨ繖閲岃鍗曠嫭璇翠竴涓?setTimeout 鍜?setImmediate锛宻etTimeout 瀹氭椂鍣ㄥ緢鐔熸倝锛岄偅灏辫璇?setImmediate

setImmediate() 鏂规硶鐢ㄤ簬鎶婁竴浜涢渶瑕侀暱鏃堕棿杩愯鐨勬搷浣滄斁鍦ㄤ竴涓洖璋冨嚱鏁伴噷锛屽苟鍦ㄦ祻瑙堝櫒瀹屾垚鍏朵粬鎿嶄綔锛堝浜嬩欢鍜屾樉绀烘洿鏂帮級鍚庣珛鍗宠繍琛屽洖璋冨嚱鏁般€備粠瀹氫箟鏉ョ湅灏辨槸涓轰簡闃叉涓€浜涜€楁椂闀跨殑鎿嶄綔闃诲鍚庨潰鐨勬搷浣滐紝杩欎篃鏄负浠€涔?check 闃舵杩愯椤哄簭鎺掔殑姣旇緝鍚庛€?/p>

涓句釜鏍楀瓙

鎴戜滑鏉ョ湅杩欐牱鐨勪竴涓緥瀛愶細

setTimeout(() => {
  console.log('setTimeout')
}, 0)

setImmediate(() => {
  console.log('setImmediate')
})

杩欓噷娑夊強 timers 闃舵鍜?check 闃舵锛屾寜鐓т笂闈㈢殑杩愯椤哄簭鏉ヨ锛宼imers 闃舵鏄湪绗竴涓墽琛岀殑锛屼細鏃╀簬 check 闃舵銆傝繍琛岃繖娈电▼搴忓彲浠ョ湅鍒板涓嬬殑缁撴灉锛?/p>

鍙槸鍐嶅杩愯鍑犳锛屼綘灏变細鐪嬪埌濡備笅鐨勭粨鏋滐細

setImmediate 鐨勮緭鍑鸿窇鍒?setTimeout 鍓嶉潰鍘讳簡锛岃繖鏃跺€欏氨鏄細灏忔湅鍙嬩綘鏄惁鏈夊緢澶氱殑闂彿鉂?/p>

鍒嗘瀽

鎴戜滑鏉ュ垎鏋愪竴涓嬪師鍥狅紝timers 闃舵纭疄鏄湪 check 闃舵涔嬪墠锛屼絾鏄湪 timers 闃舵鏃跺€欙紝杩欓噷鐨?setTimeout 鐪熺殑鍒颁簡鎵ц鐨勬椂闂村悧锛?/p>

杩欓噷灏辫鍏堢湅鐪?setTiemout(fn, 0)锛岃繖涓鍙ョ殑鎰忔€濅笉鏄寚涓嶅欢杩熺殑鎵ц锛岃€屾槸鎸囧湪鍙互鎵ц setTimeout 鐨勬椂鍊欏氨绔嬪嵆鎵ц瀹冪殑鍥炶皟锛屼篃灏辨槸澶勭悊瀹屽綋鍓嶄簨浠剁殑鏃跺€欑珛鍗虫墽琛屽洖璋冦€?/p>

鍦?Node 涓?setTimeout 绗簩涓椂闂村弬鏁扮殑鏈€灏忓€兼槸 1ms锛屽皬浜?1ms 浼氳鍒濆鍖栦负 1(娴忚鍣ㄤ腑鏈€灏忓€兼槸 4ms)锛屾墍浠ュ湪杩欓噷 setTimeout(fn, 0) === setTimeout(fn, 1)

setTimeout 鐨勫洖璋冨嚱鏁板湪 timers 闃舵鎵ц锛宻etImmediate 鐨勫洖璋冨嚱鏁板湪 check 闃舵鎵ц锛孍vent Loop 鐨勫紑濮嬩細鍏堟鏌?timers 闃舵锛屼絾鏄湪浠ｇ爜寮€濮嬭繍琛屼箣鍓嶅埌 timers 闃舵(浠ｇ爜鐨勫惎鍔ㄣ€佽繍琛?浼氭秷鑰椾竴瀹氱殑鏃堕棿锛屾墍浠ヤ細鍑虹幇涓ょ鎯呭喌锛?/p>

1. timers 鍓嶇殑鍑嗗鏃堕棿瓒呰繃 1ms锛屾弧瓒?loop -> timers >= 1锛宻etTimeout 鐨勬椂閽熷懆鏈熷埌浜嗭紝鍒欐墽琛?timers 闃舵(setTimeout)鐨勫洖璋冨嚱鏁?/p>

2. timers 鍓嶇殑鍑嗗鏃堕棿灏忎簬 1ms锛岃繕娌″埌 setTimeout 棰勮鐨勬椂闂达紝鍒欏厛鎵ц check 闃舵(setImmediate)鐨勫洖璋冨嚱鏁帮紝涓嬩竴娆?Event Loop 鍐嶈繘鍏?timers 闃舵鎵ц timer 闃舵(setTimeout)鐨勫洖璋冨嚱鏁?/p>

鏈€寮€濮嬪氨璇翠簡锛屼竴涓紭绉€鐨勭▼搴忓憳瑕佽鑷繁鐨勪唬鐮佹寜鐓ц嚜宸辨兂瑕佺殑椤哄簭杩愯锛屼笅闈㈡垜浠氨鏉ユ帶鍒朵竴涓?setTimeout 鍜?setImediate 鐨勮繍琛屻€?/p>

• 璁?setTimeout 鍏堟墽琛?
  涓婇潰浠ｇ爜杩愯椤哄簭涓嶅悓鏃犻潪灏辨槸鍥犱负 Node 鍑嗗鏃堕棿鐨勪笉纭畾鎬э紝鎴戜滑鍙互鐩存帴鎵嬪姩寤堕暱鍑嗗鏃堕棿馃憞

  const start = Date.now()
  while (Date.now() - start < 10)
  setTimeout(() => {
  console.log('setTimeout')
  }, 0)

  setImmediate(() => {
    console.log('setImmediate')
  })

• 璁?setImmediate 鍏堟墽琛?br>setImmediate 鏄湪 check 闃舵鎵ц锛岀浉瀵逛簬 setTimeout 鏉ヨ鏄湪 timers 闃舵涔嬪悗锛屽彧闇€瑕佹兂鍔炴硶鎶婄▼搴忕殑杩愯鐜鎺у埗鍦?timers 闃舵涔嬪悗灏卞彲浠ヤ簡銆?/p>

  璁╃▼搴忚嚦灏戜粠 I/O callbacks 闃舵寮€濮?--- 鍙互濂椾竴灞傛枃浠惰鍐欐妸鎶婄▼搴忔帶鍒跺湪 I/O callbacks 闃舵鐨勮繍琛岀幆澧冧腑馃憞

const fs = require('fs')

fs.readFile(__dirname, () => {
  setTimeout(() => {
    console.log('setTimeout')
  }, 0)
  
  setImmediate(() => {
    console.log('setImmediate')
  })
})

Node 11.x 鐨勫彉鍖?/h2>

timers 闃舵鐨勬墽琛屾湁鎵€鍙樺寲

setTimeout(() => console.log('timeout1'))
setTimeout(() => {
 console.log('timeout2')
 Promise.resolve().then(() => console.log('promise resolve'))
})

1. node 10 鍙婁箣鍓嶇殑鐗堟湰锛?br>瑕佽€冭檻涓婁竴涓畾鏃跺櫒鎵ц瀹屾垚鏃讹紝涓嬩竴涓畾鏃跺櫒鏄惁鍒版椂闂村姞鍏ヤ簡浠诲姟闃熷垪涓紝濡傛灉鏈埌鏃堕棿锛屽厛鎵ц鍏朵粬鐨勪唬鐮併€?br>姣斿锛?br>timer1 鎵ц瀹屼箣鍚?timer2 鍒颁簡浠诲姟闃熷垪涓紝椤哄簭涓?timer1 -> timer2 -> promise resolve
   timer2 鎵ц瀹屼箣鍚?timer2 杩樻病鍒颁换鍔￠槦鍒椾腑锛岄『搴忎负 timer1 -> promise resolve -> timer2

2. node 11 鍙婂叾涔嬪悗鐨勭増鏈細
   timeout1 -> timeout2 -> promise resolve
   涓€鏃︽墽琛屾煇涓樁娈甸噷鐨勪竴涓畯浠诲姟涔嬪悗灏辩珛鍒绘墽琛屽井浠诲姟闃熷垪锛岃繖鍜屾祻瑙堝櫒绔繍琛屾槸涓€鑷寸殑銆?/p>

灏忕粨

Node 鍜岀娴忚鍣ㄧ鏈変粈涔堜笉鍚?/p>

1. 娴忚鍣ㄧ鐨?Event Loop 鍜?Node.js 涓殑 Event Loop 鏄笉鍚岀殑锛屽疄鐜版満鍒朵篃涓嶄竴鏍?
2. Node.js 鍙互鐞嗚В鎴愭湁4涓畯浠诲姟闃熷垪鍜?涓井浠诲姟闃熷垪锛屼絾鏄墽琛屽畯浠诲姟鏃舵湁6涓樁娈?
3. Node.js 涓檺鍒舵€у叏灞€ script 浠ｇ爜锛屾墽琛屽畬鍚屾浠ｇ爜鍚庯紝鍏堜粠寰换鍔￠槦鍒?Next Tick Queue 涓彇鍑烘墍鏈変换鍔℃斁鍏ヨ皟鐢ㄦ爤鎵ц锛屽啀浠庡叾浠栧井浠诲姟闃熷垪涓彇鍑烘墍鏈変换鍔℃斁鍏ヨ皟鐢ㄦ爤涓墽琛岋紝鐒跺悗寮€濮嬪畯浠诲姟鐨?涓樁娈碉紝姣忎釜闃舵閮藉皢鍏跺畯浠诲姟闃熷垪涓殑鎵€鏈変换鍔￠兘鍙栧嚭鏉ユ墽琛?娴忚鍣ㄦ槸鍙彇绗竴涓墽琛?锛屾瘡涓畯浠诲姟闃舵鎵ц瀹屾瘯涔嬪悗寮€濮嬫墽琛屽井浠诲姟锛屽啀寮€濮嬫墽琛屼笅涓€闃舵瀹忎换鍔★紝浠ユ鏋勬垚浜嬩欢寰幆
4. 瀹忎换鍔″寘鎷?....
5. 寰换鍔″寘鎷?....

鐪嬪埌杩欓噷锛屼綘搴旇瀵规祻瑙堝櫒绔拰 Node 绔殑 Event Loop 鏈変簡涓€瀹氱殑浜嗚В锛岄偅灏辩暀涓€涓鐩€?/p>

涓嶇洿鎺ユ斁浠ｇ爜鏄兂璁╁ぇ瀹跺厛鑷繁鎬濊€冪劧鍚庡湪鏁蹭唬鐮佽繍琛屼竴閬崀

鏈€鍚庡涓€鍢?span class="mq-460">

鏈枃鍒拌繖閲岀畻鏄粨鏉熶簡锛岃繕鏄偅鍙ヨ瘽锛屽仛涓€涓▼搴忓憳瑕佺煡鍏剁劧鏇磋鐭ュ叾鎵€浠ョ劧銆傛垜鍐欎簺鏂囩珷涔熸槸鎯虫妸鐭ヨ瘑杈撳嚭锛屾楠岃嚜宸辨槸涓嶆槸鐪熺殑瀛︽噦浜嗐€傛枃绔犱腑鍙兘杩樺瓨鍦ㄤ竴浜涙病鏈夎娓呮鐨勫湴鏂规垨鑰呮槸鏈夐敊鐨勫湴鏂癸紝娆㈣繋鐩存帴鎸囧嚭~

鎴戞妸鎴戠殑瀛︿範璁板綍閮借褰曞湪浜嗘垜鐨?github 骞朵笖浼氭寔缁殑鏇存柊涓嬪幓锛屾湁鍏磋叮鐨勫皬浼欎即鍙互鐪嬬湅~
github^[4]

鍙傝€冭祫鏂?/span>

[1]

鍗氬閾炬帴: https://tearill.github.io/

[2]

Wikipedia: https://en.wikipedia.org/wiki/Event_loop

[3]

JS 澶т細: https://www.bilibili.com/video/BV1bE411B7ez?t=478

[4]

github: https://github.com/tearill/Reading_Record

             
               
               
             

              
                
                
              

                鍏虫敞銆屽墠绔姞鍔犮€? 绗竴鏃堕棿鑾峰彇浼樿川鏂囩珷.