Upgrade to Pro — share decks privately, control downloads, hide ads and more …

まだ DOM 操作で消耗してるの? / ngineerxiv #3

Avatar for Yuki Ishikawa Yuki Ishikawa
June 06, 2015
54

まだ DOM 操作で消耗してるの? / ngineerxiv #3

(だいたい)新卒エンジニア向け技術交流会 vol.3
https://ngineerxiv.doorkeeper.jp/events/24857

Avatar for Yuki Ishikawa

Yuki Ishikawa

June 06, 2015
Tweet

Transcript

  1. 

  2. ʙ 2004 ೥ • JS ͸ʮ Web ʹͪΐͬͱಈ͖ΛՃ͑Δ΋ͷʯ • ʮJS͕ಈ͔ͳ͍؀ڥͷ͜ͱ΋


    ɹߟ͑ͳ͖ΌμϝͰ͠ΐʂʂʂʯ • Ϧονͳ͜ͱ͸ Flash Ͱ΍Ε
  3. Ajax ͷ஀ੜ • ࣮͸ੲ͔Β͚͋ͬͨͲ஌ΒΕ͍ͯͳ͔ͬͨ
 XMLHttpRequest ͕ Google Maps ʹΑͬͯ
 ࠶ൃݟ͞ΕͯҰ༂༗໊ʹ

    • Ajax (Asynchronous JavaScript + XML) ͱ͍͏
 ݴ༿͕ੜ·ΕΔ • ͔͠͠·ͩ·ͩෑډ͕ߴ͍
  4. $()

  5. ͢΂ͯͷ DOM ͷঢ়ଶ؅ཧ • Ͳͷ DOM ͕ࠓͲΜͳ஋Λ͍࣋ͬͯΔ͔ • Ͳͷ DOM

    ͔ΒԿͷΠϕϯτ͕ൃՐ͢Δ͔ • ͜ͷ஋͕มΘͬͨΒͲͷ DOM Λ
 ॻ͖׵͑ͳ͍ͱ͍͚ͳ͍͔
  6. Single Page Application • HTML5 ͷ history.pushState ʹΑͬͯ
 URL ͷಈతॻ͖׵͕͑Մೳʹ

    • ϖʔδભҠͱ͍͏֓೦Λ௒ӽͨ͠
 ΫϥΠΞϯταΠυϓϩάϥϛϯάͷۃ஍
  7. ΋͏ DOM ૢ࡞͠ͳ͍͍ͯ͘ • มߋ͕͋ͬͨΒ HTML શମΛॻ͖׵͑Δ • ৗʹ࠷৽ͷঢ়ଶͷ DOM

    Λ
 ϨϯμϦϯά͠ଓ͚Ε͹͍͍͚ͩ • React ͕಺෦Ͱ diff / patch ͯ͘͠ΕΔ͔Β
 ஗͘ͳ͍