涓€鏂囧甫浣犱簡瑙ue涔嬭櫄鎷焏om

Posted 2021-04-23 鍓嶇鐚庢墜

鍓嶇鐚庢墜

 閾炬帴姣忎竴浣嶅紑鍙戣€咃紝 璁╃紪绋嬫洿鏈夎叮鍎匡紒

鍦ㄩ潰璇曠殑杩囩▼涓紝鍙兘涔熶細琚棶鍒板铏氭嫙dom鐨勭悊瑙ｏ紝鍍忚繖绉嶉潰璇曢鏄瘮杈冨娉涚殑锛岄潰璇曞畼鎯崇煡閬撲綘鍒板簳鐭ラ亾澶氬皯锛熸棦鐒舵槸鐞嗚В锛岄偅灏卞彧鑳芥槸鐭ユ棤涓嶈█瑷€鏃犱笉灏?灏介噺缁勭粐涓嬭瑷€澶氳鐐癸紝杩欐牱鎵嶆樉寰椾笓涓氱礌鍏绘瘮杈冮珮锛屾帴涓嬫潵锛屾垜鏉ヨ皥璋堣嚜宸辩殑鐞嗚В锛屽垏璁颁笉瑕佸幓鑳岋紝涓€瀹氳鐞嗚В涔嬪悗锛岀敤鑷繁鐨勮瑷€鏉ユ弿杩板嚭鏉ャ€?/p>

鎴戜滑鍙互浠庝互涓嬪洓涓柟闈㈡潵鍥炵瓟锛?/p>

馃専 浠€涔堟槸铏氭嫙dom

铏氭嫙dom鏈川涓婂氨鏄竴涓櫘閫氱殑JS瀵硅薄锛岀敤鏉ユ弿杩拌鍥句笂搴旇鏈夊摢浜涚晫闈㈢粨鏋勶紝骞朵笉鐢熸垚鐣岄潰銆傛垜浠彲浠ュ湪鐢熷懡鍛ㄦ湡銆宮ounted闃舵銆?/strong>鎵撳嵃涓€涓?code class="mq-31">this._vnode锛屽涓嬶細

鎻忚堪浜?code class="mq-33">鏍囩涓篸iv銆?code class="mq-34">鏈夊摢浜涘睘鎬?/code>銆佷互鍙?code class="mq-35">鏈夊摢浜涘瓙鍏冪礌绛夌瓑锛屽畠閫氳繃鏅€氱殑js瀵硅薄杩欑褰㈠紡鏉ユ弿杩伴〉闈笂搴旇鏈夊摢浜涗笢瑗匡紝浣嗗苟涓嶄細鐢熸垚鐣岄潰銆?/p>

鍦╲ue涓紝姣忎釜缁勪欢閮芥湁涓€涓猺ender鍑芥暟锛屾瘡涓€涓猺ender鍑芥暟閮戒細杩斿洖涓€涓櫄鎷焏om鏁帮紝杩欎篃灏辨剰鍛崇潃姣忎釜缁勪欢閮藉搴斾竴妫佃櫄鎷烡OM鏍戙€?/p>

馃尲 涓轰粈涔堥渶瑕佽櫄鎷焏om

杩欎釜涓昏鏄敱vue妗嗘灦缁撴瀯鎵€鍐冲畾鐨勶紝鍦╲ue涓紝娓叉煋瑙嗗浘浼氳皟鐢╮ender鍑芥暟锛岃繖绉嶆覆鏌撲笉浠呭彂鐢熷湪缁勪欢鍒涘缓鏃讹紝鑰屼笖杩樹細鍙戠敓鍦ㄤ緷璧栫殑鏁版嵁鏇存柊鐨勬椂鍊欍€傚鏋滃湪娓叉煋鏃讹紝鐩存帴浣跨敤鐪熷疄DOM锛岀敱浜庣湡瀹濪OM鐨勫垱寤恒€佹洿鏂般€佹彃鍏ョ瓑鎿嶄綔浼氬甫鏉ュぇ閲忕殑鎬ц兘娑堣€楋紝浠庤€屼細鏋佸ぇ鐨勯檷浣庢覆鏌撴晥鐜囥€?/p>

銆岀ず渚嬨€?/strong>锛氬姣斿垱寤簀s瀵硅薄鍜屽垱寤虹湡瀹瀌om瀵硅薄杩涜鐢ㄦ椂瀵规瘮

