ããªã¹ã»ã«ãã«ããã¹ããŒïŒ BSKaplou ïŒ

ç§ã¯ããªãé·ãéå ±åæžã«åãçµãã§ãããå¯èœãªéãç©è°ãéžãããã«ããã ãããŠãããã«ççŸããå§ããŸããWebã³ã³ããŒãã³ãã䜿çšã§ãããšããäºå®ã«ã¯æ ¹æ¬çã«åæããŸããã 質åã¯ãã§ã«çŽ300 Kãã€ãã§æèµ·ãããŠããŸãããJavascriptaããŒãžã®300 Kãã€ãã¯å®¹èªã§ããªãã»ã©ãããããããšç¢ºä¿¡ããŠããŸãã
ä»æ¥ã¯ãããã³ããšã³ããžã®ããªãæ·±ãæ ã«ã€ããŠã話ããŸãã ãã®æ ã¯ãããã³ããšã³ãã®aviasales.ruãé ããäœãããå¿ èŠãããããšãçºèŠãããšãã«å§ãŸããŸããã ãã®æ ã¯1幎åã2幎åã«å§ãŸããŸãããç§ã話ãããšã¯ãç§ãåŠãã ããšãåçž®ããç©èªã§ãã
ç§ã®æèŠã§ã¯ãããã³ããšã³ãã¢ããªã±ãŒã·ã§ã³ã®ããã©ãŒãã³ã¹ã§æãéèŠãªã®ã¯ã¬ã³ããªã³ã°ã§ãã DOMã§ã®äœæ¥ã¯é¿ããã¹ããã®ã§ããããšãããã£ãŠããŸãã DOM APIãžã®åŒã³åºããå€ãã»ã©ãã¢ããªã±ãŒã·ã§ã³ã®å®è¡ã¯é ããªããŸãã

æ£ç¢ºã«äœã話ããŸããïŒ ã²ãŒã ã®ã«ãŒã«ã«ã€ããŠã ã¬ã³ããªã³ã°ã«ã¯ã©ã®ãããªãã®ããããWebã¢ããªã±ãŒã·ã§ã³ã®æäœã§ã¯ãã¬ã³ããªã³ã°ã®ãã³ãã¬ãŒãã©ã€ãã©ãªã®ããŒãšãªããã©ã¡ãŒã¿ãŒããã³ãã¬ãŒããšã³ãžã³ã®ã¿ã€ãã«æ³šæããå¿ èŠããããŸãã
次ã«ã巚人ã®éªšã«æ²¿ã£ãŠå°ãæ©ããŸãããããã¯AngularJSãšReactJSã§ãããªãç§ã¯ãããã奜ãã§ã¯ãªãã®ãããªã圌ãã¯é ããªãã®ããæããŠã¿ãŸãããã äžèšã®ãã¹ãŠã®ç¥èã«åºã¥ããŠãä»ã®ãã³ãã¬ãŒããšã³ãžã³ããç§ãã¡ãäœæããäœæ¥ã§è¯ãçµæãåŸãããããšããäŒãããŸãã
ããããèŠèŽè ã®äžéšã¯ãç»é¢ã®äžéšã«ãããã€ããŒãäœãæå³ããã®ãèå³ããããŸããïŒ ç§ãã¡ã®éçºããŒã ã¯ã¿ã€ã«ãããç§ã¯å人çã«é£ã³èŸŒã¿ãŸãã ãã®ã¢ãããžãŒã¯ç§ã®é ã®äžã§çãŸããŸãããæ°Žäžã«ããå Žåã¯ãåããå°ãªãããã°ããã»ã©ãé žçŽ ãç¯çŽããã°ããã»ã©æ³³ããŸãã DOMã§ã¯ãã»ãŒåãããšãããããŸããDOMãžã®åŒã³åºããå°ãªãã»ã©ããŠãŒã¶ãŒããã¬ãŒãã«ééããå¯èœæ§ã¯äœããªããŸãã

