Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
HTML5アプリにおけるパフォーマンスの基礎知識
Search
Yosuke Onoue
July 08, 2018
Technology
9
9.3k
HTML5アプリにおけるパフォーマンスの基礎知識
HTML5 APP CONFERENCE 2018での発表資料です。
Yosuke Onoue
July 08, 2018
Tweet
Share
More Decks by Yosuke Onoue
See All by Yosuke Onoue
ネットワーク可視化の世界
likr
7
6.6k
Think About Front-end Web Development with Rust
likr
2
540
Yewにおけるoff-the-main-thread
likr
1
770
行政事業レビューデータの可視化 / Visualization of Japan's National Budget with JUDGIT!
likr
1
230
モダンJavaScript再入門 / Re-introduction to Modern JavaScript
likr
24
11k
Web-based Data Visualization with Rust and WebAssembly
likr
4
5.9k
Introduction to Graph Drawing
likr
0
510
20190707Ionic_Meetup.pdf
likr
0
450
About the end of the web
likr
2
540
Other Decks in Technology
See All in Technology
AIエージェントで90秒の広告動画を制作!台本・音声・映像・編集をつなぐAWS最新アーキテクチャの実践
nasuvitz
3
340
5分でカオスエンジニアリングを分かった気になろう
pandayumi
0
260
Generative AI Japan 第一回生成AI実践研究会「AI駆動開発の現在地──ブレイクスルーの鍵を握るのはデータ領域」
shisyu_gaku
0
330
まずはマネコンでちゃちゃっと作ってから、それをCDKにしてみよか。
yamada_r
2
120
Android Audio: Beyond Winning On It
atsushieno
0
2.4k
Rustから学ぶ 非同期処理の仕組み
skanehira
1
150
Oracle Base Database Service 技術詳細
oracle4engineer
PRO
10
75k
KotlinConf 2025_イベントレポート
sony
1
140
Aurora DSQLはサーバーレスアーキテクチャの常識を変えるのか
iwatatomoya
1
1.2k
20250912_RPALT_データを集める→とっ散らかる問題_Obsidian紹介
ratsbane666
0
100
共有と分離 - Compose Multiplatform "本番導入" の設計指針
error96num
2
1.1k
複数サービスを支えるマルチテナント型Batch MLプラットフォーム
lycorptech_jp
PRO
1
890
Featured
See All Featured
Music & Morning Musume
bryan
46
6.8k
Six Lessons from altMBA
skipperchong
28
4k
YesSQL, Process and Tooling at Scale
rocio
173
14k
GraphQLとの向き合い方2022年版
quramy
49
14k
A designer walks into a library…
pauljervisheath
207
24k
Large-scale JavaScript Application Architecture
addyosmani
513
110k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
15
1.7k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
48
9.7k
Being A Developer After 40
akosma
90
590k
Optimising Largest Contentful Paint
csswizardry
37
3.4k
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
9
810
Connecting the Dots Between Site Speed, User Experience & Your Business [WebExpo 2025]
tammyeverts
8
530
Transcript
)5.-ΞϓϦʹ͓͚Δ ύϑΥʔϚϯεͷجૅࣝ ͓ͷ͏͑ )5.-"11$0/'&3&/$& ݄
ࣗݾհ w ඌ্༸հ :PTVLF0OPVF w ຊେֶจཧֶ෦ใՊֶՊॿڭ w ใՄࢹԽɺཧ࠷దԽɺҙࢥܾఆࢧԉͷݚڀ w
ՄࢹԽγεςϜͷ։ൃʹ8FCϑϩϯτΤϯυٕज़Λ༻ w -JHIUIPVTFͷείΞվળ͕ϚΠϒʔϜ
)5.-ΞϓϦʁ w 8FCΞϓϦɺ18" w ϞόΠϧΞϓϦ w *POJDɺ3FBDU/BUJWFɺFUD w σεΫτοϓΞϓϦ w
&MFDUSPOɺFUD ຊൃදͰ ʮ)5.-$44+BWB4DSJQUΛ ɹத৺ʹߏ͞Εͨ8FCΞϓϦʯ Λఆ͠·͢
ԿނύϑΥʔϚϯεΛߟ͑Δ͔ʁ
8FCΞϓϦ͍ͱݴΘΕΔ࣌ʜ w ߟ͑ͳ͠ʹ։ൃΛਐΊΔͱύϑΥʔϚϯεམ͕ͪͪ w ػೳՃసૹྔͷ૿Ճট͘ w ͔֬ʹ͍8FCαΠτɾ8FCΞϓϦ͕ଟ͍ w Ϣʔβʔ༏Εͨ69ͷαʔϏεΛΉ ύϑΥʔϚϯεՁΛੜΈग़࣌͢ʹʂ
1SPHSFTTJWF8FC"QQT w IUUQTEFWFMPQFSTHPPHMFDPNXFCQSPHSFTTJWF XFCBQQT w 8FCαΠτͱωΠςΟϒΞϓϦͷ ͍͍ͱ͜औΓΛͨ͠8FCΞϓϦ w 1SPHSFTTJWF&OIBODFNFOU w
ߴ͍ϢʔβϏϦςΟͷ࣮ݱ w ϏδωεϑϨϯυϦʔ
w )5514 w Ϩεϙϯγϒ w ΦϑϥΠϯ w ϗʔϜը໘Ճ wճઢରԠ w
ΫϩεϒϥβରԠ w εϜʔζͳϖʔδભҠ w ϖʔδຖͷ63- 18"$IFDLMJTU IUUQTEFWFMPQFSTHPPHMFDPNXFCQSPHSFTTJWFXFCBQQTDIFDLMJTU ϕʔεϥΠϯཁ݅ ൣతͳ18" w ΠϯσοΫεՄೳ w 69 wύϑΥʔϚϯε w Ωϟογϡ w ௨ w ͦͷଞ
8FCΞϓϦͷύϑΥʔϚϯε w ύϑΥʔϚϯεͷछྨ w ϖʔδ͕͙͢ʹදࣔ͞ΕΔ w ϖʔδ͕ܰշʹಈ࡞͢Δ w 3"*-ύϑΥʔϚϯεϞσϧ w
3FTQPOTFɺ"OJNBUJPOɺ*EMFɺ-PBEJOH w IUUQTEFWFMPQFSTHPPHMFDPNXFC GVOEBNFOUBMTQFSGPSNBODFSBJM
3BJMύϑΥʔϚϯεϞσϧ w 3FTQPOTF w Ϣʔβૢ࡞ʹରͯ͠NTҎʹԠ w "OJNBUJPO w NTϑϨʔϜʢ'14ʣ w
*EMF w ΞΠυϧ࣌ؒΛ׆༻͢Δ w -PBEJOH w NTҎʹॳظը໘දࣔ
ύϑΥʔϚϯεվળͷํ๏ 3 " - +BWB4DSJQUॲཧͷߴԽ ˓ ˓ ˓ όοΫάϥϯυॲཧ ˓
ελΠϧͷ࠷దԽ ˓ ˓ ඞཁϦιʔεͷݮ ˓ ϦιʔεͷઌಡΈ ˓ ˓
+BWB4DSJQUॲཧͷվળ
͍+BWB4DSJQUॲཧͷվળ w ΞϧΰϦζϜͷվળ w 8FC8PSLFS w ॲཧͷฒྻԽɺόοΫάϥϯυ࣮ߦ w 8FC"TTFNCMZ w
ॲཧͷߴԽɺ$ࢿ࢈ͷར༻ɺ+4Ҏ֎ͷݴޠͷར༻ w (1(16ʢ8FC(-ɺ8FC(16ʣ w (16ΛͬͨॲཧͷߴԽ
8FC8PSLFS w 8FCϒϥβ্Ͱͷฒྻॲཧ w +BWB4DSJQUجຊతʹγϯάϧεϨου w ॏ͍ԋࢉॲཧͰ6*εϨουΛ༗͠ͳ͍Α͏ʹ͢Δ w 8PSLFSΛۦ͢ΔͨΊͷϓϩδΣΫτߏXJUI XFCQBDL
w IUUQTRJJUBDPN@MJLSJUFNT EEDBCBDGF w ྫɿIUUQTFHSJEKQ
8FC"TTFNCMZ w ϒϥβ্Ͱ࣮ߦՄೳͳܰྔόΠφϦϑΥʔϚοτ w BTNKT1/B$-ͷޙܧ w +BWB4DSJQUҎ֎ͷݴޠ͔ΒίϯύΠϧ͢Δͷ͕Ұൠత w $ɺ$ ɺ3VTUɺ(Pɺ"TTFNCMZ4DSJQUɺFUD
ωοτϫʔΫՄࢹԽͷྫ w %KT൛ɿඵ w 3VTU൛ɿඵʢYʣ
ϦιʔεಡΈࠐΈͷվળ
-PBEJOHͷվળ w جຊ w ແବΛͳ͘͢ w ෆඞཁͳεΫϦϓτɺελΠϧɺը૾ɺϑΥϯτɺʜ w Ͳ͏͠Α͏ͳ͘ͳͬͨΒ w
੩తαΠτੜ w αʔόαΠυϨϯμϦϯά w131-
ෆඞཁͳϥΠϒϥϦͷݮ w ϥΠϒϥϦ͕૿͑Δͱ-PBEJOH࣌ؒ৳ͼΔ w 3FHVMBS(ʢLCQT NT355ʣ w ։ൃऀͷָ͞ΛͲ͜·ͰϢʔβʔʹෛ୲ͤ͞Δ͔ʁ w Ͳ͏ͯ͠ඞཁͳΒ
w 5SFF4IBLJOHͰඞཁ࠷খݶͷ෦͚ͩಡΈࠐΉ w -B[Z-PBEJOHΛߦ͏
131-ύλʔϯ w 1VTI 3FOEFS 1SFDBDIF -B[ZMPBE w ϝϦοτ w 55*ʢ5JNF5P*OUFSBDUJWFʣͷ࠷খԽ
w Ωϟογϡޮͷ࠷େԽ w ։ൃɾσϓϩΠϝϯτͷ؆ૉԽ w &4.PEVMFTʹΑΔޮతͳεΫϦϓτಡΈࠐΈ IUUQTEFWFMPQFSTHPPHMFDPNXFCGVOEBNFOUBMTQFSGPSNBODFQSQMQBUUFSO
)551ͱ4FSWFS1VTI w ࡉ͔͍ϑΝΠϧ܈ͷಡΈࠐΈͷ࠷దԽ w 8FCϒϥβɺ)551αʔόϨϕϧͰͷߴԽ IUUQTEFWFMPQFSTHPPHMFDPNXFCGVOEBNFOUBMTQFSGPSNBODFIUUQ
ύϑΥʔϚϯεͷଌఆ
-JHIUIPVTF w 8FCαΠτͷղੳπʔϧʢ$ISPNF֦ுPSίϚϯυʣ w 1SPHSFTTJWF8FC"QQ w 1FSGPSNBODF w "DDFTTJCJMJUZ w
#FTU1SBDUJDFT w 4&0 w $ISPNF͔Βඪ४ࡌʢ"VEJUTQBOFMʣ
None
None
͜Ε͔Βͷ8FCΞϓϦઃܭ
8FCΞϓϦͷઃܭ w ޙ͔Βຊ֨తͳ18"ʹ͢Δͷ͍͠ w ࠷ॳ͔Β18"Λҙࣝͨ͠ઃܭ 18"ϑΝʔετ w 18"ͷ࡞Γํ
41"Λ͔ͬ͠Γ࡞Δ 4FSWJDF8PSLFSɺ8FC"QQ.BOJGFTUʹରԠ͢Δ ύϑΥʔϚϯενϡʔχϯάΛؤுΔ w ޙ͔ΒͷύϑΥʔϚϯεվળ͍͠ ύϑΥʔϚϯεϑΝʔετͳઃܭ
͜Ε͔ΒͷϋΠύϑΥʔϚϯε8FCΞϓϦ w ฒྻॲཧɺόοΫάϥϯυॲཧʢ8FC8PSLFSʣ w ԋࢉॲཧͷߴԽʢ8FC"TTFNCMZɺ(1(16ʣ w దͳཻͷϦιʔεׂʢ&4.PEVMFTʣ w Ϧιʔεͷ࠷దͳಡΈࠐΈʢ)551ʣ w
8FCඪ४ͷίϯϙʔωϯτࢦʢ8FC$PNQPOFOUTʣ w FUD 8FCඪ४ύϑΥʔϚϯεٻͷํਐԽʂ
ύϑΥʔϚϯεվળͷΞϓϩʔν w ύϑΥʔϚϯεΑΓॏཁͳཁૉ w ϞόΠϧϑΝʔετΠϯσοΫε w ݕࡧΤϯδϯ8FCαΠτΛఆྔతʹධՁ͢Δ w ޙ͚ͷύϑΥʔϚϯεվળࠔ w
ύϑΥʔϚϯεΛߟྀͨ͠ઃܭɾاը w ύϑΥʔϚϯεΛߟ͑ΒΕΔਓࡐͷඞཁੑ w ΤϯδχΞʢͨΓલʣ w σβΠφʔɺσΟϨΫλʔɺʜ
·ͱΊ
·ͱΊ w ߴύϑΥʔϚϯεͳ8FCΞϓϦΛ࣮ݱ͢Δ্Ͱ ߟྀ͢Δ͖ϙΠϯτͱදతͳରࡦΛհ w ༏ΕͨϢʔβʔମݧͷ࣮ݱ w 3"*-ύϑΥʔϚϯεϞσϧ w ࠷ॳ͔ΒύϑΥʔϚϯεΛߟྀͨ͠ઃܭΛࢦ͢
w ϞόΠϧϑΝʔετ ˠ18"ϑΝʔετ ˠύϑΥʔϚϯεϑΝʔετʂ