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
Cordova開発者が知っておきたいレンダリングエンジンの話 / HTML5 Conference 2015 in Kagoshima
Search
久保田光則
July 04, 2015
Technology
4
1.6k
Cordova開発者が知っておきたいレンダリングエンジンの話 / HTML5 Conference 2015 in Kagoshima
HTML5カンファレンス2015in鹿児島での発表資料です。
久保田光則
July 04, 2015
Tweet
Share
More Decks by 久保田光則
See All by 久保田光則
サーバサイドだけでReact使う / React as Template Engine
anatoo
1
580
requestIdleCallback()による協調的バックグラウンド処理の実現 / requestIdleCallback()
anatoo
0
3.4k
Mastodonとその脱中央集権の仕組み
anatoo
11
21k
大量の要素を高速に表示するためのバーチャルレンダリング入門 / Virtual Rendering Introduction
anatoo
8
10k
PHPに型推論を実装する ~入門編~ / Type inference on PHP
anatoo
6
9.5k
PHPで学ぶVM型正規表現エンジンの仕組み
anatoo
8
6.7k
チームで作る!イケてるデザイン
anatoo
16
14k
Cordovaで作るHTML5ハイブリッドアプリ 〜開発ベストプラクティスを学ぶ〜
anatoo
27
18k
最新SPA開発を学ぼう! ウェブエンジニアのための AngularJS入門
anatoo
20
20k
Other Decks in Technology
See All in Technology
事業部を超えた 開発生産性向上に挑戦する
kentakozuka
2
180
SSMエージェントはIAMロールの夢を見るか/ Do SSM Agents Dream Of IAM Roles?
yukihirochiba
0
1.4k
Proposal for a fictitious company presented by JAWS-UG DE&I team 'Naniwa Musume'
hiroramos4
PRO
0
120
マイクロサービスを横断したGoのコードレビュー
yuyu_hf
PRO
1
120
すべてが #Zenoh になる
takasehideki
0
100
Feature Flag Deep Dive
biwashi
20
5k
『LeanとDevOpsの科学』をきちんと解読する 〜Four Keys だけじゃ絶対もったいなくなる話〜
bonotake
27
6.5k
調整さんの調整結果をカレンダーへ登録するGPTsを作った話
hrsano645
1
160
SREのキャリア、 あるいは生態 / #ya8
cohalz
10
1k
Skaffoldを用いたGKEアプリケーションの CD(Continuous Development)
kojake_300
1
120
Oracle Base Database Service 技術詳細
oracle4engineer
PRO
4
34k
layerx-0-to-1-product-development-in-compound-startups
shnjtk
1
520
Featured
See All Featured
Fashionably flexible responsive web design (full day workshop)
malarkey
397
65k
Typedesign – Prime Four
hannesfritz
36
2k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
272
12k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
219
21k
The Pragmatic Product Professional
lauravandoore
24
5.7k
Build The Right Thing And Hit Your Dates
maggiecrowley
23
1.9k
Testing 201, or: Great Expectations
jmmastey
27
6.3k
Done Done
chrislema
178
15k
Stop Working from a Prison Cell
hatefulcrawdad
265
19k
Imperfection Machines: The Place of Print at Facebook
scottboms
257
12k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
352
28k
Building Your Own Lightsaber
phodgson
97
5.6k
Transcript
$PSEPWB։ൃऀ͕͓͖͍ͬͯͨ ϨϯμϦϯάΤϯδϯͷ )5.-ΧϯϑΝϨϯεJOࣛࣇౡ
‣ ٱอాޫଇ!BOBUPP ‣ 6*69σβΠφʔɺ ιϑτΣΞΤϯδχΞ ‣ ΞγΞϧגࣜձࣾ"TQFDUJWF--$ ࣗݾհ
None
ධൃചதʂ
None
IUUQPOTFOJP
ࠓ͢͜ͱ
͢͜ͱ ‣ ͳͥ$PSEPWB͔ ‣ Α͘ى͖Δ ‣ ϨϯμϦϯάͷྲྀΕ ‣ ΠϯλϥΫγϣϯͷߴԽ
‣ ΞχϝʔγϣϯͷߴԽ
ͳͥ$PSEPWB͔
‣ )5.-ϋΠϒϦουΞϓϦ։ൃ ͢ΔͨΊͷϑϨʔϜϫʔΫ
)5.-ϋΠϒϦουΞϓϦ ‣ ΞϓϦͱͯ͠ಈ࡞ ‣ ෦ͷ࣮ʹ)5.-Λར༻ ΞϓϦ ωΠςΟϒ )5.-
Έ ΞϓϦ HTML ಡΈࠐΈ WebView
)5.-ϋΠϒϦουΞϓϦ ͷԿ͕ྑ͍ͷ͔
ΫϩεϓϥοτϑΥʔϜੑ Android iOS
Σϒͷ͕ࣝ׆͔ͤΔ
ετΞͰͷ ‣ ֎ݟී௨ͷΞϓϦͳͷͰɺετΞͰ Մೳ
ωΠςΟϒͷػೳͷݺͼग़͠ ‣ +BWB4DSJQU͔Β04ͷ"1*Λݺͼग़͠Մೳ Android / iOS OS API
$PSEPWBͷఏڙ͢ΔϓϥάΠϯ ‣ ͞Βʹ$PSEPWBϓϥάΠϯͷ ΈΛ͑͜ΕҎ֎ͷ͜ͱՄೳ ϑΝΠϧετϨʔδɺΧϝϥɺίϯύε ՃηϯαʔɺίϯλΫτϦετɺ ҐஔใऔಘɺωοτϫʔΫɺ#MVFUPPUI௨৴ɺ "OESPJEͷΠϯςϯτɺΞϓϦϒϥβɺ (14ɺ/'$ɺFUDʜ
Α͘ى͜Δ
‣ ύϑΥʔϚϯε͕ѱ͍ ‣ ωΠςΟϒΞϓϦͬΆ͘ͳΒͳ͍ ‣ ಈ͖͕ͬ͞Γ͍ͯ͠Δ
ղܾࡦ
‣ ࠷ॳ͔Β͘ಈ͘Α͏ʹॻ͘ ‣ ॻ͍ͨޙʹνϡʔχϯά͢Δ PS
࠷ॳ͔Β͘ॻ͘ ‣ ࠷ॳ͔Β͍ʹͨ͜͜͠ͱແ͍ ‣ τϨʔυΦϑ͕͋·Γແ͍ ϕετϓϥΫςΟεΛ౿ऻ͢Δ
ॻ͍ͨޙʹνϡʔχϯά͢Δ ‣ ͕ग़͔ͯΒղܾ͢Δ ‣ ܭଌͯ͠ϘτϧωοΫΛಛఆɺ࠷దԽ
‣ "OESPJEͰ$ISPNFɺJ04Ͱ4BGBSJͷΠϯεϖ ΫλΛར༻ ‣ ϘτϧωοΫΛಛఆͯ͠࠷దԽ
‣ ͲͪΒΛΔʹͯ͠ ϨϯμϦϯάͷྲྀΕͷѲඞਢ
XFCLJUܥΤϯδϯͷ ϨϯμϦϯάͷྲྀΕ
ϨϯμϦϯάͷఔ }GSBNF ඳը͕࢝·ͬͯऴΘΔ·Ͱ͕GSBNF Loading Scripting Rendering Painting
Loading Scripting Rendering Painting
Loading ϦιʔεͷಡΈࠐΈ Ϧιʔεͷύʔε {
ϦιʔεͷಡΈࠐΈ ‣ )5.- $44 +4 ը૾ͳͲ ϑΝΠϧΛϩʔυ͢Δ ‣ ௨ৗͷΣϒͰωοτϫʔΫӽ͠ͷ Ϧιʔεͷऔಘ
Ϧιʔεͷύʔε ‣ ಡΈࠐΈ͕ऴΘͬͨΒɺύʔε͢Δ ‣ ϒϥβͷ෦දݱม
‣ )5.-%0.πϦʔʹม͞ΕΔ <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> IUUQXXXIUNMSPDLTDPNFOUVUPSJBMTJOUFSOBMTIPXCSPXTFSTXPSL )5.-
$44 ‣ $44$440.πϦʔʹม͞ΕΔ body { color: black; } .container {
width: 920px; IUUQXXXIUNMSPDLTDPNFOUVUPSJBMTJOUFSOBMTIPXCSPXTFSTXPSL
+BWB4DSJQU ‣ +BWB4DSJQU࣮ߦՄೳͳදݱʹίϯύΠϧ ‣ +*5ίϯύΠϧͰػցޠʹม͞ΕͨΓ
௨ৗͷΣϒͷ߹ ‣ ϦιʔεͷಡΈࠐΈ͕ѹతʹ͍ ‣ ը૾ͷ࠷దԽ ‣ )5.-$44+4ͷѹॖ ‣ ಡΈࠐΈॱংͷ࠷దԽ
ϋΠϒϦουΞϓϦͷ߹ ‣ ϦιʔεಡΈࠐΈ͋·ΓʹͳΒͳ͍ ‣ ͢ͰʹϚγϯʹϦιʔε͕͋Δ͔Β ‣ ύʔεϘτϧωοΫʹͳΒͳ͍
Loading Scripting Rendering Painting
‣ +BWB4DSJQU͍ɻ جຊతʹͦΕ΄ͲʹͳΒͳ͍ɻ
‣ ܭࢉྔͷଟ͍ॲཧ ‣ DBOWBTͷඳը ‣ MBZPVUΛಉظతʹڧ੍͢Δίʔυ ʹͳΔέʔε
4DSJQUJOH͕ϘτϧωοΫͩͬͨΒ ‣ ؆୯ 1SPpMFTλϒͰ͞Βʹܭଌ
‣ #PUUPN6Qͷ4FMGཝɻॏ͍ͨؔΛಛఆ
ಉظతͳ-BZPVUͷڧ੍Λආ͚Δ ‣ UJNFMJOFͰ͜Ε͕ग़ͨΒҙ IUUQTEFWFMPQFSDISPNFDPNEFWUPPMTEPDTEFNPTUPPNVDIMBZPVU
ಉظతͳMBZPVUͷڧ੍ͷྫ ‣ ཁૉͷҐஔαΠζΛઃఆͭͭ͠P⒎TFU5PQ HFU#PVOEJOH$MJFOU3FDU Λࢀর͢Δͱى͜Δ for(var m = 0; m
< movers.length; m++) { movers[m].style.left = movers[m].offsetTop + 'px'; }
Loading Scripting Rendering Painting
Rendering ϦιʔεͷಡΈࠐΈ Ϧιʔεͷύʔε Calculate Style Layout {
$BMDVMBUF4UZMF ‣ ݸผͷ%0.ཁૉʹରͯ͠ɺͨΔελΠ ϧΛܭࢉ͢Δ ‣ $440.πϦʔͱ%0.πϦʔΛࢀরͯ͠ɺ ϚονϯάॲཧΛߦ͏
$44ϧʔϧͷϚονϯά %0.ཁૉ ʷ $44ϧʔϧ ॲཧճ ‣ ૯ΓͰॲཧ͍ͯ͘͠ ‣ %0.ཁૉͱϧʔϧͷ
গͳ͚Εগͳ͍΄Ͳྑ͍
ྑ͘ͳ͍ηϨΫλͷॻ͖ํ ‣ ࢠ ଙ ηϨΫλආ͚Δ ‣ %0.ཁૉͷΛḷ͍ͬͯ͘ඞཁ͕༗ΔͨΊ body .foo .bar
.hoge { … }
ྑ͍ηϨΫλͷॻ͖ํ ‣ %0.ཁૉΛճݟΔ͚ͩ ‣ อकੑͷͰྑ͍ .foo-bar-hoge { … }
نʹ#&.Λ͓͏ ‣ ࢠ ଙ ηϨΫλ͕ࣗಈతʹແ͘ͳΓߴʹ
$44ϧʔϧͷϚονϯάॲཧ അࣛʹͳΒͳ͍ ‣ %0.ૢ࡞͢Δͨͼʹॲཧ͕ΔͨΊ ‣ ΠϯλϥΫγϣϯΛ͘͢ΔͨΊʹ͜ ͷॲཧ͘͢Δඞཁ͋Γ
-BZPVU ‣ ͦΕͧΕͷ%0.ཁૉͷϨΠΞτใΛ ܭࢉ͢ΔϑΣʔζ
-BZPVUͷ࠷ѱͷγφϦΦ ‣ %0.ૢ࡞$44ϓϩύςΟΛมߋͨ࣌͠ ‣ -BZPVUॲཧ͕Ҿ͖ى͜͞Εɺશͯͷ%0. ཁૉͷϨΠΞτܭࢉ͕࠶ߦΘΕΔ
ཁૉͷαΠζΛͳΔ͘ݻఆ͢Δ ‣ ϨΠΞτܭࢉΛͳΔ͘গͳ͘͢ΔͨΊ .foobar { width: 100px; height: 200px; }
BCTPMVUFϨΠΞτΛੵۃతʹ͏ ‣ ϨΠΞτܭࢉΛͳΔ͘গͳ͘͢ΔͨΊ .piyo { position: absolute; top: 200px; left:
400px; }
ը૾ͷαΠζඞͣࢦఆ͢Δ ‣ -BZPVUͷΓͳ͓͠Λ͙ͨΊ <img src=“foo.png” width=“300” height=“299”>
Loading Scripting Rendering Painting
ϦιʔεͷಡΈࠐΈ Ϧιʔεͷύʔε Paint Rasterize { Painting Composite Layers
1BJOU ‣ %JTQMBZ-JTU $ISPNJVNͩͱ4LJBͷ໋ྩ ͷੜ͢ΔϑΣʔζ ‣ جຊʹͳΒͳ͍
3BTUFSJ[F ‣ ੜͨ͠%JTQMBZ-JTUΛ࣮ߦ࣮ͯ͠ࡍʹϐΫη ϧԽ͢ΔϑΣʔζ ‣ ॏ͍ͨ$44ϓϩύςΟ͕͔͔ͬͯΔͱ͕࣌ؒ ͔͔Δ ‣ CPYTIBEPXCPSEFSSBEJVT ‣
$ISPNJVNͩͱ4LJB%FCVHHFSͰ֬ೝͰ͖Δ
$PNQPTJUF-BZFST ‣ 3BTUFSJ[F֤ͨ͠ϨΠϠʔΛ߹͢ΔϑΣʔ ζ ‣ [JOEFYpYFEQPTJUJPOͳͲʹԠͯ͡Ұຕ ֆʹ͢Δ
Ҏ্ ‣ ϨϯμϦϯάͷఔ͜ͷ̐ͭ Loading Scripting Rendering Painting
ΠϯλϥΫγϣϯΛ ͘͢Δ
ΠϯλϥΫγϣϯͱ ‣ ϢʔβͷΞΫγϣϯʹԠͯ͡ը໘্ʹ ද͞ΕΔϨεϙϯε ‣ GSBNFΛNTఔҎԼʹ͑Δ Button
جຊతͳߟ͑ํ ‣ 4DSJQUJOHҎԼͷఔΛ͘͢Δ Rendering Painting { Paint Rasterize Composite Layers
Calculate Style Layout { Scripting
ΞχϝʔγϣϯΛ ͘͢Δ
ΞχϝʔγϣϯΛ͘͢Δ ‣ $445SBOTJUJPOSFRVFTU"OJNBUJPO'SBNF ͰͷΞχϝʔγϣϯ ‣ GSBNFΛNTҎԼʹ͑Δ '14
جຊతͳߟ͑ํ ‣ 4DSJQUJOHҎ֎$PNQPTJUF-BZFSTͷΈΛ ΒͤΔΑ͏ʹ͢Δ Paint Rasterize { Composite Layers Painting
ΞχϝʔγϣϯγϏΞ ‣ %0.ૢ࡞ͨ͠Γɺ-BZPVUΛҾ͖ىͨ͜͠ Γ͢ΔͱϞόΠϧͩͱશ͍͘ͷʹͳ Βͳ͍ ‣ ΞχϝʔγϣϯதUSBOTGPSNͱPQBDJUZ͠ ͔͍͡Βͳ͍ͷ͕٢
(16Λ׆༻͢Δ ‣ USBOTGPSNελΠϧଐੑʹɺ USBOTMBUFE ΛؚΊ͓ͯ͘ ‣ $PNQPTJUF-BZFSTॲཧ࣌ʹ(16Ͱ߹͞
ΕΔΑ͏ʹͳΔ
ิ$44ϓϩύςΟͷมߋ
$44ϓϩύςΟͷมߋ͢Δͱ Կ͕ى͜Δ ‣ $44ϓϩύςΟʹΑͬͯҧ͏ ‣ XJEUINBSHJOͳͲཁૉͷେ͖͞Ґஔͷมߋ ‣ -BZPVU͔Βॲཧ͕࢝·Δ ‣ USBOTGPSNPQBDJUZΛมߋ
‣ $PNQPTJUF-BZFSTͷΈΔ
$445SJHHFSTͷհ ‣ $44ϓϩύςΟͷมߋ͕ ԿΛҾ͖ى͔͜͢ཏ IUUQDTTUSJHHFSTDPN
·ͱΊ
ϨϯμϦϯάͷఔ Loading Scripting Rendering Painting ‣ ͦΕͧΕׂ͕͋Γνϡʔχϯάํ๏ҧ͏
ΠϯλϥΫγϣϯΛ͘͢Δ Rendering Painting ‣ 4DSJQUJOHҎԼΛ͘͢Δ Scripting
ΞχϝʔγϣϯΛ͘͢Δ ‣ $PNQPTJUF-BZFSTͷΈΒͤΔ Paint Rasterize { Composite Layers Painting
͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