ã²ãŒã ã®ã«ãŒã«ããå§ããŸãããã ãŠãŒã¶ãŒãšã¯ã¹ããªãšã³ã¹ã¯ãããŒãžã®åæåã®é床ã«äŸåããŸãã ç§ãã¡ã¯çãããŒãžãã£ãã·ã³ã°ã«æ·±ãæ ç±ã泚ãã§ããŸããããã£ãã·ã³ã°ãæ©èœããªããšããã«ççŸããããšã宣èšããå¿ èŠããããŸãã å人ã®ãµã€ããšã®æåã®æ¥è§ŠãæãéèŠã§ãããããæ©èœããŸããã æåã®èªã¿èŸŒã¿äžã«ãµã€ãã®é床ãäœäžããå Žåã2åç®ã¯ãŠãŒã¶ãŒãæ»ã£ãŠããªãå¯èœæ§ããããŸãã ããŒãžã®åæèªã¿èŸŒã¿ã¯éåžžã«éèŠã§ãã
2çªç®ã«éèŠãªããšã¯ãã€ã³ã¿ãŒãã§ã€ã¹ã®å¿çæ§ã§ãã ãŠãŒã¶ãŒããã¿ã³ãŸãã¯ãã§ãã¯ããã¯ã¹ãã¯ãªãã¯ããŠããã€ã³ã¿ãŒãã§ã€ã¹ãããã«å¿çããªãã£ãå ŽåããŠãŒã¶ãŒã¯ãµã€ããéããŠãã€ã³ã¿ãŒãã§ã€ã¹ãå¿çããå¥ã®ãµã€ãã«ç§»åã§ããŸãã
次ã¯ãªãœãŒã¹ã®æ¶è²»ã§ãã WebããŒãžã§ã¯ã2ã€ã®äž»ãªææšãéèŠã§ãïŒããã»ããµã®æ¶è²»ïŒå€ãã®äžèŠãªã¢ã¯ã·ã§ã³ãè¡ãå Žåãããã»ããµãå ç±ããã€ã³ã¿ãŒãã§ã€ã¹ã§ã¢ãã¡ãŒã·ã§ã³ãèšç®ããããåã«äœããæç»ããã®ã«ååãªæéããªãïŒãããã«å€ããäœæããå ŽåäžèŠãªãªããžã§ã¯ãã¯ãã¬ããŒãžã³ã¬ã¯ã¿ãŒã«è² æ ããããŸãã ã¬ããŒãžã³ã¬ã¯ã¿ãŒã§è² è·ãäœæãããšãå®æçã«åŒã³åºãããã¢ããªã±ãŒã·ã§ã³ã®å¿çæ§ãäœäžããŸãã
ãããŠæåŸã§ããããããããéèŠãªç¹ã§ãã ã©ã€ãã©ãªãµã€ãº åäžããŒãžã®ã¢ããªã±ãŒã·ã§ã³ã䜿çšããŠããå Žåã200ã300ãå Žåã«ãã£ãŠã¯400 KBã®JavaScriptãäœè£ããããŸãã ãã ããã³ã³ããŒãã³ãWebã¯ãç§ãã¡ã楜ãããã«ç§»åããæ¹åã«ãããŒãžãç°ãªãWebã³ã³ããŒãã³ãããæ§ç¯ãããŠããããšãæå³ããŸãã ããã«ããããã®Webã³ã³ããŒãã³ãã¯å€ãã®å ŽåãããŸããŸãªäŒæ¥ã§çç£ãããç¬èªã®ããã±ãŒãžãä»å±ããŠããŸãã
å€æ°ã®ãŠã£ãžã§ãããæ¿å ¥ãããããŒãžãæ³åããŠãã ããïŒçºæ¿ã¬ãŒãã倩æ°ãèªç©ºåžãè¿«æç ²ã®ããã·ã¥çšãŠã£ãžã§ãã...ãããŠãããã®åã³ã³ããŒãã³ãã®ééã¯300 KBã§ãããã¯JSã®ã¿ã§ãã ãããã£ãŠã5ã10 MBã®ããŒãžãç°¡åã«ååŸã§ããŸãã ãã¹ãŠãé 調ã«ãªããã€ã³ã¿ãŒãããã¯ã©ãã©ãé«éã«ãªããŸãããã¢ãã€ã«ããã€ã¹ãç»å Žããäœéãããã¯ãŒã¯ãç»å ŽããŸãããã¢ã¹ã¯ã¯åžã§ã¯ãªãããšã«ããªã³ãã«ã¯ã®ã©ããã§ã€ã³ã¿ãŒãããã䜿çšãããšã15 MBã®Webãµã€ãã¯ãŸã£ããåãå ¥ããããªãèŽ æ²¢ã«ãªããŸãã ç§ã®æèŠã§ã¯ãã©ã€ãã©ãªã®ãµã€ãºãéèŠã§ããçç±ã§ãã
å°ãäœãã®ããã€ãã®ã©ã€ãã©ãªãæ¯èŒããããªããŒãæ¯èŒããŸãããWebã³ã³ããŒãã³ãã©ã€ãã©ãªã®200 KBãå€ããããšããçç±ã§æ¯èŒããŸããã

ããã§ã¯ãäŒè©±ã®ãããã¯ãã€ãŸããã³ãã¬ãŒãã«ç§»ããŸãããã
Webã®éçºã«æºãã£ãŠããç§ãã¡ã¯çãæååãã³ãã¬ãŒããšã³ãžã³ã«ãã§ã«æ £ããŠããŸãã æååãã³ãã¬ãŒããšã³ãžã³ã¯ãäœæ¥ã®çµæãšããŠæååãè¿ããã³ãã¬ãŒããšã³ãžã³ã§ãã åŸã§HTMLã®innerHTMLãä»ããŠæ¿å ¥ããè¡ã ããã¯çŽ æŽããããå€ãããã®èº«è¿ãªã¡ã«ããºã ã§ãã ãã ããããã€ãã®æ¬ ç¹ããããŸãã äž»ãªæ¬ ç¹ã¯ããã³ãã¬ãŒããäœæããŠinnerHTMLã«è²Œãä»ãããã³ã«ãåã«ãã£ãDOMå šäœãç Žæ£ããæ°ããDOMãæ¿å ¥ããå¿ èŠãããããšã§ãã
ç§ã®èšæ¶ã§ã¯ãDOMã®æäœã¯éåžžã«é ãã§ãã 30åã®å±æ§ãæã€20åã®ã¿ã°ãã¹ããŒãã10åã®å±æ§ãæã€åã20åã®ã¿ã°ãæ¿å ¥ããå Žåãããã«ã¯ããªãã®æéãããããŸãã 20ããªç§ã¯ç°¡åã§ãã ããã«ãæååãã³ãã¬ãŒããšã³ãžã³ã§ã¯ãåäžã®å±æ§ãåäžã®ããã¹ãããŒããªã©ããã°ããæŽæ°ããããã®ã¢ã³ã«ãŒãæ®ãããšã¯ã§ããŸããã
ãããã®æºæé©æ§ãçºèŠããã®ã§ããããã®æ¬ ç¹ãåãé€ãæ¹æ³ãæ¢ãå§ããŸãããããã«ã€ããŠäœãã§ããã§ããããïŒ ãããŠããŽãŒã°ã«ãæåã«ææ¡ããã®ã¯ãDOM APIã䜿çšãããããšã§ããã ãã®ããšã¯éåžžã«åçŽã§ã¯ãããŸããã ãããã圌女ã«ã¯ãã©ã¹ããããŸãã

