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

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

1. )5.-ΞϓϦʹ͓͚Δ
   ύϑΥʔϚϯεͷجૅ஌ࣝ ͓ͷ͏͑ )5.-
   "11
   $0/'&3&/$&
   
   ೥݄೔
2. ࣗݾ঺հ w ඌ্
   ༸հ
   :PTVLF
   0OPVF
   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. 1SPHSFTTJWF
   8FC
   "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
    NT
    355ʣ
    w ։ൃऀͷָ͞ΛͲ͜·ͰϢʔβʔʹෛ୲ͤ͞Δ͔ʁ
    w Ͳ͏ͯ͠΋ඞཁͳΒ
    w 5SFF
    4IBLJOHͰඞཁ࠷খݶͷ෦෼͚ͩಡΈࠐΉ
    w -B[Z
    -PBEJOHΛߦ͏
18. 131-ύλʔϯ w 1VTI
    3FOEFS
    1SFDBDIF
    -B[ZMPBE
    w ϝϦοτ
    w 55*
    ʢ5JNF
    5P
    *OUFSBDUJWFʣͷ࠷খԽ
    w Ωϟογϡޮ཰ͷ࠷େԽ
    w ։ൃɾσϓϩΠϝϯτͷ؆ૉԽ
    w &4
    .PEVMFTʹΑΔޮ཰తͳεΫϦϓτಡΈࠐΈ IUUQTEFWFMPQFSTHPPHMFDPNXFCGVOEBNFOUBMTQFSGPSNBODFQSQMQBUUFSO
19. )551ͱ4FSWFS
    1VTI w ࡉ͔͍ϑΝΠϧ܈ͷಡΈࠐΈͷ࠷దԽ
    w 8FCϒϥ΢βɺ)551αʔόϨϕϧͰͷߴ଎Խ IUUQTEFWFMPQFSTHPPHMFDPNXFCGVOEBNFOUBMTQFSGPSNBODFIUUQ
20. ύϑΥʔϚϯεͷଌఆ
21. -JHIUIPVTF w 8FCαΠτͷղੳπʔϧʢ$ISPNF֦ு
    PS
    ίϚϯυʣ
    w 1SPHSFTTJWF
    8FC
    "QQ
    w 1FSGPSNBODF
    w "DDFTTJCJMJUZ
    w #FTU
    1SBDUJDFT
    w 4&0
    w $ISPNF
    ͔Βඪ४౥ࡌʢ"VEJUT
    QBOFMʣ
24. ͜Ε͔Βͷ8FCΞϓϦઃܭ
25. 8FCΞϓϦͷઃܭ w ޙ͔Βຊ֨తͳ18"ʹ͢Δͷ͸೉͍͠
    w ࠷ॳ͔Β18"Λҙࣝͨ͠ઃܭ 18"ϑΝʔετ
    w 18"ͷ࡞Γํ
     41"Λ͔ͬ͠Γ࡞Δ
     4FSWJDF
    8PSLFSɺ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"ϑΝʔετ
 ˠ
    ύϑΥʔϚϯεϑΝʔετʂ