Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Speaker Deck
PRO
Sign in
Sign up for free
大量の要素を高速に表示するためのバーチャルレンダリング入門 / Virtual Rendering Introduction
久保田光則
February 22, 2017
Technology
8
9.2k
大量の要素を高速に表示するためのバーチャルレンダリング入門 / Virtual Rendering Introduction
第68回HTML5とか勉強会の資料です。
久保田光則
February 22, 2017
Tweet
Share
More Decks by 久保田光則
See All by 久保田光則
サーバサイドだけでReact使う / React as Template Engine
anatoo
1
410
requestIdleCallback()による協調的バックグラウンド処理の実現 / requestIdleCallback()
anatoo
0
2.9k
Mastodonとその脱中央集権の仕組み
anatoo
11
20k
PHPに型推論を実装する ~入門編~ / Type inference on PHP
anatoo
6
9k
Cordova開発者が知っておきたいレンダリングエンジンの話 / HTML5 Conference 2015 in Kagoshima
anatoo
4
1.4k
PHPで学ぶVM型正規表現エンジンの仕組み
anatoo
8
6.3k
チームで作る!イケてるデザイン
anatoo
16
14k
Cordovaで作るHTML5ハイブリッドアプリ 〜開発ベストプラクティスを学ぶ〜
anatoo
27
17k
最新SPA開発を学ぼう! ウェブエンジニアのための AngularJS入門
anatoo
20
19k
Other Decks in Technology
See All in Technology
QiitaConference2022
fuwasegu
0
180
Scrum Fest Osaka 2022 フルリモート下でのチームビルディング
moritamasami
2
1.2k
How to start with DDD when you have a Monolith
javujavichi
0
310
Build 2022で発表されたWindowsアプリ開発のあれこれ振り返ろう
hatsunea
1
380
Target SDK Versionを上げない Notification runtime permission対応
napplecomputer
0
140
Design for Humans: How to make better modernization decisions
indualagarsamy
2
120
GeoLocationAnchor and MKTileOverlay
toyship
0
110
Custom AppをIP制限ありのままで審査に通す方法
yusuga
0
680
DOM Invader - prototype pollution対応の衝撃 - / DOM Invader - prototype pollution
okuken
0
150
プログラマがオブジェクト指向しても幸せになれない理由
shirayanagiryuji
0
130
Security Hub のマルチアカウント 管理・運用をサーバレスでやってみる
ch6noota
0
820
Power AutomateでのAdaptive Cards-基本編
miyakemito
1
310
Featured
See All Featured
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
269
11k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
151
13k
It's Worth the Effort
3n
172
25k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
237
19k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
29
4.3k
The Pragmatic Product Professional
lauravandoore
19
3k
Fashionably flexible responsive web design (full day workshop)
malarkey
396
62k
Build The Right Thing And Hit Your Dates
maggiecrowley
19
1.2k
Unsuck your backbone
ammeep
659
55k
Adopting Sorbet at Scale
ufuk
63
7.6k
Navigating Team Friction
lara
175
11k
The Mythical Team-Month
searls
209
39k
Transcript
େྔͷཁૉΛߴʹදࣔ͢Δ όʔνϟϧϨϯμϦϯάೖ "TQFDUJWF--$ٱอాޫଇ!BOBUPP
ࣗݾհ ٱอాޫଇ "TQFDUJWF--$ද !BOBUPP HJUIVCDPNBOBUPP
ΞδΣϯμ όʔνϟϧϨϯμϦϯάͱ Έͱ࣮
όʔνϟϧϨϯμϦϯάͱ
όʔνϟϧϨϯμϦϯάͱ ύϑΥʔϚϯεͷͨΊͷςΫχοΫ ΣϒϖʔδʹେྔͷཁૉΛߴʹ දࣔ͢ΔͨΊͷςΫχοΫ
େྔͬͯͲΕ͙Β͍
ઍ͔Βඦສͷཁૉ
࣮ྫ (PPHMF4QSFBETIFFU
None
ͳͥඞཁ ී௨ʹࢁͷཁૉΛදࣔ͢ΔͱͲ͏ͳΔ͔ ྫ͑%0.ཁૉΛेສݸՃ͢ΔͱͲ͏ ͳΔ͔ ϨϯμϦϯά͕ͱͯॏͨ͘ͳΔ
IUUQTEFWFMPQFSTHPPHMFDPNXFCGVOEBNFOUBMTQFSGPSNBODFSFOEFSJOH ϨϯμϦϯάͷྲྀΕ
શ%0.ཁૉͷ ελΠϧΛܭࢉ
શͯͷࢹ֮ཁૉͷ ϨΠΞτΛܭࢉ
શͯͷࢹ֮ཁૉΛ ඳը͢ΔͨΊͷ໋ྩΛ ੜͯ͠ϥελϥΠζ
Έ্͠ΐ͏͕ͳ͍ %0.ཁૉ͕૿͑Ε૿͑Δ΄Ͳ ϨϯμϦϯά͕ॏͨ͘ͳΔ ΠϯλϥΫγϣϯͷࡍͷ࠶ϨϯμϦ ϯάॏͨ͘ͳΔ
͜Εʹର͢Δબࢶ ཁ݅Λมߋ͢Δ ཁ݅Λม͑ͣʹٕज़Ͱղܾ͢Δ
ཁ݅Λมߋ͢Δ
ϖʔδૹΓΛ࠾༻͢Δ ੲͳ͕ΒͷΓํ
ϖʔδૹΓΛ࠾༻ͨ͘͠ͳ͍߹ 41"ͰϦονͳମݧΛఏڙ͍ͨ͠ $PSEPWBͰϞόΠϧΞϓϦͬΆ͍ͨ͘͠ &MFDUSPOͰσεΫτοϓΞϓϦͬΆ͍ͨ͘͠ (PPHMF4QSFBETIFFUͳͲΞϓϦέʔγϣϯͷ ಛੑ্ϖʔδૹΓͰ͖ͳ͍߹
ཁ݅Λม͑ͣʹόʔνϟϧ ϨϯμϦϯάͰղܾ͢Δ
όʔνϟϧϨϯμϦϯά ࣮࣭తඳը %0.ཁૉΛಈతʹཧ͢ΔΈ
جຊతͳΞΠσΞ ຊʹඞཁͳ%0.ཁૉ͚ͩΛϩʔυ ඞཁͳ͘ͳͬͨΒΞϯϩʔυ͢Δ %0.ཁૉΛ͑Δ
ຊʹඞཁͳ%0.ཁૉͱ
http:// ϒϥβͷWJFXQPSU
ίϯςϯπશମ
http:// ϒϥβͷWJFXQPSU ίϯςϯπશମ
WJFXQPSU͔Β֎Εͨཁૉඳը ͠ͳͯ͘ྑ͍ͷͰ
ίϯςϯπશମ όʔνϟϧϨϯμϦϯά http:// ϒϥβͷWJFXQPSU ίϯςϯπશମ ී௨ʹදࣔ
ݟ͑ͳ͍෦ͷඳըΛαϘΔ
ΞϧΰϦζϜͷྲྀΕ
εΫϩʔϧྖҬͷ֬อ %0.ཁૉͷϩʔυɾΞϯϩʔυ εΫϩʔϧΛิͯ͠ʹΔ
εΫϩʔϧྖҬͷ֬อ εΫϩʔϧྖҬΛܭࢉ͢Δ ۭͷ%*7Λ࡞ͬͯεΫϩʔϧྖҬΛ ֬อ͢Δ
http:// ϒϥβͷWJFXQPSU ίϯςϯπશମ
%0.ཁૉͷϩʔυͱΞϯϩʔυ WJFXQPSUʹԿ͕ϨϯμϦϯά͞ΕΔ ͷ͔Λܭࢉͯ͠%0.ཁૉΛϩʔυ͢Δ WJFXQPSU͔Β֎Εͨ%0.ཁૉΛΞϯ ϩʔυ͢Δ
http:// ϒϥβͷWJFXQPSU ίϯςϯπશମ ϩʔυ
εΫϩʔϧΛݕ͢Δ εΫϩʔϧ͕͋ΔͱWJFXQPSUͷҐஔ มΘΔͷͰॲཧΛΓ͢
http:// ϒϥβͷWJFXQPSU ίϯςϯπશମ εΫϩʔϧ
http:// ϒϥβͷWJFXQPSU ίϯςϯπશମ ϩʔυ Ξϯϩʔυ
ઃܭ࣮࣌ͷΈͲ͜Ζ
WJFXQPSUʹରԠ͢Δ%0.ཁૉͱҐஔΛ Ͳ͏ͬͯಛఆ͢Δͷ͔ http:// ϒϥβͷWJFXQPSU ίϯςϯπશମ
֤ཁૉͷେ͖͕͞ݻఆͳΒ؆୯
http:// ϒϥβͷWJFXQPSU ίϯςϯπશମ Ծతͳ ཁૉͷϦετ ^%0.πϦʔʹ ಡΈࠐΉ͖ ཁૉ
֤ཁૉͷେ͖͕͞ෆఆͰ͋Δ߹
http:// ϒϥβͷWJFXQPSU ίϯςϯπશମ Ծతͳ ཁૉͷϦετ ^%0.πϦʔʹ ಡΈࠐΉ͖ ཁૉ ͦΕͳΓʹܭࢉ͢Ε·͋େৎ
֤ཁૉͷେ͖͕͞ෆఆ͔ͭ େ͖͕͞ࣄલʹΘ͔Βͳ͍߹
http:// ϒϥβͷWJFXQPSU ίϯςϯπશମ Ծతͳ ཁૉͷϦετ %0.πϦʔʹ ಡΈࠐΉ͖ ཁૉͲΕ ͲͷҐஔʹ %0.ཁૉΛ
දࣔ͢Εྑ͍
ཁૉͷେ͖͕͞Θ͔Βͳ͍߹ ֤ཁૉͷେ͖͞ΛԾͰ͓࣋ͬͯ͘ εΫϩʔϧൣғͷେ͖͞ΛԾͰܭࢉ͢Δ ϨϯμϦϯά͔ͯ͠Βཁૉͷେ͖͞Λ HFU#PVOEJOH$MJFOU3FDU ͳͲΛͬͯอଘ͓ͯ͘͠
'PSDFE4ZODISPOPVT-BZPVUΛى͕ͪ͜͠ ࣮ࡍͷཁૉͷେ͖͕͞Θ͔ͬͨΒཁૉͷҐஔεΫ ϩʔϧൣғεΫϩʔϧҐஔΛߋ৽͢Δ
݁ߏ໘
՝
՝ εΫϩʔϧͰ'14ग़͢ͷ͕͍͠ εΫϩʔϧΠϕϯτΛิͯ͠ɺͱ ͍͏ܗʹͳΔͷͰͦͷεΫϩʔϧ ͕ॏͨ͘ͳΔ
՝ղܾͷΞϓϩʔν 1BTTJWF&WFOU-JTUFOFS *OUFSTFDUJPO0CTFSWFS
ิ
ิطଘͷ࣮ 0OTFO6*ͷPOTMB[ZMPBE 3FBDUKT༻ͷSFBDUWJSUVBMJ[FE "OHVMBS༻ͷBOHVMBSWJSUVBMMJTU ͳͲ
ิແݶεΫϩʔϧͱͷҧ͍ ແݶεΫϩʔϧͰɺ%0.ཁૉͷ ͲΜͲΜ૿͍͑ͯ͘ɻݮΒͳ͍ όʔνϟϧϨϯμϦϯάͱซ༻͞Ε Δ͜ͱ͋Γ
·ͱΊ %0.ཁૉ͕૿͑Δͱॏͨ͘ͳΔ ಈతʹ%0.ཁૉͷΛௐ͢Δͷ ͕όʔνϟϧϨϯμϦϯά ࣮ࡍʹදࣔ͞ΕΔ%0.ཁૉʹண
͝ਗ਼ௌ͋Γ͕ͱ͏ ͍͟͝·ͨ͠ɻ