ããã¯jsperfã®ã¹ã¯ãªãŒã³ã·ã§ããã§ãã innerHTMLããã³JS DOMããhtmlããŒã¹ãæ¿å ¥ããã¹ããªã³ã°ãã³ãã¬ãŒããšã³ãžã³ã®ããã©ãŒãã³ã¹ã確èªãããã³ãããŒã¯ã ããã§ã¯ãAndroidã®ããã©ãŒãã³ã¹ãäžçªäžã«ãããJSDOM APIã«ããã¬ã³ããªã³ã°ãæ°åé«éåã§ããããšãããããŸãã ããã§ãçŽ3åã åæã«ããã¹ã¯ããããã©ãŠã¶ã§ã¯ãã®ãããªããã©ãŒãã³ã¹ã®åäžã¯ãããŸããã
çŽå幎åãGoogleã¯ãã¹ãŠã®ã¢ãã€ã«éçºè ã«ãmoboheddonããçŽæãå§ããŸããã ã€ãŸããã¢ãã€ã«ããã€ã¹ã«å¯Ÿå¿ããŠããªããã¬ã¹ãã³ã·ããã¢ããââãã£ããªãµã€ãã¯ãã¹ãŠãæ€çŽ¢çµæã§æ²èŠ³çã«ãªããŸãã ããã¯ãã¢ãã€ã«ããã€ã¹ã®æºåãã§ããŠããªãå Žåããµã€ãäžã®Googleããã®ãã©ãã£ãã¯ãå€§å¹ ã«æžå°ããããšãæå³ããŸãã
å®éããã®ã¹ã©ã€ãã¯ãDOM APIã䜿çšãããšãã¢ãã€ã«ããã€ã¹ã§ã®ã¬ã³ããªã³ã°ãå€§å¹ ã«é«éåã§ããããšãæ確ã«ç€ºããŠããŸãã ãããŠãããã¯Androidã ãã«åœãŠã¯ãŸããŸããã ãåç¥ã®ããã«ãææ°ã®Androidããã³iOSããã€ã¹ã¯ãã¹ãŠãã»ãŒåãæé©åã»ããã§åãWebKitãšã³ãžã³ã䜿çšããŠããŸããã€ãŸããDOM APIãä»ããŠããŒãžãã¬ã³ããªã³ã°ãããšããã¹ãŠã®iOSããã€ã¹ã§åãããã©ãŒãã³ã¹ã®åäžãåŸãããŸãã

ãã ããDOM APIã¯ããé¢åã§ãã ããã«ãDOMéšåãäœæã§ãã5ã€ã®åºæ¬çãªåŒã³åºãããªã¹ãããŸããã APIãä»ããŠçŽæ¥DOMã»ã¯ã·ã§ã³ãäœæããå Žåãããã°ã©ã ã®ã³ãŒãã«è¡šç€ºããã圢åŒã§ããããåŒçšããŸããã
15ã17æåã«åãŸã1ã€ã®èŠçŽ ãäœæãããšã30ã50æåã«ãªããŸããDOMAPIã䜿çšãããšã5ã10è¡ã®ã³ãŒããç°¡åã«æ³šãããšãã§ããŸãã ããã°ã©ãã®åŽåæéã¯è²Žéã§ããã€ãŸããhtmlãæåã®DOMããã°ã©ãã³ã°ã«çœ®ãæããããšã¯ã§ããŸããã

