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
810
requestIdleCallback()による協調的バックグラウンド処理の実現 / requestIdleCallback()
anatoo
0
3.9k
Mastodonとその脱中央集権の仕組み
anatoo
11
21k
大量の要素を高速に表示するためのバーチャルレンダリング入門 / Virtual Rendering Introduction
anatoo
8
11k
PHPに型推論を実装する ~入門編~ / Type inference on PHP
anatoo
6
10k
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
20201008_ファインディ_品質意識を育てる役目は人かAIか___2_.pdf
findy_eventslides
2
590
JAZUG 15周年記念 × JAT「AI Agent開発者必見:"今"のOracle技術で拡張するAzure × OCIの共存アーキテクチャ」
shisyu_gaku
1
140
生成AIで「お客様の声」を ストーリーに変える 新潮流「Generative ETL」
ishikawa_satoru
1
370
許しとアジャイル
jnuank
1
140
Wasmのエコシステムを使った ツール作成方法
askua
0
110
「使い方教えて」「事例教えて」じゃもう遅い! Microsoft 365 Copilot を触り倒そう!
taichinakamura
0
280
KMP の Swift export
kokihirokawa
0
350
ユーザーの声とAI検証で進める、プロダクトディスカバリー
sansantech
PRO
1
110
関係性が駆動するアジャイル──GPTに人格を与えたら、対話を通してふりかえりを習慣化できた話
mhlyc
0
140
PLaMoの事後学習を支える技術 / PFN LLMセミナー
pfn
PRO
9
4k
E2Eテスト設計_自動化のリアル___Playwrightでの実践とMCPの試み__AIによるテスト観点作成_.pdf
findy_eventslides
1
580
OCI Network Firewall 概要
oracle4engineer
PRO
2
7.8k
Featured
See All Featured
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
19
1.2k
A better future with KSS
kneath
239
18k
The Power of CSS Pseudo Elements
geoffreycrofte
79
6k
Facilitating Awesome Meetings
lara
56
6.6k
Building an army of robots
kneath
306
46k
Navigating Team Friction
lara
189
15k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
12
1.2k
The Illustrated Children's Guide to Kubernetes
chrisshort
48
51k
Balancing Empowerment & Direction
lara
4
680
RailsConf 2023
tenderlove
30
1.2k
Optimizing for Happiness
mojombo
379
70k
Connecting the Dots Between Site Speed, User Experience & Your Business [WebExpo 2025]
tammyeverts
9
590
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
͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