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 Conferen...
Search
久保田光則
July 04, 2015
Technology
4
1.8k
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
800
requestIdleCallback()による協調的バックグラウンド処理の実現 / requestIdleCallback()
anatoo
0
3.9k
Mastodonとその脱中央集権の仕組み
anatoo
11
21k
大量の要素を高速に表示するためのバーチャルレンダリング入門 / Virtual Rendering Introduction
anatoo
8
11k
PHPに型推論を実装する ~入門編~ / Type inference on PHP
anatoo
6
9.9k
PHPで学ぶVM型正規表現エンジンの仕組み
anatoo
8
7.2k
チームで作る!イケてるデザイン
anatoo
16
14k
Cordovaで作るHTML5ハイブリッドアプリ 〜開発ベストプラクティスを学ぶ〜
anatoo
27
18k
最新SPA開発を学ぼう! ウェブエンジニアのための AngularJS入門
anatoo
20
20k
Other Decks in Technology
See All in Technology
ゼロから始めるSREの事業貢献 - 生成AI時代のSRE成長戦略と実践 / Starting SRE from Day One
shinyorke
PRO
0
240
AWS Well-Architected から考えるオブザーバビリティの勘所 / Considering the Essentials of Observability from AWS Well-Architected
sms_tech
1
850
経理出身PdMがAIプロダクト開発を_ハンズオンで学んだ話.pdf
shunsukenarita
1
130
怖くない!GritQLでBiomeプラグインを作ろうよ
pal4de
1
130
Wasmで社内ツールを作って配布しよう
askua
0
130
MCPと認可まわりの話 / mcp_and_authorization
convto
2
160
株式会社島津製作所_研究開発(集団協業と知的生産)の現場を支える、OSS知識基盤システムの導入
akahane92
1
1.2k
Microsoft Defender XDRで疲弊しないためのインシデント対応
sophiakunii
3
400
少人数でも回る! DevinとPlaybookで支える運用改善
ishikawa_pro
1
530
AI駆動開発 with MixLeap Study【大阪支部 #3】
lycorptech_jp
PRO
0
210
The Madness of Multiple Gemini CLIs Developing Simultaneously with Jujutsu
gunta
1
2.6k
Jitera Company Deck / JP
jitera
0
150
Featured
See All Featured
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
34
3.1k
Gamification - CAS2011
davidbonilla
81
5.4k
Intergalactic Javascript Robots from Outer Space
tanoku
271
27k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
667
120k
Making the Leap to Tech Lead
cromwellryan
134
9.4k
A designer walks into a library…
pauljervisheath
207
24k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
138
34k
4 Signs Your Business is Dying
shpigford
184
22k
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
Optimizing for Happiness
mojombo
379
70k
The World Runs on Bad Software
bkeepers
PRO
70
11k
YesSQL, Process and Tooling at Scale
rocio
173
14k
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
͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