<script>
      var times = 10000000;//娆℃暟涓?000涓囨
      //js瀵硅薄
      console.time(`js object`);
      for (var i = 0; i < times; i++) {
        var obj = {};
      }
      console.timeEnd("js object");
      //鐪熷疄dom瀵硅薄
      console.time(`dom object`);
      for (var i = 0; i < times; i++) {
        var obj = document.createElement("div");
      }
      console.timeEnd("dom object");
</script>

銆岃繍琛岀粨鏋溿€?/strong>锛?/p>

浠庣粨鏋滅湅锛宩s瀵硅薄鐢ㄦ椂150ms锛岃€岀湡瀹瀌om鐢ㄦ椂灏嗚繎7s浜嗭紝杩欎釜杩樹笉绠楁彃鍏ュ埌椤甸潰涓鑷寸殑閲嶇粯閲嶆帓鏃堕棿锛岄潪甯告亹鎬栵紒

鍥犳锛寁ue鍦ㄦ覆鏌撴椂锛屼娇鐢ㄨ櫄鎷焏om鏉ヤ唬鏇跨湡瀹瀌om锛屼富瑕佷负瑙ｅ喅娓叉煋鏁堢巼鐨勯棶棰樸€傞偅鍏夋湁铏氭嫙dom涔熶笉鑳藉鍟婏紝閭ｉ〉闈㈠拫鏄剧ず鍛紵鎬讳笉鑳芥槸鏃犲瓧澶╀功鍚э紒鎺ヤ笅鏉ュ氨鏄涓変釜鏂归潰浜?/p>

馃尨 铏氭嫙dom鏄浣曡浆鎹负鐪熷疄dom鐨?/span>

鍦ㄤ竴涓粍浠跺疄渚嬬涓€娆¤娓叉煋鐨勬椂鍊欙紝瀹冧細鍏堢敓鎴愯櫄鎷焏om鏍戯紝鐒跺悗鏍规嵁铏氭嫙dom鏍戝垱寤虹湡瀹瀌om锛屾渶鍚庝細鎶婄湡瀹炵殑dom鎸傝浇鍒伴〉闈腑鍚堥€傜殑浣嶇疆锛屾墍浠ヨ锛屽垱寤虹湡瀹炵殑dom杩欎竴姝ユ槸灏戜笉浜嗙殑锛屽彧鑳借灏介噺鐨勫皯鍒涘缓锛屽鏋滆椤甸潰鍙渶瑕佹覆鏌撲竴娆★紝鍚庨潰鐨勬暟鎹彉鍖栭兘涓嶉噸鏂版覆鏌撻〉闈紝杩欐椂vue鐨勬晥鐜囪窡鐩存帴鎿嶄綔dom鏁堢巼鐩告瘮鍏跺疄鏄洿鍔犱綆鐨勶紝鍥犱负瀹冩瘮鐩存帴鎿嶄綔dom杩樺涓€涓楠わ細鍒涘缓铏氭嫙dom銆傜涓€娆ue娓叉煋鏁堢巼鏄笉楂樼殑锛屼絾鏄悗缁氨涓嶄竴鏍蜂簡銆?/p>

濡傛灉涓€涓粍浠跺彈鍒板搷搴斿紡鏁版嵁鍙樺寲鐨勫奖鍝嶏紝闇€瑕侀噸鏂版覆鏌撴椂锛屽畠浠嶇劧浼氶噸鏂拌皟鐢╮ender鍑芥暟锛屽垱寤轰竴涓柊鐨勮櫄鎷焏om鏍戯紝杩欐椂浼氱敤鏂拌櫄鎷焏om鏍?newVnode)鍜屾棫铏氭嫙dom鏍?oldVnode)杩涜瀵规瘮锛岄€氳繃姣斿锛寁ue浼氭壘鍒版渶灏忔洿鏂伴噺锛岀劧鍚庢洿鏂板繀瑕佺殑铏氭嫙dom鑺傜偣锛屾渶鍚庯紝杩欎簺鏇存柊杩囩殑铏氭嫙鑺傜偣浼氬幓淇敼瀹冧滑瀵瑰簲鐨勭湡瀹瀌om銆傝繖鏍蜂竴鏉ュ氨淇濊瘉浜嗗鐪熷疄dom鐨勬搷浣滆揪鍒颁簡鏈€灏忕殑鏀瑰姩銆?/p>

