鍓嶈█Vue鍜孯eact鐨凴ender鍔熻兘閮芥秹鍙婂埌VirtualDOM鐨勬蹇点€俈irtualDOM涔熸槸鎬ц兘浼樺寲鐨勯噸瑕佷竴鐜€傚悓鏃剁獊鐮翠簡鐩存帴鎿嶄綔鐪熷疄DOM鐨勭摱棰堛€傛湰鏂囦互涓嬪垪闂鎻忚堪VirtualDOM銆?銆佷负浠€涔堣鎿嶄綔铏氭嫙DOM锛?銆佷粈涔堟槸铏氭嫙DOM锛?.鏁欎綘瀹炵幇铏氭嫙DOM鍜屾覆鏌撶湡瀹濪OM銆傚笇鏈涢槄璇绘湰鏂囧悗锛屾偍鑳藉娣卞叆浜嗚В铏氭嫙DOM锛屽苟浠庡紑鍙戝拰闈㈣瘯涓彈鐩娿€備负浠€涔堟垜浠渶瑕佹搷浣滆櫄鎷烡OM锛熶负浜嗗府鍔╂垜浠洿濂藉湴鐞嗚В涓轰粈涔堥渶瑕佹搷浣滆櫄鎷烡OM锛屾垜浠厛浠庢祻瑙堝櫒娓叉煋涓€涓狧TML鏂囦欢闇€瑕佸仛浠€涔堣璧凤細娴忚鍣ㄧ殑娓叉煋鏈哄埗澶ц嚧鍙互鍒嗕负浠ヤ笅浜斾釜姝ラ锛?.鍒涘缓DOM鏍?.鍒涘缓鏍峰紡瑙勫垯3銆傛瀯寤烘覆鏌撴爲4銆傚竷灞€甯冨眬5銆侱rawPainting浠ュ線鎴戜滑浣跨敤鍘熺敓JavaScript鍜宩query鏉ユ搷浣滅湡瀹炵殑DOM鏃讹紝娴忚鍣ㄤ細浠庢瀯寤篋OM馃尣寮€濮嬶紝浠庡ご鍒板熬鎵ц娓叉煋杩囩▼銆傚湪涓€娆″紑鍙戜腑锛屽鏋滀骇鍝佸憡璇変綘涓€涓渶姹傦紝浣犻渶瑕佸湪涓€娆℃搷浣滀腑鏇存柊10涓狣OM鑺傜偣銆傜悊鎯崇姸鎬佹槸娴忚鍣ㄤ竴娆℃€ф瀯寤篋OM鏍戯紝鐒跺悗杩涜鍚庣画鎿嶄綔銆備絾鏄祻瑙堝櫒骞朵笉鏄偅涔堣仾鏄庛€傛敹鍒扮涓€涓洿鏂癉OM鐨勮姹傚悗锛屼笉鐭ラ亾鍚庨潰杩樹細鏈?娆℃洿鏂版搷浣滐紝鎵€浠ヤ細绔嬪嵆鎵ц娴佺▼锛屾渶鍚庢墽琛屼簡10娆℃祦绋嬨€傝繃浜嗕竴浼氬効锛屼骇鍝佺粡鐞嗘妸浣犲彨杩囨潵锛岃浣犳敼闇€姹傘€傝繖鏃跺€欏氨闇€瑕侀噸鏂版洿鏂癉OM浜嗐€傞偅涔堣繖娈垫椂闂翠箣鍓嶇殑10娆OM鎿嶄綔锛屽氨鏄湪娴垂鎬ц兘鍜屾儏缁€傚嵆浣胯绠楁満纭欢涓嶆柇鏇存柊杩唬锛屾搷浣淒OM鐨勬垚鏈緷鐒舵槀璐碉紝棰戠箒鎿嶄綔DOM浠嶄細瀵艰嚧椤甸潰鍗￠】锛屽奖鍝嶇敤鎴蜂綋楠屻€備竴涓湡瀹炵殑DOM鑺傜偣锛屽嵆浣挎槸鏈€绠€鍗曠殑div涔熷寘鍚簡寰堝灞炴€э紝浣犲彲浠ユ墦鍗板嚭鏉ョ洿瑙傛劅鍙椾竴涓嬶細杩欎箞澶氬睘鎬э紝濡傛灉姣忔閮芥洿鏂癉OM缁撴瀯锛屼竴娆★紝涓ゆ锛屼笁娆♀€︹€?00娆♀€︹€︿竴鍗冩鈥︹€︼紝鍙兂鑰岀煡杩欐槸澶氫箞搴炲ぇ鐨勬暟鎹噺銆傛墍浠ヨ櫄鎷烡OM灏辨槸涓轰簡瑙ｅ喅杩欎釜娴忚鍣ㄦ€ц兘闂鑰岃璁＄殑銆傛瘮濡傚墠闈㈢殑渚嬪瓙锛屽鏋滀竴娆℃搷浣滄湁10涓洿鏂癉OM鐨勫姩浣滐紝閭ｄ箞铏氭嫙DOM涓嶄細绔嬪嵆瀵笵OM杩涜鎿嶄綔锛岃€屾槸浼氶拡瀵硅繖10涓洿鏂癉OM鐨勫姩浣滈€氳繃Diff绠楁硶鐢熸垚涓€涓猨s瀵硅薄锛岀劧鍚庨€氱煡娴忚鍣ㄦ墽琛屼竴娆℃€х粯鍥惧伐浣滐紝杩欐牱鍙互閬垮厤寰堝涓嶅繀瑕佺殑璁＄畻銆備粈涔堟槸铏氭嫙DOM锛烿irtualDOM[2]灏辨槸鎴戜滑涓婇潰鎻愬埌鐨刯s瀵硅薄銆傚畠鏈川涓婃槸JS鍜孌OM涔嬮棿鐨勭紦瀛樸€傚畠鍙互姣斾綔CPU鍜岀‖鐩樸€傜敱浜庣‖鐩樺緢鎱紝鎴戜滑鍦ㄥ畠浠箣闂存坊鍔犱簡涓€涓紦瀛橈紱鐢变簬DOM澶參浜嗭紝鎴戜滑鍦ㄤ粬浠殑JS鍜孌OM涔嬮棿娣诲姞浜嗕竴涓紦瀛樸€侰PU锛圝S锛夊彧瀵瑰唴瀛橈紙VirtualDOM锛夎繘琛屾搷浣滐紝鏈€鍚庡皢鍙樺寲鍐欏叆纭洏锛圖OM锛夈€傜洿鎺ユ搷浣滃唴瀛樹腑鐨凧S瀵硅薄閫熷害鏄庢樉鏇村揩銆俧unctionvnode(tag,data,key,children,text){return{tag,data,key,children,text}}涓句釜鏍楀瓙锛氬鏋滄垜浠湁杩欐牱涓€妫礑OM鏍?ulclass="list">鍓嶇绠€鎶?/li>vue閭ｄ箞锛屾垜浠浣曚娇鐢╦s瀵硅薄鏉ュ搴旇繖妫垫爲鍛紵{tag:'ul',//鍏冪礌鏍囩data:{//灞炴€х被:'list'},key:'',text:'',//鏂囨湰鍐呭children:[{tag:"li",data:{class:"item"},key:'',text:'',children:[{tag:undefined,data:undefined,key:undefined,text:'鍓嶇绠€鎶?,children:[]}]},{tag:"li",data:"",key:'',text:'',children:[{tag:undefineded,data:undefined,key:undefined,text:'vue',children:[]}]}]//瀛愬厓绱爙鐢辨鍙锛孌OM鏍戠殑淇℃伅鍙互鐢↗avaScript瀵硅薄琛ㄧず锛岃€屽湪鍙嶈繃鏉ワ紝鎴戜滑涔熷彲浠ュ埄鐢↗avaScript瀵硅薄琛ㄧず鐨勬爲缁撴瀯鏉ユ瀯寤虹湡瀹炵殑DOM鏍戝疄鐜拌櫄鎷烡OM娓叉煋鐪熷疄鐨凞OM鏈変簡JavaScript瀵硅薄鍚庡浣曡浆鍖栦负鐪熷疄鐨凞OM鏍戠粨鏋勫憿锛焨l鍜宭i鍦╦s瀵硅薄涓紝椤甸潰涓婃病鏈夎繖涓粨鏋勶紝鎵€浠ユ垜浠渶瑕佸皢ul鍜宭i杞崲鎴?ul>鍜?li>鏍囩銆傚浜庢枃鏈爣绛撅紝鎴戜滑瀹氫箟Vnode涓猴細{tag:undefined,data:undefined,key:undefined,text:'vue',children:[]}鍥犳锛屽彲浠ラ€氳繃鍒ゆ柇鏍囩鐨勭被鍨嬫潵鍒ゆ柇鍏冪礌鐨勭被鍨嬪垱寤恒€俧unctioncreateElm(vnode){let{tag,data,children,key,text}=vnode;if(typeoftag=="string"){vnode.el=document.createElement(tag);//鍒涘缓鍏冪礌骞跺皢瀹冧滑鏀剧疆鍦╲node.el涓奵hildren.forEach(child=>{vnode.el.appendChild(createElm(child))})}else{vnode.el=document.createTextNode(text);//鍒涘缓鏂囨湰}returnvnode.el}濡傛灉瀛愯妭鐐瑰瓨鍦ㄥ苟涓斾篃鏄櫄鎷烡OM锛屾垜浠€氳繃閫掑綊璋冪敤鍒涘缓瀛愯妭鐐广€傚垱寤篋OM鏍戠粨鏋勫悗锛屾垜浠渶瑕佽缃妭鐐圭殑灞炴€э紝鍗冲鐞嗚櫄鎷烡OM涓殑鏁版嵁灞炴€с€俧unctionupdateProperties(vnode){璁〆l=vnode.el;璁﹏ewProps=vnode.data||{};for(letkeyinnewProps){if(key=="style"){for(letstyleNameinnewProps.style){el.style[styleName]=newProps.style[styleName];}}}elseif(key=="class"){el.className=newProps.class;}else{el.setAttribute(key,newProps[key]);}}}鎴戜滑鍒涘缓鍏冪礌鏍囩鍚庯紝璋冪敤updateProperties鏂规硶灏嗕笂闈㈠垱寤虹殑鐪熷疄DOM缁撴瀯vnode.el娣诲姞鍒版枃妗ｄ腑锛屽憟鐜版垜浠渶瑕佺殑鐪熷疄DOM缁撴瀯letparentElm=document.getElementById("app").parentNode;鑾峰彇涓婁竴涓猘ppbodyparentElm.insertBefore(createElm(vnode),document.getElementById("app").nextSibling);//鎻掑叆鐪熸鐨刣omparentElm.removeChild(document.getElementById("app"));//鍒犻櫎鏃ц妭鐐规€荤粨浠ヤ笂灏辨槸鏈枃鐨勫叏閮ㄥ唴瀹癸紝鎴戞兂澶у鐜板湪搴旇鏄庣櫧浜嗕粈涔堟槸铏氭嫙DOM鐨勬蹇碉紝浠ュ強铏氭嫙DOM鏄浣曞疄鐜扮湡瀹濪OM娓叉煋鐨勩€傚叾涓紝浣跨敤浜嗕富瑕佷娇鐢ㄥ瓙鑺傜偣鐨勯€掑綊銆備笅涓€绡囨枃绔犲皢璁茶В铏氭嫙鑺傜偣鐨刣iff绠楁硶锛屾暚璇锋湡寰呫€傚弬鑰冭祫鏂橵irtualDOM绠€浠嬶細https://www.jianshu.com/p/616...濡備綍瀹炵幇涓€涓猇irtualDOM绠楁硶锛?https://github.com/livoras/bl...'
