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
Introduction to Bill One Development Engineer
sansan33
PRO
0
270
M365アカウント侵害時の初動対応
lhazy
6
4.4k
Semantic Machine Intelligence for Vision, Language, and Actions
keio_smilab
PRO
2
380
名刺メーカーDevグループ 紹介資料
sansan33
PRO
0
840
Introduction to Sansan, inc / Sansan Global Development Center, Inc.
sansan33
PRO
0
2.7k
AWS Well-Architected から考えるオブザーバビリティの勘所 / Considering the Essentials of Observability from AWS Well-Architected
sms_tech
1
850
Amazon CloudWatchのメトリクスインターバルについて / Metrics interval matters
ymotongpoo
3
210
ML Pipelineの開発と運用を OpenTelemetryで繋ぐ @ OpenTelemetry Meetup 2025-07
getty708
0
210
新規事業におけるAIリサーチの活用例
ranxxx
0
130
Bliki (ja), and the Cathedral, and the Bazaar
koic
8
1.3k
そもそも AWS FIS について。なぜ今 FIS のハンズオンなのか?などなど
kazzpapa3
2
110
20150719_Amazon Nova Canvas Virtual try-onアプリ 作成裏話
riz3f7
0
130
Featured
See All Featured
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
8
840
A better future with KSS
kneath
238
17k
RailsConf 2023
tenderlove
30
1.2k
Making Projects Easy
brettharned
116
6.3k
The Cost Of JavaScript in 2023
addyosmani
51
8.6k
Large-scale JavaScript Application Architecture
addyosmani
512
110k
The Pragmatic Product Professional
lauravandoore
35
6.8k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
251
21k
The Language of Interfaces
destraynor
158
25k
Optimising Largest Contentful Paint
csswizardry
37
3.3k
The Cult of Friendly URLs
andyhume
79
6.5k
Rebuilding a faster, lazier Slack
samanthasiow
83
9.1k
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
͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