ããã§ã¯ãã³ãã¬ãŒããšã³ãžã³ãå¿ èŠã§ãã ãåç¥ã®ããã«ãæååãã³ãã¬ãŒããšã³ãžã³ã¯äœéã§ãããDOMãã³ãã¬ãŒããšã³ãžã³ãDOM APIãä»ããŠåäœãããã³ãã¬ãŒããšã³ãžã³ãå¿ èŠã§ãããéåžžã®ãã³ãã¬ãŒããšã³ãžã³ã§ã®åäœã«äœ¿çšããããã¹ãŠã®å©ç¹ã䜿çšã§ããŸãã
ããã§ã¯ããã€ãã£ãã®JSDOM APIã䜿çšããªããšããããšã¯å¥ãšããŠãDOMããäœãåŸãããã®ã§ããããïŒ ãããã䜿çšãããšãDOMãªããžã§ã¯ããå€æ°ã«ä¿åããŠãåŸã§ãã°ããæŽæ°ã§ããŸãã DOMãã³ãã¬ãŒããšã³ãžã³ã䜿çšãããšãåãDOMéšåãæ°å䜿çšã§ããŸãã
ã©ãããæå³ã§ããïŒ Webã¹ãã¢ããŒãžã«ã¢ã¯ã»ã¹ãããšããŸãã ãŠãŒã¶ãŒã¯ååã®1ã€ã®ã«ããŽãªãå ¥åããååã®1ã€ã®ãªã¹ãã®ããŒã¿ãæºåããããã³ãã¬ãŒãã«çœ®ãæããããŸãã 人ãååã®å¥ã®ã«ããŽãªã«å ¥ããšãä»ã®ããŒã¿ãåããã³ãã¬ãŒãã«çœ®ãæããããŸãã å®éãDOMãåäœæããã®ã§ã¯ãªããDOMã®åãéšåã䜿çšããŠããŒã¿ã衚瀺ããŸãã ããã«ãããããã»ããµãªãœãŒã¹ãã¡ã¢ãªãããã³å Žåã«ãã£ãŠã¯ããã°ã©ãã®æéãå€§å¹ ã«ç¯çŽã§ããŸãã
ç§ãå¿ èŠãšããããŒã«ã¯DOMãã³ãã¬ãŒããšã³ãžã³ã§ãããšããèãã«æ°ä»ããåŸãæ¥çã«ãã§ã«ååšãããã®ãDOMãè¿ éãã€å¹ççã«æäœãããã°ããã¬ã³ããªã³ã°ããããã«äœ¿çšã§ãããã®ã確èªãã«è¡ããŸãããïŒ
次ã«ãç§ã®æèŠã§ã¯ã巚人ãã©ãã§ã€ãŸãããããã話ãããŸãã

ç§ã話ãããæåã®å·šäººã¯AngularJSã§ãã
ç§ã«ã¯AngularJSãæåã«ã€ãŸãããããã§ãã ããã䜿çšããå Žåããããããã¹ãŠã®ãã³ãã¬ãŒããDOMã»ã¯ã·ã§ã³ïŒããŸãè¯ãã¹ã¿ã€ã«ã§ã¯ãããŸããïŒãŸãã¯æååãšããŠã¯ã©ã€ã¢ã³ãã«éä¿¡ãããããšã«æ°ã¥ããã§ãããã ã©ã€ãã©ãªãããŒãããããšãAngularã¯è¡ãŸãã¯DOMãå®éã®ãã³ãã¬ãŒãã«ã³ã³ãã€ã«ããããã«åŒ·å¶ãããŸãã ããã¯ã¯ã©ã€ã¢ã³ãã§çºçããŸãã
èå³æ·±ãç¶æ³ãæ³åããŠãã ããã ãŠãŒã¶ãŒã¯ããŒãžã«ã¢ã¯ã»ã¹ãããã¹ãŠã®JSãããŒãããŸããããã¯ãAngularã¢ããªã±ãŒã·ã§ã³ã®å Žåã¯éåžžã«å€ãã100ã200ã300 Kãã€ãã«ãªããŸãã ãã®åŸãåè¡è§£æãã³ãã¬ãŒããã³ã³ãã€ã«ãéå§ããŸãã ããã¯ãã£ãäžã€ã®ããšã«ã€ãªãããŸã-Angularã¢ããªã±ãŒã·ã§ã³ã®åæããŒãã¯ããã®ã³ã³ãã€ã«ã«ããïŒãŠãŒã¶ãŒããµã€ãã§äœæ¥ãã以å€ã®ããšãè¡ãéïŒ0.5ç§ã1ç§ç¶ãããšããããŸãã ãã³ãã¬ãŒããã³ã³ãã€ã«ããããã»ã¹ã«2ç§ãããã£ããµã€ãã«åºäŒããŸããã ããã«ããã®åé¡ã¯éªã ããŸåŒã®ããã«æé·ããŸããã¢ããªã±ãŒã·ã§ã³å ã®ãã³ãã¬ãŒããå€ãã»ã©ãåäžããŒãžã®ã¢ããªã±ãŒã·ã§ã³ãè€éã«ãªãã»ã©ããã³ãã¬ãŒãã®åæã³ã³ãã€ã«ã«è²»ããæéãé·ããªããŸãã

