娴烽様澶╃┖锛屼换楦熼銆傚杺鍠傚杺锛佹垜鏄Е鑹惧痉銆傪煒勫璇诲墠涓嶄箙鍚屼簨鍐欎簡涓€涓乏渚ф嫋鎷借彍鍗曟爮锛屽彲浠ユ敼鍙樿彍鍗曟爮鐨勫搴︼紝浠ヨ幏寰楁洿濂界殑浜や簰浣撻獙銆備絾锛佺編涓笉瓒崇殑鏄鏋滄嫋鍔ㄧ殑鏃跺€欐墜閫熻繃蹇紝浼氶€犳垚鍗′綇鐨勬晥鏋滐紝鐪嬭捣鏉ュ緢涓嶈垝鏈嶃€傜粡杩囦笉鏂殑璋冭瘯锛岀粓浜庝娇鐢╯etTimeout瑙ｅ喅浜嗛棶棰樸€傞偅涔堥棶棰樻潵浜嗭紒涓轰粈涔坰etTimeout鍙互瑙ｅ喅鍔ㄧ敾鍗￠】闂锛熶竴鍥炬姷鍗冭█锛岃鎴戜滑閫氳繃鍓嶅悗涓ゅ紶鍥剧殑瀵规瘮鏉ョ湅鐪嬪疄闄呮晥鏋滃惂锛侊紙鍦ㄥ姞setTimeout涔嬪墠锛屾湁鏄庢樉鐨勫崱椤筐煒旔煒旔煒旓級锛堣繖鏄姞浜唖etTimeout涔嬪悗锛屾嫋鍔ㄦ晥鏋滄槑鏄鹃『鐣呭浜嗮煒侌煒侌煒侊級鍋囪闂锛氫細涓嶄細鏄唴瀹瑰お澶氬鑷寸殑锛燄煒蹭负浜嗚瘉瀹炴垜鐨勭寽鎯筹紝鎴戞妸鍐呭鍒囨崲鍒版洿灏戠殑妯″潡銆傛灉鐒舵嫋鎷芥晥鏋滅灛闂存祦鐣呬簡璁稿馃槅馃槅馃槅杩欐椂鍊欏熀鏈彲浠ョ‘璁ゆ槸鍐呭杩囧瀵艰嚧鐨勫崱椤匡紝閭ｄ箞濡備綍鍦ㄤ笉鏀瑰彉鍐呭澶у皬鐨勬儏鍐典笅淇濊瘉娴佺晠鐨勬嫋鎷芥晥鏋滃憿锛熸彁鍑轰竴涓В鍐虫柟妗堬細鑳戒笉鑳介€氳繃鍑忓皯reflow鐨勬鏁版潵鑺傜渷鎬ц兘锛屼粠鑰屼娇鎷栨嫿椤虹晠锛燄煒蹭负姝わ紝鍙宠竟鍐呭鐨勫搴︽槸鍥哄畾鐨勩€傛嫋鍔ㄨ彍鍗曟椂锛岀敱浜庡彸渚у唴瀹规鐨勫搴﹀凡缁忓浐瀹氾紝鍏冪礌妗嗙殑澶у皬涓嶄細鏀瑰彉锛屾墍浠ヤ笉浼氳Е鍙戝洖娴併€傛灉鐒讹紝鎷栧姩鏁堟灉鍙堥『鐣呭浜嗮煒嗮煒嗮煒嗕粈涔堟槸鍥炴祦鍜岄噸缁橈紵Reflow锛氬綋鎴戜滑瀵笵OM鐨勪慨鏀瑰鑷碊OM鐨勫嚑浣曞昂瀵稿彂鐢熷彉鍖栨椂锛堟瘮濡備慨鏀瑰厓绱犵殑瀹介珮鎴栬€呴殣钘忓厓绱犵瓑锛夛紝娴忚鍣ㄩ渶瑕侀噸鏂拌绠楀厓绱犵殑鍑犱綍灞炴€э紙鍏朵粬鍏冪礌鐨勫嚑浣曞睘鎬у拰浣嶇疆涔熶細鍙楀埌鐩稿簲鐨勫奖鍝嶏級锛岀劧鍚庣粯鍒惰绠楃粨鏋溿€傝繖涓繃绋嬪氨鏄洖娴侊紙涔熷彨閲嶆帓锛夈€傞噸缁橈細褰撴垜浠DOM鐨勪慨鏀瑰鑷存牱寮忔敼鍙樹絾涓嶅奖鍝嶅叾鍑犱綍灞炴€э紙濡備慨鏀归鑹叉垨鑳屾櫙鑹诧級鏃讹紝娴忚鍣ㄤ笉闇€瑕侀噸鏂拌绠楀厓绱犵殑鍑犱綍灞炴€э紝鐩存帴缁樺埗鏂扮殑鐢ㄤ簬鍏冪礌鏍峰紡銆傝繖涓繃绋嬬О涓洪噸缁樸€傜敱姝ゅ彲瑙侊細閲嶇粯涓嶄竴瀹氬鑷村洖娴侊紝鍥炴祦涓€瀹氫細瀵艰嚧閲嶇粯锛侀€氳繃鎺у埗鍐呭鐨勫搴︼紝鍑忓皯鍥炴祦鎿嶄綔纭疄瑙ｅ喅浜嗗崱椤块棶棰橈紝浣嗘槸杩欑鎿嶄綔瀵艰嚧椤甸潰鏃犳硶閫傞厤鍚勭灏哄鐨勫睆骞曘€傞偅涔堟湁娌℃湁鍏朵粬鏂规硶鍙互鍦ㄤ笉鏀瑰彉鍐呭澶у皬鎴栬€呭唴瀹规澶у皬鐨勬儏鍐典笅瑙ｅ喅鎷栨嫿鑿滃崟鐨勯棶棰樺憿锛熻兘鍚﹂€氳繃鎵撲贡妯″潡澹版槑鍛ㄦ湡銆佹敼鍙樹换鍔℃墽琛岄『搴忔潵骞虫粦鎷栨斁锛燄煒插棰樻墍绀猴紝褰撴垜浠妸鏀瑰彉鍏冪礌澶у皬鐨勪唬鐮佹斁鍒皊etTimeout涓€備娇鐢╯etTimeout瀹炵幇浼绾跨▼鏁堟灉锛屼粠鑰岃В鍐虫嫋鎷介棶棰橈紒鍏充簬杩欎竴鐐癸紝杩樻湁寰堝骞曞悗鐭ヨ瘑瑕佹秹鍙婏紝澶у涓嶈鎱岋紒璇风户缁槄璇火煈囸煈囸煈囨祻瑙堝櫒娓叉煋娴佺▼锛堢畝瑕佽鏄庯級褰撴垜浠湪娴忚鍣ㄤ腑杈撳叆缃戝潃娓叉煋椤甸潰鏃讹紝鍦ㄦ祻瑙堝櫒娓叉煋灞傞潰锛屾垜浠竴鑸渶瑕佺粡杩囦笁涓楠わ紙涓嬭浇馃憠瑙ｆ瀽馃憠甯冨眬锛夛細1锛氭牴鎹〉闈㈢殑URL鍚戞湇鍔″櫒鍙戦€佽姹傦紝鏈嶅姟鍣ㄥ搷搴旈〉闈㈢殑HTML銆傛祻瑙堝櫒棣栧厛涓嬭浇html銆乯s銆乧ss銆佸浘鐗囥€佸瓧浣撶瓑涓€绯诲垪璧勬簮銆?锛氭祻瑙堝櫒灏唄tml瑙ｆ瀽鎴恉om鏍戯紙鑺傜偣鏍戯級锛屽皢css瑙ｆ瀽鎴愯鍒欐爲锛坮uletree锛夛紝骞跺皢涓よ€呯粍鍚堟垚涓€涓覆鏌撴爲锛坮endertree锛?锛氭覆鏌撴爲鏋勫缓瀹屾垚鍚庯紝娴忚鍣ㄧ殑娓叉煋寮曟搸浼氶亶鍘嗘覆鏌撴爲缁樺埗姣忎竴涓妭鐐癸紝浠庤€屽憟鐜板嚭鎴戜滑鐪嬪埌鐨勯〉闈㈡晥鏋溿€傛祻瑙堝櫒鐨勫埛鏂伴鐜囩害涓烘瘡绉?0娆★紝涔熷氨鏄鍒锋柊鏃堕棿绾︿负16ms銆傚鏋滄祻瑙堝櫒瀵规瘡涓€甯х殑娓叉煋宸ヤ綔瓒呰繃杩欎釜鏃堕棿锛岄〉闈㈢殑娓叉煋灏变細鍑虹幇鍗￠】銆傛祻瑙堝櫒杩涚▼鍜岀嚎绋嬶紙绠€杩帮級鎴戜滑閮界煡閬揓avaScript鏄崟绾跨▼鐨勶紝浣嗘槸娴忚鍣ㄦ槸鏀寔澶氳繘绋嬬殑銆傛墍浠ュ湪娴忚鍣ㄧ殑鍚堢悊鍒嗛厤涓嬶紝鍚勮繘绋嬪悇鍙稿叾鑱岋紝鐜╃殑涓嶄害涔愪箮銆備粈涔堟槸娴佺▼锛熻繘绋嬫槸CPU鍒嗛厤璧勬簮鐨勫熀鏈崟浣嶃€備粈涔堟槸绾跨▼锛熺嚎绋嬫槸CPU璋冨害鐨勬渶灏忓崟浣嶃€傚畠鏄竴涓繍琛屽湪杩涚▼鍩虹涓婂苟鍏变韩杩涚▼鍐呭瓨绌洪棿鐨勫崟鍏冦€傛祻瑙堝櫒鍖呭惈鍝簺杩涚▼锛?锛氭祻瑙堝櫒杩涚▼锛堣礋璐ｆ祻瑙堝櫒绾у埆鐨勬搷浣滐紝濡傦細鏍囩椤电殑鍒涘缓鍜岄攢姣侊紝璧勬簮绠＄悊鍜屼笅杞界瓑锛?锛氱涓夋柟鎻掍欢杩涚▼锛堣礋璐ｇ涓夋柟鎻掍欢鐨勪娇鐢?3锛欸PU杩涚▼锛堣礋璐?D缁樺浘鍜岀‖浠跺姞閫燂級4锛氭祻瑙堝櫒娓叉煋杩涚▼锛堟祻瑙堝櫒鍐呮牳璐熻矗瑙ｆ瀽鎵цHTML銆丆SS銆丣S绛夋枃浠讹級娴忚鍣ㄦ覆鏌撹繘绋嬶紙娴忚鍣ㄥ唴鏍歌瑙ｏ級娴忚鍣ㄦ覆鏌撹繘绋嬩富瑕佸寘鎷?涓嚎绋嬶細1锛欸UI娓叉煋绾跨▼2锛欽S寮曟搸绾跨▼3锛氬畾鏃跺櫒绾跨▼4锛氬畾鏃跺櫒瑙﹀彂绾跨▼5锛氬紓姝ttp璇锋眰绾跨▼GUI娓叉煋绾跨▼鍜孞S寮曟搸绾跨▼鏄簰鏂ョ殑锛屽洜涓轰袱鑰呬笉鑳藉悓鏃舵墽琛?璇曟兂涓€涓嬶紝娓叉煋绾跨▼姝ｅ湪娓叉煋涓€涓猟iv鐨勮儗鏅壊锛孞S寮曟搸绾跨▼鍙互閫氳繃js鏀瑰彉浣犵殑div鍏冪礌鐨勮儗鏅壊鍜屽ぇ灏忋€傞偅涔堣繖涓椂鍊欙紝浠ュ摢涓€杈逛负鏍囧噯銆備竴瀹氭槸涓€鍥㈢碂銆傚洜姝わ紝褰撳叾涓换浣曚竴涓嚎绋嬫墽琛屽畬鍚庯紝鍙︿竴涓嚎绋嬬殑鎿嶄綔灏变細琚寕璧凤紝绛夊緟鍏朵粬浠诲姟鎵ц瀹岋紝鍐嶈繑鍥炴墽琛岃繖閲岀殑浠诲姟銆備簡瑙ｄ簡杩欎簺鍓嶇疆鐭ヨ瘑涔嬪悗锛屾垜浠繕闇€瑕佷簡瑙ｅ畯浠诲姟鍜屽井浠诲姟锛屼互鍙婁簨浠跺惊鐜€佷换鍔￠槦鍒楃瓑鐭ヨ瘑銆傛垜涓嶄細鍦ㄨ繖閲岃缁嗕粙缁嶏紝浣嗚闃呰Jiasm鐨勯潪甯稿ソ鐨勬枃绔狅紒浼犻€侀棬-甯︿綘璧梆煔€馃殌馃殌鍏充簬setTimeoutsetTimeout鍑芥暟鐢ㄦ潵鎸囧畾鏌愪釜鍑芥暟鎴栬€呮煇娈典唬鐮侊紝澶氬皯姣鍚庢墽琛屻€俿etTimeout浼氬皢鎸囧畾浠ｇ爜绉诲嚭鏈鎵ц锛岀瓑寰呬笅涓€杞瓻ventLoop妫€鏌ユ寚瀹氭椂闂存槸鍚﹀埌杈俱€傚鏋滃埌杈撅紝鍒欐墽琛岀浉搴旂殑浠ｇ爜锛涘鏋滀笉鏄紝绛夊埌涓嬩竴杞瓻ventLoop鍐嶅垽鏂€傛剰鎬濇槸setTimeout鎸囧畾鐨勪唬鐮佽绛夊埌鏈鎵ц鐨勪唬鐮佸叏閮ㄦ墽琛屽畬鍚庢墠浼氭墽琛屻€俿etTimeout璇嗗瓧锛?锛歴etTimeout涓殑this鍏抽敭瀛椾細鎸囧悜鍏ㄥ眬鐜锛岃€屼笉鏄畠琚畾涔夌殑瀵硅薄銆?锛歴etTimeout鏄竴涓紓姝ヤ换鍔★紝涔熸槸涓€涓畯浠诲姟銆傛渶鍚庢墽琛岀殑浠诲姟涔熸槸濡傛銆?锛歋etTimeout鎵ц鍥炶皟鐨勬椂闂撮棿闅旈暱搴etTimeout(()=>{console.log('hello');},100)娉ㄦ剰锛氳繖閲岀殑鏃堕棿闂撮殧蹇呴』澶т簬100ms锛屽叿浣撻暱搴﹁鐪嬪悓姝ュ墠濡備綍浠诲姟鎵цjs闇€瑕佸緢澶氭椂闂淬€?锛歴etTimeout(func,0)鍜宻etTimeout(func)鐨勫尯鍒玸etTimeout(func,0):鎰忔€濇槸鎸傝捣func鍥炶皟鍑芥暟锛屽湪鎵€鏈夊悓姝ヤ换鍔″拰浠诲姟闃熷垪涓殑浠诲姟鎵ц瀹屾瘯鍚庣珛鍗虫墽琛宖unc鍑芥暟銆備簨瀹炰笂锛?姣鍑犱箮鏄棤娉曞疄鐜扮殑銆係etTimeout寤惰繜鎵ц鏃堕棿锛岃嚦灏?姣銆俿etTimeout(func)锛氬鏋滄病鏈変紶閫掑叿浣撶殑寤惰繜鏃堕棿锛屾祻瑙堝櫒浼氳嚜鍔ㄤ负瀹氭椂鍣ㄥ垎閰嶆椂闂达紝鍏蜂綋鍒嗛厤鍥犳祻瑙堝櫒鑰屽紓銆?锛歴etTimeout鐨勬渶澶у欢杩熸椂闂存槸澶氬皯锛熺瓟妗堟槸锛?147483647姣锛?4.8澶╋級锛岃秴杩囪繖涓椂闂达紝灏变細琚綋浣滄孩鍑哄鐞嗭紝鐩稿綋浜巗etTimeout(f,0)鐨勬晥鏋溿€?锛歴etTimeout浼氳繑鍥炰竴涓暣鏁板€间唬琛ㄨ鏁板櫒鐨勪釜鏁帮紝灏嗚鏁存暟浼犵粰clearTimeout鍙互鍙栨秷瀵瑰簲鐨勫畾鏃跺櫒銆?-------------鍗庝附鐨勫垎鍓茬嚎----------------绉︾埍寰凤紝浣犺浜嗛偅涔堝锛岃繖璺熸嫋鎷藉喕缁撴湁浠€涔堝叧绯伙紵馃寶馃寶馃寶鍝堝搱锛屽埆鎱岋紝涓€姝ユ鏉ワ紝鎺ヤ笅鏉ョ粰澶у浠嬬粛涓€娉etTimeout鐨勫疄鎴樼敤娉曪紒馃対馃対馃対浣跨敤涓€锛氳皟鏁翠簨浠堕『搴弒etTimeout(()=>{console.log(2);},0)console.log(1);鎴戜滑閮界煡閬搄s鍦ㄨВ鏋愪唬鐮佺殑鏃跺€欐槸閫愯鎵ц鐨勶紝鍙湁閬囧埌寮傛浠诲姟鐨勬椂鍊欙紝寮傛浠诲姟鎵嶄細琚寕璧凤紝鍦ㄥ悓姝ヤ换鍔′箣鍚庢墽琛屻€傛墍浠ユ垜浠彧鏄埄鐢ㄨ繖涓壒鎬ф墦涔变簨浠舵墽琛岀殑椤哄簭鏉ユ弧瓒崇壒瀹氱殑闇€姹傚満鏅€傜敤閫斾簩锛氬垝鍒嗚€楁椂浠诲姟鎴戜滑閮界煡閬揓avaScript鏄崟绾跨▼鐨勶紝瀹冪殑鐗圭偣灏辨槸瀹规槗闃诲銆傚鏋滄煇涓▼搴忓鐞嗘椂闂磋繃闀匡紝寰堝鏄撳鑷存暣涓〉闈㈠崱浣忋€傚鏋滀笉鑳藉仛鍏朵粬浜嬫儏锛屽彲浠ラ€氳繃setTimeout鏉ュ垝鍒嗚繖浜涗换鍔℃潵瑙ｅ喅姝ょ被闂銆備娇鐢ㄦ垜浠嫋鎷芥敼鍙樺厓绱犵殑瀹藉害锛屼妇涓牀瀛愷煂?..鍏朵粬浠ｇ爜document.onmousemove=function(e){...鍏朵粬浠ｇ爜setTimeout(()=>{document.getElementById("app").style.width=xxx+'px'},0)}濡備笂闈㈢殑浠ｇ爜锛屾垜浠湪鎷栨斁鍏冪礌鐨勮繃绋嬩腑浼氶绻佽Е鍙戝洖娴佹搷浣滐紝鑰屽洖娴佹搷浣滄湰韬槸闈炲父鏄傝吹鐨勩€傝繖鏃跺€欏緢瀹规槗琚睆钄斤紝瀵艰嚧缃戦〉鍗′綇銆傝繖鏃跺€欐垜浠姞涓妔etTimeout锛屽阀濡欑殑鍒掑垎杩欓儴鍒嗘搷浣滐紝鎶婁换鍔℃斁鍦ㄦ祻瑙堝櫒鏈€鏃╁彲鐢ㄧ殑绌洪棽鏃堕棿鍘绘墽琛屻€傞偅浜涜绠楅噺澶с€佽€楁椂闀跨殑浠诲姟鏀惧湪setTimeout(f,0)涓紙鍒嗙墖濉炶繘闃熷垪锛夛紝杩欐牱鍗充娇澶嶆潅鐨勭▼搴忎笉澶勭悊锛屾垜浠篃鑳藉緱鍒板嵆鏃跺搷搴旀搷浣滈〉闈€傜敤閫斾笁锛氫簨浠堕槻鎶栧拰鑺傛祦鍏充簬杩欓儴鍒嗙殑鍐呭锛屽鏋滆缁嗚鐨勮瘽锛岄偅灏辨槸涓€涓暱绡囧ぇ璁轰簡銆傝繖閲岀洿鎺ユ帹鑽愮湅鎴戝啓鐨勯潪甯稿ソ鐨勬枃绔犮€愪紶閫侀棬-鍘讳綘馃殌馃殌馃殌銆戯紙https://juejin.im/post/687214...濂藉惂锛佸叧浜庢嫋鎷介棶棰樿Е鍙戠殑setTimeOut鎺㈢储绠€鍗曚粙缁嶅埌杩欓噷锛屽彲瑙佷竴涓皬闂涔熼渶瑕佸己澶х殑鐞嗚鐭ヨ瘑鏀寔锛屽洜姝ゆ帉鎻s鐨勪竴浜涘簳灞傚師鐞嗘槸鎴戜滑鎻愬崌涓汉鑳藉姏锛岃繘鍏ヤ笅涓€闃舵鐨勫叧閿竴姝ャ€傝繖閲屽畨鍒╀竴鍙ユ垜鐗瑰埆鍠滄鐨勫悕瑷€锛?0%鐨勯棶棰樺彲浠ョ敤20%鐨勭煡璇嗚В鍐筹紝鍓╀笅鐨?0%鐨勯棶棰橀渶瑕佷綘鐢?0%绉疮鐨勭煡璇嗗幓瑙ｅ喅銆傝阿璋㈠枩娆煈嶅啀鐪嬩竴閬嶏紝宸茬粡鎴愪负涔犳儻浜嗭紒鏈郴鍒楁寔缁洿鏂帮紝鎮ㄧ殑涓€閿笁杩炴槸鎴戠户缁啓涓嬪幓鐨勬渶澶у姩鍔涖€傚鏋滄偍瀵规湰鍗氬鏈変粈涔堟剰瑙佸拰寤鸿锛屾杩庣暀瑷€锛佹杩庢墦鎵帮紒馃槣馃槤
