Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Cordova開発者が知っておきたいレンダリングエンジンの話 / HTML5 Conference 2015 in Kagoshima

F7dd7b43a0cc6c063f7d98ba23a1d359?s=47 久保田光則
July 04, 2015
Technology
4
1.4k

Cordova開発者が知っておきたいレンダリングエンジンの話 / HTML5 Conference 2015 in Kagoshima

HTML5カンファレンス2015in鹿児島での発表資料です。

F7dd7b43a0cc6c063f7d98ba23a1d359?s=128

久保田光則

July 04, 2015
Tweet

More Decks by 久保田光則

See All by 久保田光則
サーバサイドだけでReact使う / React as Template Engine
F7dd7b43a0cc6c063f7d98ba23a1d359?s=48 anatoo
1
400
requestIdleCallback()による協調的バックグラウンド処理の実現 / requestIdleCallback()
F7dd7b43a0cc6c063f7d98ba23a1d359?s=48 anatoo
0
2.9k
Mastodonとその脱中央集権の仕組み
F7dd7b43a0cc6c063f7d98ba23a1d359?s=48 anatoo
11
20k
大量の要素を高速に表示するためのバーチャルレンダリング入門 / Virtual Rendering Introduction
F7dd7b43a0cc6c063f7d98ba23a1d359?s=48 anatoo
8
9.1k
PHPに型推論を実装する ~入門編~ / Type inference on PHP
F7dd7b43a0cc6c063f7d98ba23a1d359?s=48 anatoo
6
9k
PHPで学ぶVM型正規表現エンジンの仕組み
F7dd7b43a0cc6c063f7d98ba23a1d359?s=48 anatoo
8
6.3k
チームで作る!イケてるデザイン
F7dd7b43a0cc6c063f7d98ba23a1d359?s=48 anatoo
16
14k
Cordovaで作るHTML5ハイブリッドアプリ 〜開発ベストプラクティスを学ぶ〜
F7dd7b43a0cc6c063f7d98ba23a1d359?s=48 anatoo
27
17k
最新SPA開発を学ぼう! ウェブエンジニアのための AngularJS入門
F7dd7b43a0cc6c063f7d98ba23a1d359?s=48 anatoo
20
19k

Other Decks in Technology

See All in Technology
How We Foster Reliability in Diversity
Ed424b1e857828ce69b0fdf4c3291d2e?s=48 nari_ex
PRO
9
2.4k
ソフトウェアテストで参考にしている67のモノ #scrumniigata / 67 things for software testing
405fe9ab689473f267e2cfbd95f78c75?s=48 kyonmm
PRO
0
110
ドキュメントの翻訳に必要なこと
0d0586f83b68c623c4f04c752c4b515b?s=48 mayukosawai
0
150
Puny to Powerful PostgreSQL Rails Apps
65e84915478a95a22dd40da712f304df?s=48 andyatkinson
PRO
0
260
AWS Control TowerとAWS Organizationsを活用した組織におけるセキュリティ設定
F2ccc400e285972d80feab0e4e57b5f7?s=48 fu3ak1
2
630
Devに力を授けたいSREのあゆみ / SRE that wants to empower developers
E12b5afe5b4e6552019c09d6ac4128c3?s=48 tocyuki
3
470
LINEのData Platform室が実践する大規模分散環境のCapacity Planning
A3966f193f4bef226a0d3e3c1f728d7f?s=48 line_developers
PRO
0
280
Dagu | オンプレ向けワークフローエンジン（WebUI 同梱）
2a80a0a6f834a75cc418ef59175ecbb0?s=48 yohamta
0
110
スタートアップ入社4日目までに考えたAWSのセキュリティ向上/ Startup AWS Security
0b238801605070def81a98cfe8061aee?s=48 shonansurvivors
3
2.9k
Embedded SRE at Mercari
Ecb3acc2d246962361a4f8b3f7a6dd12?s=48 tcnksm
0
810
2022年度ロボットフロンティア第1回
114d1b33c50cdc86c4c641682190407f?s=48 ryuichiueda
0
140
Steps toward self-service operations in eureka
71929a476c581dd754e4e1f355ac07d0?s=48 fukubaka0825
0
460

Featured