次ã®åé¡ã¯Angularã«ãããŸãã ç§ãã¡ã¯çãAngularãGoogleã®çŽ³å£«ã«ãã£ãŠæåã®ã¯ãŒã«ãªäž¡é¢ãã€ã³ãã£ã³ã°ãã¬ãŒã ã¯ãŒã¯ãšããŠç§ãã¡ã«å£²ãããããšãèŠããŠããŸãã ããã«ããã®åæ¹åãã€ã³ãã£ã³ã°ã¯ããããããéããŠå®è£ ãããŸãã åŸã§DOMã«è¡šç€ºããããã«ããŒã¿æ§é ã«ãã³ã°ã¢ãããã$ãŠã©ããã£ãŒã ã¹ã©ã€ãã«ã¯é¢çœãåçããããŸãããèŠãŠããŸããã ãã®äžã§å¯äžèå³æ·±ãã®ã¯ããã®çŽ æŽããããµã€ã¯ã«ã§ãããã®ãµã€ã¯ã«ã§ã¯ããã¹ãŠã®$ãŠã©ãããã·ã¹ãã ã«ãããã¹ãŠã®ããŒã¿ã«äœ¿çšãããŸãã ããã«ããã¡ãããããã¥ã¡ã³ããšãã¹ãŠã®ãã¥ãŒããªã¢ã«ã§ã$ watchersããã©ããŒããå¿ èŠãããããšãã ããæããŸããã æåéãã次ã®ããšã«ã€ãªãããŸãã ããæç¹ã§ããã°ãããã¢ããªã±ãŒã·ã§ã³ã¯100ããªç§ããšã«é ããªãå§ããŸãã ã¢ãã¡ãŒã·ã§ã³ãé ããªãå§ããã¡ã¢ãªãæµãå§ããŸãã å€ãã®$ãŠã©ããã£ãŒãèš±å¯ããããšã¯äžå¯èœã§ãã å€æ°ã®ãŠã©ããã£ãŒãäœæãããšããã«ãã¢ããªã±ãŒã·ã§ã³ã®é床ãèªç¶ã«äœäžãå§ããŸãã ããã§ã¯ããã¬ãŒããåãé€ãããã ãã«ã埮åŠã«èªåèªèº«ãæŽç·Žããäœã§ããã$ãŠã©ããã£ãŒã®æ°ãæžãããAngularã䜿çšããäž¡é¢ãã€ã³ãã£ã³ã°ã®é©çšãæåŠãå§ããŸãã

ããã«ãAngularã®ã¢ãŒããã¯ãã£äžã®æ¬ é¥ã¯ãAngularã«ã¯DOMãæäœããããã®é©åã«èšè¿°ãããå¯äžã®æ¹æ³ããªããšããããšã§ãã ãã£ã¬ã¯ãã£ãã¯å®è³ªçã«ç¬ç«ããŠããããããããé©åãšæãããDOMã§åäœããŸãã ããããAngularãã£ã¬ã¯ãã£ãã調ã¹ããšãäžéšã®ãã£ã¬ã¯ãã£ããé«éãäžéšãäœéãäžéšã®ãã£ã¬ã¯ãã£ããéåžžã«äœéãšããŠããŒã¯ã§ããããšãããããŸããã
ng-repeatã䜿çšããŠããå Žåã100åã®èŠçŽ ãè©°ã蟌ã¿ã$ãŠã©ããã£ãŒãååšããå Žåãããããã¬ã³ããªã³ã°ã«éåžžã«é·ãæéããããããšãããããŸãã åé¡ã¯éåžžã«åºããããAngularã§äœæ¥ããå ŽåïŒä»¥åã®ããŒãžã§ã³ã®åºåã¯ç¹ã«Angularäžã§æ§ç¯ãããŠããïŒãç¬èªã®ng-repeatãäœæããå¿ èŠããããŸããã ããã¯åŸæ¥å¡ã®ã¢ã³ãã³ã»ãã¬ã·ããã§ãã«ãã£ãŠè¡ãããå€ãã®äŒè°ã§ããã«ã€ããŠè©±ããŸããã ããã«ãç§ã®æèŠã§ã¯ãæå°åãããã©ã€ãã©ãªãµã€ãºã®50 KBã¯ãŸã å°ã倧ããã§ãã ã€ãŸã äœãæã£ãŠããŸããïŒ Angularã³ãŒããèŠããšããããã®50 Kãã€ãã«ã¯ç¬èªã®ã¯ã©ã¹ã·ã¹ãã ããããŸãããUnderscoreã®ããŒãžã§ã³ã¯éåžžã«äœå質ã§ãã ãããŠãããããã¹ãŠã¯ã50 Kãã€ãã®ã³ãŒãã®ãã¬ãŒã ã¯ãŒã¯å ã§å®å šã«ç¡æã§å ¥æã§ããŸãã

