嘻道奇闻
- 文章199742
- 阅读14625734
JS异步加载最佳实践：defer与async的使用场景解析
锛堟尃澶达級浣犳湁娌℃湁閬囧埌杩囪繖绉嶆儏鍐碉紵鏄庢槑缃戦〉鍐呭閮藉嚭鏉ヤ簡锛岀獊鐒舵暣涓〉闈㈠崱浣忎笉鍔ㄢ€斺€斿氨鍍忓埛鐭棰戞椂WiFi绐佺劧鏂綉涓€鏍烽毦鍙椼€傝繖浜嬪効鍗佹湁鍏節鏄疛S鍔犺浇椤哄簭鎯圭殑绁革紒浠婂ぉ鍜变滑灏辨潵鎺版壇娓呮defer鍜宎sync杩欎袱涓晳鍛藉睘鎬с€?/p>
鈻岎煔€ 鍏堣涓娉暀璁?br/> 鍘诲勾甯湅鍙嬩紭鍖栨瘝濠村晢鍩庯紝椤甸潰鏄庢槑鍋氫簡鎸夐渶鍔犺浇锛岀粨鏋滅敤鎴锋€绘姇璇?鐐瑰嚮鍔犲叆璐墿杞︽病鍙嶅簲"銆傛煡浜嗕笁澶╂墠鍙戠幇锛屾湁涓涓夋柟姣斾环鎻掍欢鐢ㄩ敊浜哸sync灞炴€э紝鎶婃牳蹇僇S鐨勬墽琛岄『搴忔悈寰楃█纰庯紒
锛堟媿妗屽瓙锛夐噸鐐规潵浜嗭細鈥?strong>鈥嬭剼鏈姞杞介『搴忕洿鎺ュ喅瀹氶〉闈㈢敓姝烩€?/strong>鈥嬶紒杩欏氨濂芥瘮鐐掕彍锛屾斁璋冩枡鐨勬椂鏈洪敊浜嗭紝鑿滃氨搴熶簡銆?/p>
鈻岎煕?鍩虹鎵洸涓夎繛闂?br/> Q锛氫笉閮芥槸寮傛鍔犺浇鍚楋紵鏈夊暐鍖哄埆锛?br/> A锛氱湅杩欎釜瀵规瘮琛ㄧ鎳傦細
| 灞炴€?/th> | 鎵ц椤哄簭 | 鎵ц鏃舵満 | 閫傜敤鍦烘櫙 |
|---|---|---|---|
| 榛樿 | 鎸夊嚭鐜伴『搴?/td> | 绔嬪嵆鎵ц | 鍑犱箮涓嶇敤 |
| async | 璋佸厛涓嬭浇瀹岃皝鍏堣窇 | 涓嬭浇瀹屽氨鎵ц | 骞垮憡/缁熻 |
| defer | 淇濇寔涔﹀啓椤哄簭 | DOM瑙ｆ瀽瀹屾墽琛?/td> | 椤甸潰鍔熻兘鑴氭湰 |
Q锛氶偅鎬庝箞鑲夌溂鍒ゆ柇璇ョ敤鍝釜锛?br/> A锛氳浣忚繖涓彛璇€锛氣€?strong>鈥嬭椤哄簭鐢╠efer锛岃閫熷害鐢╝sync鈥?/strong>鈥?/p>
Q锛氳兘涓嶈兘鍚屾椂鐢ㄤ袱涓睘鎬э紵
A锛氬崈涓囧埆锛佹祻瑙堝櫒浼氱洿鎺ユ棤瑙哸sync锛屾寜defer澶勭悊鈥斺€旇繖涓喎鐭ヨ瘑90%鐨勪汉閮戒笉鐭ラ亾
鈻岎煍?瀹炴垬璇婃柇瀹?br/>
妗堜緥1锛氶椤佃疆鎾浘澶辩伒
鏌愮數鍟嗙珯鐢ㄤ簡5涓猻wiper鎻掍欢锛屽叏閮ㄨ缃產sync銆傜粨鏋滅Щ鍔ㄧ缁忓父鍑虹幇鐧芥鈥斺€斿洜涓烘彃浠朵箣闂翠緷璧栧叧绯昏鎵撲贡銆傛敼鎴恉efer鍚庨棶棰樻秷澶憋紝鍔犺浇閫熷害鍙嶈€屾彁鍗?0%
妗堜緥2锛氬箍鍛婁綅閬尅鍐呭
鏌愯祫璁珯鎶婂箍鍛婅剼鏈涓篸efer锛屽鑷村箍鍛婄獊鐒跺脊鍑烘椂鎶婃枃绔犲線涓嬮《銆傛敼鎴恆sync鍚庯紝骞垮憡鑷繁鐜╄嚜宸辩殑锛屽啀涔熶笉浼氭墦鏂敤鎴烽槄璇?/p>
锛堢獊鐒舵兂鍒帮級鍝庤繖閲屾湁涓潙瑕佹敞鎰忥紒鐢ㄤ簡defer鐨勮剼鏈櫧鐒朵笉闃诲娓叉煋锛屼絾浼氶樆濉濪OMContentLoaded浜嬩欢銆傚鏋滀綘鏈夐渶瑕佸湪DOM瑙ｆ瀽瀹岀珛鍗虫墽琛岀殑鎿嶄綔锛屽緱鏀圭敤requestIdleCallback
鈻岎煋?鎬ц兘鏁版嵁璇磋瘽
娴嬭瘯鐜锛?MB鐨凧S鏂囦欢锛?G缃戠粶
| 鍔犺浇鏂瑰紡 | 棣栨鍐呭娓叉煋 | 瀹屽叏鍙氦浜掓椂闂?/th> |
|---|---|---|
| 榛樿 | 3.2s | 8.7s |
| async | 1.1s | 4.3s |
| defer | 1.0s | 3.9s |
鐪嬪嚭闂ㄩ亾浜嗗惂锛熲€?strong>鈥媋sync閫傚悎鐙珛鑴氭湰锛宒efer閫傚悎鏈変緷璧栧叧绯荤殑鍏ㄥ妗垛€?/strong>鈥?/p>
鈻岎煉?灏忕紪绉佹埧绉樼睄
- 姘歌繙缁欑涓夋柟缁熻鑴氭湰鍔燼sync锛屾瘮濡傜櫨搴︾粺璁?/li>
- 鑷繁鍐欑殑涓氬姟鑴氭湰鐢╠efer锛岀壒鍒槸vue/react鍏ュ彛鏂囦欢
- 闇€瑕佹搷浣淒OM鐨勬彃浠讹紙姣斿鍥剧墖鎳掑姞杞斤級蹇呴』鐢╠efer
- 鍔ㄦ€佸垱寤虹殑script鏍囩榛樿灏辨槸async锛岃鎺у埗椤哄簭寰楁墜鍔ㄨ缃產sync=false
涓婂懆鐢ㄨ繖濂楁柟妗堟敼閫犱簡鍏徃瀹樼綉锛宨OS绔灞忛€熷害浠?.3绉掓彁鍒?.8绉掞紝鐢ㄦ埛鍋滅暀鏃堕暱鐩存帴缈诲€嶃€傝繖灏卞彨鍥涗袱鎷ㄥ崈鏂わ紒
锛堟懜涓嬪反锛夎瘽璇村洖鏉ワ紝鐜板湪ES Module閫愭笎鏅強锛屾湭鏉ュ彲鑳介兘涓嶇敤绾犵粨杩欎簺灞炴€т簡銆備絾鐪间笅杩欎簲骞达紝defer鍜宎sync浠嶆槸姣忎釜鍓嶇蹇呬細鐨勭敓瀛樻妧鑳姐€傚氨鍍忕幇鍦ㄨ皝杩樹笉浼氱敤鏅鸿兘鎵嬫満鍛紵鍙簩鍗佸勾鍓嶅ぇ瀹朵笉涔熼兘鐢ㄧ潃鎸夐敭鏈鸿繃鏉ョ殑鍢涳紒