姣斿杩囩▼鍏跺疄鏄敤鍒颁簡涓€涓畻娉曪紝鍙?code class="mq-87">patch锛屽畠鍙互鍒ゆ柇鍑哄摢浜涜妭鐐瑰彂鐢熶簡鍙樺寲锛屼粠鑰屽彧瀵瑰彂鐢熷彉鍖栫殑铏氭嫙dom鑺傜偣杩涜鏇存柊锛屽叧浜巔atch鎴戜細涓撻棬鍑轰竴绡囨枃绔犺皥璋堣嚜宸辩殑鐪嬫硶銆?/p>

馃憢 妯℃澘鍜岃櫄鎷焏om鐨勫叧绯?/span>

vue妗嗘灦涓湁涓€涓?code class="mq-92">compile妯″潡锛屽畠涓昏璐熻矗灏嗘ā鏉胯浆鎹负render鍑芥暟锛岃€宺ender鍑芥暟璋冪敤鍚庡緱鍒拌櫄鎷焏om銆?/p>

缂栬瘧杩囩▼鍒嗕负涓ゆ锛?/p>

1. 灏嗘ā鏉垮瓧绗︿覆杞崲涓篈ST(Abstract Syntax Tree锛屾娊璞¤娉曟爲)
2. 灏咥ST杞崲涓簉ender鍑芥暟

• 濡傛灉浣跨敤浼犵粺鐨勫紩鍏ユ柟寮忥紙浣跨敤script鏍囩寮曞叆vue.js锛夛紝缂栬瘧鏃堕棿鍙戠敓鍦ㄧ粍浠剁涓€娆″姞杞芥椂锛岃绉颁负杩愯鏃剁紪璇?/code>銆?/p>

• 濡傛灉鏄湪vue-cli榛樿閰嶇疆涓嬶紝缂栬瘧鍙戠敓鍦ㄦ墦鏃讹紝琚О涓?code class="mq-104">妯℃澘棰勭紪璇?/code>銆?/p>

缂栬瘧鏄竴涓瀬鍏惰€楄垂鎬ц兘鐨勬搷浣滐紝棰勭紪璇戝彲浠ユ湁鏁堢殑鎻愰珮杩愯鏃剁殑鎬ц兘锛岃€屼笖锛岀敱浜庤繍琛屾椂宸茬粡涓嶉渶瑕佺紪璇戯紝vue-cli鍦ㄦ墦鍖呮椂浼氭帓闄ゆ帀vue涓殑compile妯″潡锛岃繖鏍峰彲浠ュ噺灏戞墦鍖呬綋绉€?/p>

妯℃澘鐨勫瓨鍦紝浠呬粎鍙槸涓轰簡鎴戜滑鏇村姞鏂逛究鐨勪功鍐欑晫闈唬鐮侊紝vue鏈€缁堣繍琛岀殑鏃跺€欙紝鏈€缁堥渶瑕佺殑鏄痳ender鍑芥暟锛岃€屼笉鏄ā鏉匡紝杩欓噷瑕佹敞鎰忕殑鏄痸ue瀹冩槸涓嶈璇嗘ā鏉跨殑锛屾ā鏉挎槸vue-cli棰勭紪璇戞墍闇€瑕佺殑锛屽畠鏈€缁堜細灏嗘ā鏉跨紪璇戞垚render鍑芥暟鎻愪緵缁檝ue姝ｅ父杩愯銆傚洜姝ゆā鏉夸腑鐨勫悇绉嶈娉曪紝鍦ㄨ櫄鎷焏om涓兘鏄笉瀛樺湪鐨勶紝瀹冧滑閮戒細鍙樻垚铏氭嫙dom鐨勯厤缃€?/p>

馃槉 濂戒簡锛?浠ヤ笂灏辨槸鎴戠殑鍒嗕韩锛屽ぇ瀹跺浜庤櫄鎷焏om杩樻湁鍏跺畠鐞嗚В鐨勮瘽鍙互鍦ㄨ瘎璁哄尯璁ㄨ楦綖

璁板緱鐐硅禐 馃憤 鏀寔涓€涓嬪摝锝?馃槝

以上是关于涓€鏂囧甫浣犱簡瑙ue涔嬭櫄鎷焏om的主要内容，如果未能解决你的问题，请参考以下文章

Vim淇偧绉樼睄涔嬭娉曠瘒

涓簡婧愮爜鐨勬瘨锛岀粰浣犱竴鍓壇鑽?/a>

macOS涓嬭櫄鎷熸満杞欢閫夊摢涓紵

涓枃鍒嗚瘝妯″瀷