以äžã ç§ã®æèŠã§ã¯ãã¯ããã«åªãããã¬ãŒã ã¯ãŒã¯ã¯ReactJSã§ãã ã€ã³ã¿ãŒããããã©ã®ããã«ããã«ããŠããã®ããå€æãããšããã¹ãŠã®æåã®ããã°ã©ããŒã¯ãåžžã«ããã³ããšã³ããã³ããŒã§ãããšã¯éãããAngularã䜿çšããåãã§ããŸããã virtualDOMãDOMãšã®äœæ¥ãé«éåã§ãããšã¯æããŸããã
virtualDOMãæäŸãããã®ãã芧ãã ããã VirtualDOMã¯ãReactJSãå®éã®DOMãäœæãããœãŒã¹ã§ãã å®éã®DOMã«å ããŠãã©ãããã§ãå ¥æã§ããªãïŒvirtualDOMã䜿çšãããšäœæã§ããïŒã®ã«å ããŠãReactJSã¯virtualDOMãã¡ã¢ãªã«ä¿æããŸããããã¯åé·æ§ãšåŒã°ããŸãã
VirtualDOMã¯å®éã®DOMããããããã«å°ããããããã5åã§ãããå®éã«ã¯ãvirtualDOMã®2ã€ã®ã³ããŒãã¡ã¢ãªã«ä¿æããå¿ èŠããããŸãã ã€ãŸã å®éã®DOMãä¿æããvirtualDOMã«å®éã®DOMã®åæ ãä¿æããŸããããã«ãvirtualDOMã§divãäœæãããã³ã«ãDOMã®å¥ã®ã³ããŒãäœæããŸãã 1ã€ã®DOMããããŸããããçŸåšã¯3ã€ãããŸã-ããã§ããŸããïŒ ããã«ãããŒã¿ãå€æŽãããã³ã«ãvirtualDOMã®å¥ã®ã³ããŒãäœæããŸããããã¯3çªç®ã®ã³ããŒã§ãããæåããäœæããŸãã
ããã«ãããã¬ããŒãžã³ã¬ã¯ã¿ãŒãšããã»ããµã«æ·±å»ãªè² æ ãããããŸãã ããã«ãç§ã®æèŠã§ã¯ãã©ã€ãã©ãªã¯ãŸã æ²¹ã£ãœã-35 KBã ãããŠåã³ã圌ãã¯ã¯ã©ã¹ã·ã¹ãã ãæç»ããããŒããã·ã¥ãæç»ããããšã決å®ããŸãããäœããã®çç±ã§ãªãªãžãã«ã¯é©ãããããã¯ãã¹ãŠ35 KBã«è©°ããããŸããã ããã«ãæãããããã©ãŒãã³ã¹ãæäŸãããšæãããç¥è©±çãªã¢ã«ãŽãªãºã ãçµã¿èŸŒãŸããvirtualDOMããããŸãã
ç¹ã«virtualDOMãšReactã®æ¬¡ã®åé¡ã¯ãReactJSãããŒã¿ã®ã»ãã³ãã£ã¯ã¹ã«ã€ããŠäœãç¥ããªãããšã§ãã ãã®éåžžã«åçŽãªäŸãèŠãŠã¿ãŸãããã

ããã§ã¯ã2ã€ã®ãã¹ãããã<div>ããããå¥ã®<i>ã¿ã°ãåã蟌ãŸããŠããŸãã virtualDOMãä»ããŠå€ãå€æŽããã«ã¯ãReactå ã®virtualDOMã¢ã«ãŽãªãºã ã§3ã€ã®ã¿ã°ãš1ã€ã®ããã¹ãå€ãæ¯èŒããå¿ èŠããããŸãã ããŒã¿ã®ã»ãã³ãã£ã¯ã¹ãããã£ãŠããã°ãããã¹ãå€ã®ã¿ãæ¯èŒããã ãã§ååã§ãããã³ãã¬ãŒãã¯ããã<div>å ã«ã¯åžžã«å¥ã®<div>ãããã次ã®<div>ã¿ã°<i>å ã«ãããšèšã£ãŠããããã§ã... ããã¯æ¬åœã«ãªãŒããŒãããã§ãã
ããã«ãReactã§ããã°ã©ãã³ã°ããå Žåã¯ãpure-render-mixinã®ãããªãã®ã«ç²ŸéããŠããŸãã ãã®æ¬è³ªã¯ãvirtualDomã§ã®äœæ¥ããªããããšã§ãã 挫ç»ã«è¿ãéåžžã«èå³æ·±ãç¶æ³ããããŸãã æåã¯ãGoogleã®çŽ³å£«ãReactãæ°å¹Žéã«ããã£ãŠç§ãã¡ã«è²©å£²ããŸãããããã«ãããvirtualDOMã䜿çšããŠDOMã§ã®äœæ¥ãéåžžã«é«éåãããŸãããDOMã§ãã°ããäœæ¥ããã«ã¯ãvirtualDOMãé€å€ããå¿ èŠããããŸã ãããã£ãããããã£ãã
ãããŠä»ãäœãä»ã®ãã®ã ç§ã¯æ€çŽ¢ãããã£ã-å€åå°çäžã«å³æžé€šããããäœããã£ãšè¯ãããšããã人ã ãããã ç¹å¹è¬ã®1ã€ã®ã©ã€ãã©ãªãèŠã€ããããšããŸããã§ããããReactãé«éåããããããŸãã¯ç¬èªã®ã©ã€ãã©ãªãäœæããããã«äœ¿çšã§ããã©ã€ãã©ãªãèŠãèŠãããã£ãã®ã§ãã ãããŠãããã«ç§ãèŠã€ãããã®ããããŸãã

