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

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

Transcript

1. $PSEPWB։ൃऀ͕஌͓͖͍ͬͯͨ
   ϨϯμϦϯάΤϯδϯͷ࿩ )5.-ΧϯϑΝϨϯε
   JO
   ࣛࣇౡ
2. ‣ ٱอాޫଇ
   !BOBUPP
   ‣ 6*69σβΠφʔɺ
 ιϑτ΢ΣΞΤϯδχΞ
   ‣ ΞγΞϧגࣜձࣾ
   
   "TQFDUJWF
   --$ ࣗݾ঺հ
4. ޷ධൃചதʂ
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. ‣ #PUUPN
    6Qͷ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. $BMDVMBUF
    4UZMF ‣ ݸผͷ%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΍pYFE
    QPTJUJPOͳͲʹԠͯ͡Ұຕ ֆʹ͢Δ
63. Ҏ্ ‣ ϨϯμϦϯάͷ޻ఔ͸͜ͷ̐ͭ Loading Scripting Rendering Painting
64. ΠϯλϥΫγϣϯΛ
    ଎͘͢Δ
65. ΠϯλϥΫγϣϯͱ͸ ‣ ϢʔβͷΞΫγϣϯʹԠͯ͡ը໘্ʹ
 ද͞ΕΔϨεϙϯε
    ‣ GSBNFΛNTఔ౓ҎԼʹ཈͑Δ Button
66. جຊతͳߟ͑ํ ‣ 4DSJQUJOHҎԼͷ޻ఔΛ଎͘͢Δ Rendering Painting { Paint Rasterize Composite Layers Calculate Style Layout { Scripting
67. ΞχϝʔγϣϯΛ
    ଎͘͢Δ
68. ΞχϝʔγϣϯΛ଎͘͢Δ ‣ $44
    5SBOTJUJPO΍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. $44
    5SJHHFSTͷ঺հ ‣ $44ϓϩύςΟͷมߋ͕
 ԿΛҾ͖ى͔͜͢໢ཏ IUUQDTTUSJHHFSTDPN
75. ·ͱΊ
76. ϨϯμϦϯάͷ޻ఔ Loading Scripting Rendering Painting ‣ ͦΕͧΕ໾ׂ͕͋Γνϡʔχϯάํ๏΋ҧ͏
77. ΠϯλϥΫγϣϯΛ଎͘͢Δ Rendering Painting ‣ 4DSJQUJOHҎԼΛ଎͘͢Δ Scripting
78. ΞχϝʔγϣϯΛ଎͘͢Δ ‣ $PNQPTJUF
    -BZFSTͷΈ૸ΒͤΔ Paint Rasterize { Composite Layers Painting
79. ͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