See All Featured
Design by the Numbers
027d1ebf66cc039a0bd3b55eeadbe75d?s=48 sachag
271
17k
Facilitating Awesome Meetings
245cee81a9c424266e5e401d844ea881?s=48 lara
29
3.9k
Designing Experiences People Love
1b75d89772b7eea1f6c89fbf362607d9?s=48 moore
130
22k
Typedesign – Prime Four
A0517b08532aec8ab2aae3f65d40ad86?s=48 hannesfritz
33
1.3k
Building Adaptive Systems
06f8b41980eb4c577fa40c41d5030c19?s=48 keathley
25
1.1k
Debugging Ruby Performance
D47656e20ff5e42f125fc5ea0fd636c6?s=48 tmm1
65
10k
Visualization
170b760e0147792d0140e59ec78e9893?s=48 eitanlees
124
11k
Building an army of robots
5f2da528927a2ec9ba4fec2069cbc958?s=48 kneath
299
40k
Infographics Made Easy
282d599b414022eba5096510f675b6e2?s=48 chrislema
233
17k
The Illustrated Children's Guide to Kubernetes
0438ae60cde4c7add6f9da48f28c15cc?s=48 chrisshort
14
34k
WebSockets: Embracing the real-time Web
E76911cbe088e5b850d966de3fc7435b?s=48 robhawkes
57
5k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
E195ae45320d9202eaa01c9f1d31a416?s=48 marktimemedia
15
910