2ã€ã®èå³æ·±ãã©ã€ãã©ãªãæ€èšããŸãã ãããã®æåã®ãã®ã¯RiotJSã§ãã
ç§ã®æèŠã§ã¯ãRiotJSãæ£ããAngularJSã§ããã®ã¯ãåã«ã©ã€ãã©ãªãµã€ãºã5 Kãã€ãã ããã§ãã 圌ãã¯ãAngularJSãšãŸã£ããåãã¢ã€ãã¢ãåãå ¥ããŸããããlowdashãæžãçŽããªãã£ãã®ã§ãã 圌ã¯ãã§ã«æžãããŠããŸããã ç·ãã¡ã¯æžãçŽãããã¯ã©ã¹ã·ã¹ãã ãçºæãããäœãããŸããã§ããã 5 kbã©ã€ãã©ãªãååŸããŸããã ããã©ãŒãã³ã¹ã¯AngularJSãããåªããŠãããã¢ã€ãã¢ã¯ãŸã£ããåãã§ãã ããã«ãRiotJSã§äœ¿çšããããã³ãã¬ãŒãã¯ããŒã¿ã»ãã³ãã£ã¯ã¹ã䜿çšãããããããã©ãŒãã³ã¹ãå€§å¹ ã«åäžããŸãã ããããåé¡ã¯æ®ããŸãã-ãã³ãã¬ãŒãã®ã³ã³ãã€ã«ã¯ãŸã ã¯ã©ã€ã¢ã³ãã§è¡ãããŠããŸãã ããã»ã©é«éã§ã¯ãããŸããããã¯ããã«åªããŠããŸãã

ç§ã®æ³šç®ãéãã次ã®ã©ã€ãã©ãªã¯ãPaperclipJSã§ããã
PaperclipJSã¯ãå€ãã®éåžžã«èå³æ·±ãæé©åã䜿çšããŠããŸãã ç¹ã«ãcloneNodeã䜿çšããŠãã³ãã¬ãŒããäœæããããã©ãŒãã³ã¹ãå€§å¹ ã«åäžããããšã瀺ããŸããããã®ãœãªã¥ãŒã·ã§ã³ã䜿çšãããšãPaperclipJSãéçºè ã«ãšã£ãŠããéæã§ããããããããããšãã§ããŸãã
ãããããã®ã©ã€ãã©ãªã«ã¯2ã€ã®æ¬ ç¹ããããŸãããããã¯éåžžã«å€§ããã40 KBã§ãããReactãè¶ ããŠããŸãã è¯ãã¢ã€ãã¢ã«ãããããããéçºã¯ããªãé ãã§ãã ãã®ã©ã€ãã©ãªã¯æ°å¹ŽåããååšããŠããŸãããããŸã ããŒã¿æ®µéãé¢ããŠããŸããã
ãããã®ã©ã€ãã©ãªãŒãä»ã®ã©ã€ãã©ãªãŒãšå¯Ÿè©±ããhtml5ã®ç¬¬äžäººè ãèªãã§ãDOMã§ã®äœæ¥ãé«éåã§ãã以äžã®ææ³ã®ãªã¹ããæãã€ãããšãã§ããŸããã

æåã®ãã®ã¯VirtualDOMã§ãã ç§ã¯ãã®å©ç¹ãé·ãéæ¢ããŠããŸãããããã£ã1ã€ããèŠã€ãããŸããã§ãããDOMã®åŒã³åºãåæ°ãæžããããšãã§ãããããçç£æ§ãåäžããŸãã ãã ããç§ã®æèŠã§ã¯ãDOMã®ã³ããŒãäœæããããã®ãªãŒããŒãããã¯äŸç¶ãšããŠéèŠã§ãã Reactã§äœ¿çšãããŠããç§å¯ã®ããŒã«ããŸã æ®ã£ãŠããæŽç·Žãããæ¯èŒã¢ã«ãŽãªãºã ã¯ãçŽæãããã»ã©é«éã§ã¯ãããŸããã ãããã©ã®ããã«æ©èœããããç解ããããã«ã2æ¥éãéãããŸãã ãããŠãç§ã®æèŠã§ã¯ãããã°ã§èª¬æããããã®ãã¹ãŠã®éæ³ã¯ããã«ã¯ãããŸããã ããã«ãvirtualDOMã¯ãã¢ã«ãŽãªãºã ãããŒã¿æ§é ã«ã€ããŠäœãç¥ããªããšããåé¡ãæ±ããŠããŸãã ããŒã¿æ§é ã«ã€ããŠã¯äœãããããŸãããããã¹ãŠã®ã©ãããŒããã¹ãŠã®ã¬ã€ã¢ãŠãèŠçŽ ã¯ããããã®æ¯èŒã«virtualDOMã¢ã«ãŽãªãºã ãé¢äžããå¿ èŠããããããããã©ãŒãã³ã¹ã«æªåœ±é¿ãåãŒããŸãã

éåžžã«é·ãéç¥ãããŠããæè¡ã¯cloneNodeã®äœ¿çšã§ãããPaperclipJSãšDocumentFragmentã®ãã¬ãŒã ã¯ãŒã¯ã§æ¢ã«è¿°ã¹ãŸããã ããã2ã€ã®ææ³ã¯ãçç£æ§ãåäžãããããã«äœ¿çšãããŸãã ç§ã®ç¥ãéããAngularJSãŸãã¯ReactJSã®ãããã®ææ³ã䜿çšãããŠããŸããã ãã ããjsperfã䜿çšãããã³ãããŒã¯ã®ã¹ã¯ãªãŒã³ã·ã§ããã§ã¯ãããã«ãããDOMã䜿çšããäœæ¥ãå°ãªããšã3åé«éåã§ããããšãæ確ã«ç€ºãããŠããŸãã ããªãè¯ãç¿æ £ã§ãã䜿çšããããšã匷ããå§ãããŸãã

