HTML5アプリにおけるパフォーマンスの基礎知識

 HTML5アプリにおけるパフォーマンスの基礎知識

HTML5 APP CONFERENCE 2018での発表資料です。

0fa1c2ed2eb4a18ddec3dd70cb1f72db?s=128

Yosuke Onoue

July 08, 2018
Tweet

Transcript

  1. )5.-ΞϓϦʹ͓͚Δ ύϑΥʔϚϯεͷجૅ஌ࣝ ͓ͷ͏͑ )5.-"11$0/'&3&/$& ೥݄೔

  2. ࣗݾ঺հ w ඌ্༸հ :PTVLF0OPVF  w ೔ຊେֶจཧֶ෦৘ใՊֶՊॿڭ w ৘ใՄࢹԽɺ਺ཧ࠷దԽɺҙࢥܾఆࢧԉͷݚڀ w

    ՄࢹԽγεςϜͷ։ൃʹ8FCϑϩϯτΤϯυٕज़Λ࢖༻ w -JHIUIPVTFͷείΞվળ͕ϚΠϒʔϜ
  3. )5.-ΞϓϦʁ w 8FCΞϓϦɺ18" w ϞόΠϧΞϓϦ w *POJDɺ3FBDU/BUJWFɺFUD w σεΫτοϓΞϓϦ w

    &MFDUSPOɺFUD ຊൃදͰ͸ ʮ)5.-$44+BWB4DSJQUΛ
 ɹத৺ʹߏ੒͞Εͨ8FCΞϓϦʯ Λ૝ఆ͠·͢
  4. ԿނύϑΥʔϚϯεΛߟ͑Δ͔ʁ

  5. 8FCΞϓϦ͸஗͍ͱݴΘΕΔ࣌୅ʜ w ߟ͑ͳ͠ʹ։ൃΛਐΊΔͱύϑΥʔϚϯε͸མ͕ͪͪ w ػೳ௥Ճ͸సૹྔͷ૿Ճ΋ট͘ w ͔֬ʹ஗͍8FCαΠτɾ8FCΞϓϦ͕ଟ͍ w Ϣʔβʔ༏Εͨ69ͷαʔϏεΛ޷Ή ύϑΥʔϚϯε͸Ձ஋ΛੜΈग़࣌͢୅ʹʂ

  6. 1SPHSFTTJWF8FC"QQT w IUUQTEFWFMPQFSTHPPHMFDPNXFCQSPHSFTTJWF XFCBQQT w 8FCαΠτͱωΠςΟϒΞϓϦͷ
 ͍͍ͱ͜औΓΛͨ͠8FCΞϓϦ w 1SPHSFTTJWF&OIBODFNFOU w

    ߴ͍ϢʔβϏϦςΟͷ࣮ݱ w ϏδωεϑϨϯυϦʔ
  7. w )5514 w Ϩεϙϯγϒ w ΦϑϥΠϯ w ϗʔϜը໘௥Ճ w௿଎ճઢରԠ w

    Ϋϩεϒϥ΢βରԠ w εϜʔζͳϖʔδભҠ w ϖʔδຖͷ63- 18"$IFDLMJTU IUUQTEFWFMPQFSTHPPHMFDPNXFCQSPHSFTTJWFXFCBQQTDIFDLMJTU ϕʔεϥΠϯཁ݅ ໛ൣతͳ18" w ΠϯσοΫεՄೳ w 69 wύϑΥʔϚϯε w Ωϟογϡ w ௨஌ w ͦͷଞ
  8. 8FCΞϓϦͷύϑΥʔϚϯε w ύϑΥʔϚϯεͷछྨ w ϖʔδ͕͙͢ʹදࣔ͞ΕΔ w ϖʔδ͕ܰշʹಈ࡞͢Δ w 3"*-ύϑΥʔϚϯεϞσϧ w

    3FTQPOTFɺ"OJNBUJPOɺ*EMFɺ-PBEJOH w IUUQTEFWFMPQFSTHPPHMFDPNXFC GVOEBNFOUBMTQFSGPSNBODFSBJM
  9. 3BJMύϑΥʔϚϯεϞσϧ w 3FTQPOTF w Ϣʔβૢ࡞ʹରͯ͠NTҎ಺ʹԠ౴ w "OJNBUJPO w NTϑϨʔϜʢ'14ʣ w

    *EMF w ΞΠυϧ࣌ؒΛ׆༻͢Δ w -PBEJOH w NTҎ಺ʹॳظը໘දࣔ
  10. ύϑΥʔϚϯεվળͷํ๏ 3 " - +BWB4DSJQUॲཧͷߴ଎Խ ˓ ˓ ˓ όοΫάϥ΢ϯυॲཧ ˓

    ελΠϧͷ࠷దԽ ˓ ˓ ඞཁϦιʔεͷ࡟ݮ ˓ ϦιʔεͷઌಡΈ ˓ ˓
  11. +BWB4DSJQUॲཧͷվળ

  12. ஗͍+BWB4DSJQUॲཧͷվળ w ΞϧΰϦζϜͷվળ w 8FC8PSLFS w ॲཧͷฒྻԽɺόοΫάϥ΢ϯυ࣮ߦ w 8FC"TTFNCMZ w

    ॲཧͷߴ଎Խɺ$ࢿ࢈ͷར༻ɺ+4Ҏ֎ͷݴޠͷར༻ w (1(16ʢ8FC(-ɺ8FC(16ʣ w (16Λ࢖ͬͨॲཧͷߴ଎Խ
  13. 8FC8PSLFS w 8FCϒϥ΢β্Ͱͷฒྻॲཧ w +BWB4DSJQU͸جຊతʹγϯάϧεϨου w ॏ͍ԋࢉॲཧͰ6*εϨουΛ઎༗͠ͳ͍Α͏ʹ͢Δ w 8PSLFSΛۦ࢖͢ΔͨΊͷϓϩδΣΫτߏ੒XJUI XFCQBDL

    w IUUQTRJJUBDPN@MJLSJUFNT EEDBCBDGF w ྫɿIUUQTFHSJEKQ
  14. 8FC"TTFNCMZ w ϒϥ΢β্Ͱ࣮ߦՄೳͳܰྔόΠφϦϑΥʔϚοτ w BTNKT΍1/B$-ͷޙܧ w +BWB4DSJQUҎ֎ͷݴޠ͔ΒίϯύΠϧ͢Δͷ͕Ұൠత w $ɺ$ ɺ3VTUɺ(Pɺ"TTFNCMZ4DSJQUɺFUD

    ωοτϫʔΫՄࢹԽͷྫ w %KT൛ɿ໿ඵ w 3VTU൛ɿඵʢYʣ
  15. ϦιʔεಡΈࠐΈͷվળ

  16. -PBEJOHͷվળ w جຊ w ແବΛͳ͘͢ w ෆඞཁͳεΫϦϓτɺελΠϧɺը૾ɺϑΥϯτɺʜ w Ͳ͏͠Α͏΋ͳ͘ͳͬͨΒ w

    ੩తαΠτੜ੒ w αʔόαΠυϨϯμϦϯά w131-
  17. ෆඞཁͳϥΠϒϥϦͷ࡟ݮ w ϥΠϒϥϦ͕૿͑Δͱ-PBEJOH࣌ؒ͸৳ͼΔ w 3FHVMBS(ʢLCQT NT355ʣ w ։ൃऀͷָ͞ΛͲ͜·ͰϢʔβʔʹෛ୲ͤ͞Δ͔ʁ w Ͳ͏ͯ͠΋ඞཁͳΒ

    w 5SFF4IBLJOHͰඞཁ࠷খݶͷ෦෼͚ͩಡΈࠐΉ w -B[Z-PBEJOHΛߦ͏
  18. 131-ύλʔϯ w 1VTI 3FOEFS 1SFDBDIF -B[ZMPBE w ϝϦοτ w 55*ʢ5JNF5P*OUFSBDUJWFʣͷ࠷খԽ

    w Ωϟογϡޮ཰ͷ࠷େԽ w ։ൃɾσϓϩΠϝϯτͷ؆ૉԽ w &4.PEVMFTʹΑΔޮ཰తͳεΫϦϓτಡΈࠐΈ IUUQTEFWFMPQFSTHPPHMFDPNXFCGVOEBNFOUBMTQFSGPSNBODFQSQMQBUUFSO
  19. )551ͱ4FSWFS1VTI w ࡉ͔͍ϑΝΠϧ܈ͷಡΈࠐΈͷ࠷దԽ w 8FCϒϥ΢βɺ)551αʔόϨϕϧͰͷߴ଎Խ IUUQTEFWFMPQFSTHPPHMFDPNXFCGVOEBNFOUBMTQFSGPSNBODFIUUQ

  20. ύϑΥʔϚϯεͷଌఆ

  21. -JHIUIPVTF w 8FCαΠτͷղੳπʔϧʢ$ISPNF֦ுPSίϚϯυʣ w 1SPHSFTTJWF8FC"QQ w 1FSGPSNBODF w "DDFTTJCJMJUZ w

    #FTU1SBDUJDFT w 4&0 w $ISPNF͔Βඪ४౥ࡌʢ"VEJUTQBOFMʣ
  22. None
  23. None
  24. ͜Ε͔Βͷ8FCΞϓϦઃܭ

  25. 8FCΞϓϦͷઃܭ w ޙ͔Βຊ֨తͳ18"ʹ͢Δͷ͸೉͍͠ w ࠷ॳ͔Β18"Λҙࣝͨ͠ઃܭ 18"ϑΝʔετ  w 18"ͷ࡞Γํ 

    41"Λ͔ͬ͠Γ࡞Δ  4FSWJDF8PSLFSɺ8FC"QQ.BOJGFTUʹରԠ͢Δ  ύϑΥʔϚϯενϡʔχϯάΛؤுΔ w ޙ͔ΒͷύϑΥʔϚϯεվળ΋೉͍͠ ύϑΥʔϚϯεϑΝʔετͳઃܭ΁
  26. ͜Ε͔ΒͷϋΠύϑΥʔϚϯε8FCΞϓϦ w ฒྻॲཧɺόοΫάϥ΢ϯυॲཧʢ8FC8PSLFSʣ w ԋࢉॲཧͷߴ଎Խʢ8FC"TTFNCMZɺ(1(16ʣ w ద੾ͳཻ౓ͷϦιʔε෼ׂʢ&4.PEVMFTʣ w Ϧιʔεͷ࠷దͳಡΈࠐΈʢ)551ʣ w

    8FCඪ४ͷίϯϙʔωϯτࢦ޲ʢ8FC$PNQPOFOUTʣ w FUD 8FCඪ४΋ύϑΥʔϚϯε௥ٻͷํ޲΁ਐԽʂ
  27. ύϑΥʔϚϯεվળͷΞϓϩʔν w ύϑΥʔϚϯε͸ΑΓॏཁͳཁૉ΁ w ϞόΠϧϑΝʔετΠϯσοΫε w ݕࡧΤϯδϯ͸8FCαΠτΛఆྔతʹධՁ͢Δ w ޙ෇͚ͷύϑΥʔϚϯεվળ͸ࠔ೉ w

    ύϑΥʔϚϯεΛߟྀͨ͠ઃܭɾاը΁ w ύϑΥʔϚϯεΛߟ͑ΒΕΔਓࡐͷඞཁੑ w ΤϯδχΞʢ౰ͨΓલʣ w σβΠφʔɺσΟϨΫλʔɺʜ
  28. ·ͱΊ

  29. ·ͱΊ w ߴύϑΥʔϚϯεͳ8FCΞϓϦΛ࣮ݱ͢Δ্Ͱ
 ߟྀ͢Δ΂͖ϙΠϯτͱ୅දతͳରࡦΛ঺հ w ༏ΕͨϢʔβʔମݧͷ࣮ݱ w 3"*-ύϑΥʔϚϯεϞσϧ w ࠷ॳ͔ΒύϑΥʔϚϯεΛߟྀͨ͠ઃܭΛ໨ࢦ͢

    w ϞόΠϧϑΝʔετ
 ˠ18"ϑΝʔετ
 ˠύϑΥʔϚϯεϑΝʔετʂ