Transcript

  1. $PSEPWB։ൃऀ͕஌͓͖͍ͬͯͨ ϨϯμϦϯάΤϯδϯͷ࿩ )5.-ΧϯϑΝϨϯεJOࣛࣇౡ

  2. ‣ ٱอాޫଇ!BOBUPP ‣ 6*69σβΠφʔɺ
 ιϑτ΢ΣΞΤϯδχΞ ‣ ΞγΞϧגࣜձࣾ"TQFDUJWF--$ ࣗݾ঺հ

  3. None

  4. ޷ධൃചதʂ

  5. None

  6. IUUQPOTFOJP

  7. ࠓ೔࿩͢͜ͱ

  8. ࿩͢͜ͱ ‣ ͳͥ$PSEPWB͔  ‣ Α͘ى͖Δ໰୊ ‣ ϨϯμϦϯάͷྲྀΕ ‣ ΠϯλϥΫγϣϯͷߴ଎Խ

    ‣ Ξχϝʔγϣϯͷߴ଎Խ

  9. ͳͥ$PSEPWB͔

  10. ‣ )5.-ϋΠϒϦουΞϓϦ։ൃ
 ͢ΔͨΊͷϑϨʔϜϫʔΫ

  11. )5.-ϋΠϒϦουΞϓϦ ‣ ΞϓϦͱͯ͠ಈ࡞ ‣ ಺෦ͷ࣮૷ʹ)5.-Λར༻ ΞϓϦ ωΠςΟϒ૚ )5.-

  12. ࢓૊Έ ΞϓϦ HTML ಡΈࠐΈ WebView

  13. )5.-ϋΠϒϦουΞϓϦ
 ͷԿ͕ྑ͍ͷ͔

  14. ΫϩεϓϥοτϑΥʔϜੑ Android iOS

  15. ΢Σϒͷ஌͕ࣝ׆͔ͤΔ

  16. ετΞͰͷ഑෍ ‣ ֎ݟ͸ී௨ͷΞϓϦͳͷͰɺετΞͰ഑ ෍Մೳ

  17. ωΠςΟϒͷػೳͷݺͼग़͠ ‣ +BWB4DSJQU͔Β04ͷ"1*Λݺͼग़͠Մೳ Android / iOS OS API

  18. $PSEPWBͷఏڙ͢ΔϓϥάΠϯ ‣ ͞Βʹ$PSEPWBϓϥάΠϯͷ
 ࢓૊ΈΛ࢖͑͹͜ΕҎ֎ͷ͜ͱ΋Մೳ ϑΝΠϧετϨʔδɺΧϝϥɺίϯύε Ճ଎౓ηϯαʔɺίϯλΫτϦετɺ Ґஔ৘ใऔಘɺωοτϫʔΫɺ#MVFUPPUI௨৴ɺ "OESPJEͷΠϯςϯτɺΞϓϦ಺ϒϥ΢βɺ (14ɺ/'$ɺFUDʜ

  19. Α͘ى͜Δ໰୊

  20. ‣ ύϑΥʔϚϯε͕ѱ͍ ‣ ωΠςΟϒΞϓϦͬΆ͘ͳΒͳ͍ ‣ ಈ͖͕΋ͬ͞Γ͍ͯ͠Δ

  21. ղܾࡦ

  22. ‣ ࠷ॳ͔Β଎͘ಈ͘Α͏ʹॻ͘ ‣ ॻ͍ͨޙʹνϡʔχϯά͢Δ PS

  23. ࠷ॳ͔Β଎͘ॻ͘ ‣ ࠷ॳ͔Β଎͍ʹͨ͜͜͠ͱ͸ແ͍ ‣ τϨʔυΦϑ͕͋·Γແ͍
 ϕετϓϥΫςΟεΛ౿ऻ͢Δ

  24. ॻ͍ͨޙʹνϡʔχϯά͢Δ ‣ ໰୊͕ग़͔ͯΒղܾ͢Δ ‣ ܭଌͯ͠ϘτϧωοΫΛಛఆɺ࠷దԽ

  25. ‣ "OESPJEͰ͸$ISPNFɺJ04Ͱ͸4BGBSJͷΠϯεϖ ΫλΛར༻ ‣ ϘτϧωοΫΛಛఆͯ͠࠷దԽ

  26. ‣ ͲͪΒΛ΍Δʹͯ͠΋
 ϨϯμϦϯάͷྲྀΕͷ೺Ѳ͸ඞਢ

  27. XFCLJUܥΤϯδϯͷ ϨϯμϦϯάͷྲྀΕ

  28. ϨϯμϦϯάͷ޻ఔ }GSBNF ඳը͕࢝·ͬͯऴΘΔ·Ͱ͕GSBNF Loading Scripting Rendering Painting

  29. Loading Scripting Rendering Painting

  30. Loading ϦιʔεͷಡΈࠐΈ Ϧιʔεͷύʔε {

  31. ϦιʔεͷಡΈࠐΈ ‣ )5.- $44 +4 ը૾ͳͲ
 ϑΝΠϧΛϩʔυ͢Δ ‣ ௨ৗͷ΢ΣϒͰ͸ωοτϫʔΫӽ͠ͷ
 Ϧιʔεͷऔಘ

  32. Ϧιʔεͷύʔε ‣ ಡΈࠐΈ͕ऴΘͬͨΒɺύʔε͢Δ ‣ ϒϥ΢βͷ಺෦දݱ΁ม׵

  33. ‣ )5.-͸%0.πϦʔʹม׵͞ΕΔ <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> IUUQXXXIUNMSPDLTDPNFOUVUPSJBMTJOUFSOBMTIPXCSPXTFSTXPSL )5.-

  34. $44 ‣ $44͸$440.πϦʔʹม׵͞ΕΔ body { color: black; } .container {

    width: 920px; IUUQXXXIUNMSPDLTDPNFOUVUPSJBMTJOUFSOBMTIPXCSPXTFSTXPSL

  35. +BWB4DSJQU ‣ +BWB4DSJQU͸࣮ߦՄೳͳදݱʹίϯύΠϧ ‣ +*5ίϯύΠϧͰػցޠʹม׵͞ΕͨΓ

  36. ௨ৗͷ΢Σϒͷ৔߹ ‣ ϦιʔεͷಡΈࠐΈ͕ѹ౗తʹ஗͍ ‣ ը૾ͷ࠷దԽ ‣ )5.-$44+4ͷѹॖ ‣ ಡΈࠐΈॱংͷ࠷దԽ

  37. ϋΠϒϦουΞϓϦͷ৔߹ ‣ ϦιʔεಡΈࠐΈ͸͋·Γ໰୊ʹͳΒͳ͍ ‣ ͢ͰʹϚγϯ಺ʹϦιʔε͕͋Δ͔Β ‣ ύʔε΋ϘτϧωοΫʹ͸ͳΒͳ͍

  38. Loading Scripting Rendering Painting

  39. ‣ +BWB4DSJQU͸଎͍ɻ
 جຊతʹͦΕ΄Ͳ໰୊ʹͳΒͳ͍ɻ

  40. ‣ ܭࢉྔͷଟ͍ॲཧ ‣ DBOWBT΁ͷඳը ‣ MBZPVUΛಉظతʹڧ੍͢Δίʔυ ໰୊ʹͳΔέʔε

  41. 4DSJQUJOH͕ϘτϧωοΫͩͬͨΒ ‣ ࿩͸؆୯ 1SPpMFTλϒͰ͞Βʹܭଌ

  42. ‣ #PUUPN6Qͷ4FMGཝɻॏ͍ͨؔ਺Λಛఆ

  43. ಉظతͳ-BZPVUͷڧ੍Λආ͚Δ ‣ UJNFMJOFͰ͜Ε͕ग़ͨΒ஫ҙ IUUQTEFWFMPQFSDISPNFDPNEFWUPPMTEPDTEFNPTUPPNVDIMBZPVU

  44. ಉظతͳMBZPVUͷڧ੍ͷྫ ‣ ཁૉͷҐஔ΍αΠζΛઃఆͭͭ͠P⒎TFU5PQ΍ HFU#PVOEJOH$MJFOU3FDU Λࢀর͢Δͱى͜Δ for(var m = 0; m

    < movers.length; m++) { movers[m].style.left = movers[m].offsetTop + 'px'; }

  45. Loading Scripting Rendering Painting

  46. Rendering ϦιʔεͷಡΈࠐΈ Ϧιʔεͷύʔε Calculate Style Layout {

  47. $BMDVMBUF4UZMF ‣ ݸผͷ%0.ཁૉʹରͯ͠ɺ౰ͨΔελΠ ϧΛܭࢉ͢Δ ‣ $440.πϦʔͱ%0.πϦʔΛࢀরͯ͠ɺ ϚονϯάॲཧΛߦ͏

  48. $44ϧʔϧͷϚονϯά %0.ཁૉ਺ ʷ $44ϧʔϧ਺  ॲཧճ਺ ‣ ૯౰ΓͰॲཧ͍ͯ͘͠ ‣ %0.ཁૉͱϧʔϧͷ਺͸


    গͳ͚Ε͹গͳ͍΄Ͳྑ͍

  49. ྑ͘ͳ͍ηϨΫλͷॻ͖ํ ‣ ࢠ ଙ ηϨΫλ͸ආ͚Δ ‣ %0.ཁૉͷ਌Λḷ͍ͬͯ͘ඞཁ͕༗ΔͨΊ body .foo .bar

    .hoge { … }

  50. ྑ͍ηϨΫλͷॻ͖ํ ‣ %0.ཁૉΛճݟΔ͚ͩ ‣ อकੑͷ఺Ͱ΋ྑ͍ .foo-bar-hoge { … }

  51. ن໿ʹ#&.Λ࢖͓͏ ‣ ࢠ ଙ ηϨΫλ͕ࣗಈతʹແ͘ͳΓߴ଎ʹ

  52. $44ϧʔϧͷϚονϯάॲཧ͸ അࣛʹͳΒͳ͍ ‣ %0.ૢ࡞͢Δͨͼʹॲཧ͕૸ΔͨΊ ‣ ΠϯλϥΫγϣϯΛ଎͘͢ΔͨΊʹ͸͜ ͷॲཧ΋଎͘͢Δඞཁ͋Γ

  53. -BZPVU ‣ ͦΕͧΕͷ%0.ཁૉͷϨΠΞ΢τ৘ใΛ ܭࢉ͢ΔϑΣʔζ

  54. -BZPVUͷ࠷ѱͷγφϦΦ ‣ %0.ૢ࡞΍$44ϓϩύςΟΛมߋͨ࣌͠ ‣ -BZPVUॲཧ͕Ҿ͖ى͜͞Εɺશͯͷ%0. ཁૉͷϨΠΞ΢τܭࢉ͕࠶౓ߦΘΕΔ

  55. ཁૉͷαΠζΛͳΔ΂͘ݻఆ͢Δ ‣ ϨΠΞ΢τܭࢉΛͳΔ΂͘গͳ͘͢ΔͨΊ .foobar { width: 100px; height: 200px; }

  56. BCTPMVUFϨΠΞ΢τΛੵۃతʹ࢖͏ ‣ ϨΠΞ΢τܭࢉΛͳΔ΂͘গͳ͘͢ΔͨΊ .piyo { position: absolute; top: 200px; left:

    400px; }

  57. ը૾ͷαΠζ͸ඞͣࢦఆ͢Δ ‣ -BZPVUͷ΍Γͳ͓͠Λ๷͙ͨΊ <img src=“foo.png” width=“300” height=“299”>

  58. Loading Scripting Rendering Painting

  59. ϦιʔεͷಡΈࠐΈ Ϧιʔεͷύʔε Paint Rasterize { Painting Composite Layers

  60. 1BJOU ‣ %JTQMBZ-JTU $ISPNJVNͩͱ4LJB΁ͷ໋ྩ ͷੜ੒͢ΔϑΣʔζ ‣ جຊ໰୊ʹͳΒͳ͍

  61. 3BTUFSJ[F ‣ ੜ੒ͨ͠%JTQMBZ-JTUΛ࣮ߦ࣮ͯ͠ࡍʹϐΫη ϧԽ͢ΔϑΣʔζ ‣ ॏ͍ͨ$44ϓϩύςΟ͕͔͔ͬͯΔͱ͕࣌ؒ ͔͔Δ ‣ CPYTIBEPX΍CPSEFSSBEJVT౳ ‣

    $ISPNJVNͩͱ4LJB%FCVHHFSͰ֬ೝͰ͖Δ

  62. $PNQPTJUF-BZFST ‣ 3BTUFSJ[F֤ͨ͠ϨΠϠʔΛ߹੒͢ΔϑΣʔ ζ ‣ [JOEFY΍pYFEQPTJUJPOͳͲʹԠͯ͡Ұຕ ֆʹ͢Δ

  63. Ҏ্ ‣ ϨϯμϦϯάͷ޻ఔ͸͜ͷ̐ͭ Loading Scripting Rendering Painting

  64. ΠϯλϥΫγϣϯΛ ଎͘͢Δ

  65. ΠϯλϥΫγϣϯͱ͸ ‣ ϢʔβͷΞΫγϣϯʹԠͯ͡ը໘্ʹ
 ද͞ΕΔϨεϙϯε ‣ GSBNFΛNTఔ౓ҎԼʹ཈͑Δ Button

  66. جຊతͳߟ͑ํ ‣ 4DSJQUJOHҎԼͷ޻ఔΛ଎͘͢Δ Rendering Painting { Paint Rasterize Composite Layers

    Calculate Style Layout { Scripting

  67. ΞχϝʔγϣϯΛ ଎͘͢Δ

  68. ΞχϝʔγϣϯΛ଎͘͢Δ ‣ $445SBOTJUJPO΍SFRVFTU"OJNBUJPO'SBNF
 ͰͷΞχϝʔγϣϯ ‣ GSBNFΛNTҎԼʹ཈͑Δ '14

  69. جຊతͳߟ͑ํ ‣ 4DSJQUJOHҎ֎͸$PNQPTJUF-BZFSTͷΈΛ
 ૸ΒͤΔΑ͏ʹ͢Δ Paint Rasterize { Composite Layers Painting

  70. Ξχϝʔγϣϯ͸γϏΞ ‣ %0.ૢ࡞ͨ͠Γɺ-BZPVUΛҾ͖ىͨ͜͠ Γ͢ΔͱϞόΠϧͩͱશ͘࢖͍΋ͷʹͳ Βͳ͍ ‣ Ξχϝʔγϣϯத͸USBOTGPSNͱPQBDJUZ͠ ͔͍͡Βͳ͍ͷ͕٢

  71. (16Λ׆༻͢Δ ‣ USBOTGPSNελΠϧଐੑʹ͸ɺ USBOTMBUFE    ΛؚΊ͓ͯ͘ ‣ $PNQPTJUF-BZFSTॲཧ࣌ʹ(16Ͱ߹੒͞

    ΕΔΑ͏ʹͳΔ

  72. ิ଍$44ϓϩύςΟͷมߋ

  73. $44ϓϩύςΟͷมߋ͢Δͱ Կ͕ى͜Δ ‣ $44ϓϩύςΟʹΑͬͯҧ͏ ‣ XJEUI΍NBSHJOͳͲཁૉͷେ͖͞΍Ґஔͷมߋ ‣ -BZPVU͔Βॲཧ͕࢝·Δ ‣ USBOTGPSN΍PQBDJUZΛมߋ

    ‣ $PNQPTJUF-BZFSTͷΈ૸Δ

  74. $445SJHHFSTͷ঺հ ‣ $44ϓϩύςΟͷมߋ͕
 ԿΛҾ͖ى͔͜͢໢ཏ IUUQDTTUSJHHFSTDPN

  75. ·ͱΊ

  76. ϨϯμϦϯάͷ޻ఔ Loading Scripting Rendering Painting ‣ ͦΕͧΕ໾ׂ͕͋Γνϡʔχϯάํ๏΋ҧ͏

  77. ΠϯλϥΫγϣϯΛ଎͘͢Δ Rendering Painting ‣ 4DSJQUJOHҎԼΛ଎͘͢Δ Scripting

  78. ΞχϝʔγϣϯΛ଎͘͢Δ ‣ $PNQPTJUF-BZFSTͷΈ૸ΒͤΔ Paint Rasterize { Composite Layers Painting

  79. ͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