ããã«ãå®å šã«è¡šé¢ã«ãã次ã®ææ³ã¯ãReactãã¥ãŒããªã¢ã«ã§ãæé»çã«èŠã€ãããŸãããäºåã«DOMã»ã¯ã·ã§ã³ãäœæããããšã§ãã ã©ãããæå³ã§ããïŒ äººãé»åãããŒã®ãªã³ã©ã€ã³ã¹ãã¢ã®ããŒãžã«ã¢ã¯ã»ã¹ãããšããŸãã ãã£ãŒãããã®ååãè³Œå ¥ãããã£ãŒãããã®äŒç€Ÿã®ååã玹ä»ããŸãã ãã®æç¹ã§ãæ€çŽ¢èŠæ±ããµãŒããŒã«éä¿¡ãããŸãã ãµãŒããŒããã°ã©ããŒãé«éãã€è¶ é«éã®å Žåã20ããªç§ã§å¿çãåŸãããšãã§ããŸãããŠãŒã¶ãŒã¯ãããã®20ããªç§ã®éãå®è³ªçã«äœãããŸããã ãã®æç¹ã§ããµãŒããŒããè¿ãããããŒã¿ã®DOMæ§é ãäœæã§ããŸãã éåžžã«ç°¡åãªç·Žç¿ã ãªãåºã䜿çšãããªãã£ãã®ãã¯ããããŸããã ç§ã¯ããã䜿çšããããã¯éåžžã«ã¯ãŒã«ã§ããããšãå€æããŸããã
åèšãäœãåŸãããŸããïŒ ãµãŒããŒã«èŠæ±ãéä¿¡ãããµãŒããŒããã®å¿çãåŸ æ©ããªããããµãŒããŒããéä¿¡ãããããŒã¿ã®DOMæ§é ãæºåããŸãã ãµãŒããŒããã®åçãå±ããšãå®éã«ã¯ãŸã 解æããå¿ èŠããããŸãã ãããŠãã®å Žåãããã¯åã«Jsonãåãå ¥ããããšã§ã¯ãªããäœããã®åœ¢ã§ãããé©å¿ãããããšã§ãã ãã®æç¹ã§DOMã®æºåããã§ã«æŽã£ãŠããå ŽåãJSãããŒã¿ã調æŽããŠDOMã«æ¿å ¥ããããŒãžã«ããŒã¿ãè¿œå ããããã«å¿ èŠãª2-3-4ããªç§ãè²»ããããšãã§ããŸãã
ããã䜿çšããããšã匷ããå§ãããŸãããã¬ãŒã ã¯ãŒã¯ã§ã¯æ瀺çã«ãã®ããšã¯ãµããŒããããŠããŸãããããµãŒããŒã«ãªã¯ãšã¹ããéä¿¡ãããšãã«æã§èŠçŽ ãäœæã§ããŸãã
, , , , .

temple. , , 2000 .
? JavaScript , .. , JavaScript . DOM . . , , gzip' â 700 . , , â DOM.
, .

. , .

, . , . forall if. . , React, , View . , , , . , Presenter ViewModel, , , .
, . , , , , , .
.

, update. DOM. DOM API. , , DOM remove. ãã¹ãŠãéåžžã«ç°¡åã§ãã

DOM? , , . : « 10 ». , get, DOM , . ã€ãŸã DOM .
? , 20 , , , 20, 200-300 , DOM , .. .
â , DOMContentLoaded.
DOMContentLoaded , , callback' , 100 . -. , DOM , , .

DOM. , , update React. React setState, . , , React, ( , , â DOM ), , React 50-60, .
, JavaScript, . DOM , . =2, .. , update, , . , value. =2, . update , . , â property =1, .

. , , , , , . , pool.release.

. . , , jsperf «» «». â , â React. C React , React, , , 5 , Angular . , ? 30 Chrom', 10-15 Firefox'. ? , , . create element, create text, node appendchild. . , . 35 JavaScript, React, â .

, â soft Update. Soft Update â , . , virtualDOM : «, , ». , virtualDOM pure-render-mixin. , . VirtualDOM .

, hard update. Hard Update â , , , . pure-render-mixin, . . hard update , virtualDOM.
VirtualDOM . React-, , virtualDOM . , virtualDOM, , , . React 20, 10.

, , . Aviasales â Facebook, -, ⊠, â , . . . . React DOM delegate, AngularJS . , . . domdelegate Ftlabs. Ftlabs â IT- «Financial Times». , , , , 5 . , .

, , : aviasales.ru aviasales.ru. 10 , , 58 . , single page .
, , , 15 , 70 . , . , 70 single page application, . , 200.

, open source . , url . .
, , , . , , , , gulp grunt .
é£çµ¡å
» BSKaplou
» bk@aviasales.ru
â - FrontendConf . 2017 , 8 .
HighLoad++ " ". , , ( , ). .
:
- / (.);
- Your hero images need you: Save the day with HTTP2 image loading / Tobias Baldauf (Akamai Technologies);
- The Accelerated Mobile Pages (AMP) Project: What lies ahead? / Paul Bakaus (Google);
Angular 2 / (IPONWEB);
Instant Loading: Building offline-first Progressive Web Apps / Alex Russell (Google);