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

Chrome の marquee 要素が 優秀だった話

Dc696687bae442425a220771df158346?s=47 tsuyoshi wada
March 29, 2018
Technology
8
4.5k

Chrome の marquee 要素が 優秀だった話

marquee の深みに迫ります。

Dc696687bae442425a220771df158346?s=128

tsuyoshi wada

March 29, 2018
Tweet

More Decks by tsuyoshi wada

See All by tsuyoshi wada
技術面からみる パフォーマンス改善 / Frontrend Vol.13 Dec 19th, 2018
Dc696687bae442425a220771df158346?s=48 tsuyoshiwada
7
1.1k
Yarn + CI + GitHub で挑む npm パッケージの定期更新
Dc696687bae442425a220771df158346?s=48 tsuyoshiwada
3
1.4k

Other Decks in Technology

See All in Technology
Lessons Learned from Scaling Infrastructure as Code
Be8b596c46f4c9a1aec6a7586af33134?s=48 joatmon08
0
800
What's new in Vision
53e2d354b3299d64a54af680865516d5?s=48 satotakeshi
0
220
What's Data Lake ? Azure Data Lake best practice
0d7a3b61c5c1f64a50136cf4bb5702b7?s=48 ryomaru0825
2
750
MoT TechTalk #12 タクシーアプリ『GO』大規模トラフィックを捌く分析データ基盤の全容に迫る！
44a210d1299a727e9d601a47dfedeabf?s=48 mot_techtalk
1
380
Oracle Cloud Infrastructure：2022年6月度サービス・アップデート
3115a782126be714b5f94d24073c957d?s=48 oracle4engineer
PRO
0
150
DeepL の用語集が（いつのまにか）日本語に対応してたので試してみた
8259a0ff485d7af09a6044cc446f1718?s=48 irokawah0
0
170
組織の崩壊と再生、その中で何を考え、感じたのか。 そして本当に必要だったもの
962920d4608365b332d0c65f9b3e7ba5?s=48 kosako
10
4.4k
スクラムのスケールとチームトポロジー / Scaled Scrum and Team Topologies
4dd89003cc8fe9f21d67b0c99b773436?s=48 daiksy
1
450
要約 "Add Live Text interaction to your app"
9e64d2069945742c818421e884603b44?s=48 ushisantoasobu
0
150
プログラマがオブジェクト指向しても幸せになれない理由
Bf7fe621f4fe1615c228ef8a79b87282?s=48 shirayanagiryuji
0
150
機械学習システムアーキテクチャ入門 #1
8fa31051503b09846584c49cd53d2f80?s=48 asei
3
1.2k
情報の世界 2022年度 第11回「都市のデータ」 #情報の世界 / Data of City 2022
65241d0356dc5a93b0fec68bcf7b42ac?s=48 yumulab
0
110

Featured

See All Featured
Reflections from 52 weeks, 52 projects
E43f8dfd01057f8304f5f8fb9a294d7d?s=48 jeffersonlam
337
17k
For a Future-Friendly Web
F68cb25ae3e5c2106997454b13b7737d?s=48 brad_frost
166
7.4k
How to train your dragon (web standard)
053e75a5b48b44d6dd0612795dfb326d?s=48 notwaldorf
58
3.9k
Design by the Numbers
027d1ebf66cc039a0bd3b55eeadbe75d?s=48 sachag
271
17k
Raft: Consensus for Rubyists
B6a8f005f39d23ffc930508ac9da68b9?s=48 vanstee
126
5.4k
Support Driven Design
1519587b1a0febb658c36c94f6272b0d?s=48 roundedbygravity
86
8.5k
YesSQL, Process and Tooling at Scale
D09fad3e36ae6841f54820be0e907f7a?s=48 rocio
157
12k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
Fd55de4174accaf3b4f030e43a8a70c6?s=48 marcduiker
5
510
What's new in Ruby 2.0
7edec06b5435e0dac07a353b2cc26253?s=48 geeforr
336
30k
Product Roadmaps are Hard
7cbd3f5f922d798cc312eaf596de7ae6?s=48 iamctodd
34
6.5k
Making Projects Easy
C4de88ea47538e4594750e3861a341c8?s=48 brettharned
98
4.3k
Practical Orchestrator
168ccec72eee0530b818d44f3fedaacf?s=48 shlominoach
178
8.6k

Transcript

  1. Chrome ͷ marquee ཁૉ͕ ༏लͩͬͨ࿩ 2018-03-29 / Meguro.es #14 @wadackel

  2. ࣗݾ঺հ @wadackel / Θͩ ͭΑ͠ tsuyoshiwada https://blog.wadackel.me • Go Ͱ

    CHANGELOG δΣωϨʔλ࡞ͬͨΓ • Storybook ͱ Puppeteer ͰεΫϦʔϯγϣοτࡱͬͨΓ • CyberAgent, Inc. Ͱಇ͍͍ͯͨΓ͠·͢

  3. ·ͣ࢝Ίʹ͓அΓͰ͕͢…

  4. marquee ཁૉ͸طʹ ഇࢭ͞Ε͍ͯΔͨΊ ࢖Θͳ͍Α͏ʹ͠·͠ΐ͏ օ͞Μ͝ଘ஌ͷ௨Γ 00000002 ਓੜ ౓໨ͷ-5 8FMDPNF৺͔Β׻ܴ

  5. marquee ཁૉͷ͓͞Β͍ HTML ্ͰςΩετ͕εΫϩʔϧ͢ΔྖҬΛ ࡞Δɻࢦఆͨ͠ଐੑʹԠͯ͡ɺςΩετ͕Ξ χϝʔγϣϯ͠ͳ͕ΒϨϯμϦϯά͞ΕΔɻ ʮ͍ͭ͜……ಈͧ͘ʂʯ

  6. ͔͜͜Β͕ຊ୊ɻ marquee in Chrome ͷ Ͳ͕͜༏लͳͷ ʁ

  7. Chrome ͱ Firefox Ͱ marquee ͷಈ࡞Λൺֱͯ͠Έ·͠ΐ͏ https://developer.mozilla.org/ja/docs/Web/HTML/Element/marquee MDN web docs

    ͷ DEMO

  8. Firefox ͸ʮΧΫΧΫʯ ͱ ςΩετ͕εΫϩʔϧ͞ΕΔ

  9. Chrome ͸Կނ͔ ʮψϧψϧʯ ͱಈ͘

  10. ͜Ε೗Կʹʁ

  11. Ͳ͏ͤ Chrome ͷ ϨϯμϦϯάΤϯδϯ͕༏लͱ͔ ͦΜͳ࿩Ͱ͠ΐʁ

  12. ͱɺࡶͳղऍͰࡁ·ͣ͞ʹ ϒϥ΢βͷιʔείʔυΛ ௥ͬͯΈΔ

  13. ·ͣ͸ Firefox ͷ ϨΠΞ΢τΤϯδϯͰ͋Δ Gecko ͔Β

  14. Ξχϝʔγϣϯ͕։࢝͞Εͯ ͍ΔͩΖ͏෦෼ <method name="start" exposeToUntrustedContent="true"> <body> <![CDATA[ if (this.runId ==

    0) { var myThis = this; var lambda = function myTimeOutFunction(){myThis._doMove(false);} this.runId = window.setTimeout(lambda, this._scrollDelay - this._deltaStartStop); this._deltaStartStop = 0; } ]]> </body> </method> ࢀߟNP[JMMBHFDLPMBZPVUTUZMFYCMNBSRVFFYCMNBSRVFFYNM

  15. Ξχϝʔγϣϯ͕։࢝͞Εͯ ͍ΔͩΖ͏෦෼ <method name="start" exposeToUntrustedContent="true"> <body> <![CDATA[ if (this.runId ==

    0) { var myThis = this; var lambda = function myTimeOutFunction(){myThis._doMove(false);} this.runId = window.setTimeout(lambda, this._scrollDelay - this._deltaStartStop); this._deltaStartStop = 0; } ]]> </body> </method> ࢀߟNP[JMMBHFDLPMBZPVUTUZMFYCMNBSRVFFYCMNBSRVFFYNM setTimeout() Λ࢖ͬͯ _doMove() Λݺͼग़ͯ͠Δ

  16. _doMove() Λ௥ͬͯΈΔ <method name="_doMove"> <parameter name="aResetPosition"/> <body> <![CDATA[ // ...

    εΫϩʔϧҐஔͷࢉग़ϩδοΫ (௕͍ͷͰলུ) if ((this._direction == "up") || (this._direction == "down")) { this.outerDiv.scrollTop = this.newPosition; } else { this.outerDiv.scrollLeft = this.newPosition; } // ... ͦͷଞॲཧ ]]> </body> </method> ࢀߟNP[JMMBHFDLPMBZPVUTUZMFYCMNBSRVFFYCMNBSRVFFYNM

  17. _doMove() Λ௥ͬͯΈΔ <method name="_doMove"> <parameter name="aResetPosition"/> <body> <![CDATA[ // ...

    εΫϩʔϧҐஔͷࢉग़ϩδοΫ (௕͍ͷͰলུ) if ((this._direction == "up") || (this._direction == "down")) { this.outerDiv.scrollTop = this.newPosition; } else { this.outerDiv.scrollLeft = this.newPosition; } // ... ͦͷଞॲཧ ]]> </body> </method> ࢀߟNP[JMMBHFDLPMBZPVUTUZMFYCMNBSRVFFYCMNBSRVFFYNM ཁૉͷ scrollTop, scrollLeft ʹ ࢉग़ͨ͠࠲ඪ஋Λࢦఆ͍ͯ͠Δ

  18. ૉ௚ͳ࣮૷͕ͩʮΧΫΧΫʯ ͢Δͷ΋ೲಘͷ಺༰ • setTimeout() ͰϧʔϓΛൃੜͤͯ͞Ξχϝʔγϣϯͤͯ͞Δ - ϧʔϓͱϒϥ΢βͷ࠶ඳըλΠϛϯά͕Ұக͠ͳ͍ • ֤ϧʔϓͰͷ࠲ඪΛٻΊͯ scrollTop,

    scrollLeft ʹ୅ೖ͠Ҡಈ͍ͤͯ͞Δ - ϨΠΞ΢τͷ࠶ܭࢉ͕ൃੜ͢Δ ※ಈ࡞͕ JS Ͱ࣮૷͞Ε͍ͯͨͷ͕ɺݸਓతʹ͸ҙ֎ͩͬͨ

  19. Ͱ͸ຊ໋

  20. Chrome վΊ Chromium ͷ ࣮૷Λ೷͘

  21. Ξχϝʔγϣϯ͕։࢝͞Εͯ ͍ΔͩΖ͏ίʔυ෦෼ void HTMLMarqueeElement::start() { if (continue_callback_request_id_) return; RequestAnimationFrameCallback* callback

    = new RequestAnimationFrameCallback(this); continue_callback_request_id_ = GetDocument().RequestAnimationFrame(callback); } ࢀߟDISPNJVNUIJSE@QBSUZ8FC,JU4PVSDFDPSFIUNM)5.-.BSRVFF&MFNFOUDQQ

  22. Ξχϝʔγϣϯ͕։࢝͞Εͯ ͍ΔͩΖ͏ίʔυ෦෼ void HTMLMarqueeElement::start() { if (continue_callback_request_id_) return; RequestAnimationFrameCallback* callback

    = new RequestAnimationFrameCallback(this); continue_callback_request_id_ = GetDocument().RequestAnimationFrame(callback); } ࢀߟDISPNJVNUIJSE@QBSUZ8FC,JU4PVSDFDPSFIUNM)5.-.BSRVFF&MFNFOUDQQ requestAnimationFrame Λ ࢖ͬͯΔͬΆ͍!!

  23. ֤ඳըϑϨʔϜͷॲཧΛ ௥ͬͯΈΔ void HTMLMarqueeElement::ContinueAnimation() { // ... લॲཧ (௕͍ͷͰলུ) AnimationParameters

    parameters = GetAnimationParameters(); int scroll_delay = scrollDelay(); int scroll_amount = scrollAmount(); // ... ࣮ࡍʹ࠲ඪΛద༻ͨ͠Γͯ͠Δ (௕͍ͷͰলུ) } ࢀߟDISPNJVNUIJSE@QBSUZ8FC,JU4PVSDFDPSFIUNM)5.-.BSRVFF&MFNFOUDQQ

  24. ֤ඳըϑϨʔϜͷॲཧΛ ௥ͬͯΈΔ void HTMLMarqueeElement::ContinueAnimation() { // ... લॲཧ (௕͍ͷͰলུ) AnimationParameters

    parameters = GetAnimationParameters(); int scroll_delay = scrollDelay(); int scroll_amount = scrollAmount(); // ... ࣮ࡍʹ࠲ඪΛద༻ͨ͠Γͯ͠Δ (௕͍ͷͰলུ) } ࢀߟDISPNJVNUIJSE@QBSUZ8FC,JU4PVSDFDPSFIUNM)5.-.BSRVFF&MFNFOUDQQ Կ΍ΒΞχϝʔγϣϯ༻ͷ ύϥϝʔλΛ࡞͍ͬͯΔ

  25. AnimationParameters ͷ ੜ੒ʹഭΔ HTMLMarqueeElement::GetAnimationParameters() { AnimationParameters parameters; Metrics metrics =

    GetMetrics(); // ... ௕͍ͨΊলུ!! parameters.transform_begin = CreateTransform(-metrics.content_width); parameters.transform_end = CreateTransform(metrics.marquee_width); // ... ௕͍ͨΊলུ!! } ࢀߟDISPNJVNUIJSE@QBSUZ8FC,JU4PVSDFDPSFIUNM)5.-.BSRVFF&MFNFOUDQQ

  26. AnimationParameters ͷ ੜ੒ʹഭΔ HTMLMarqueeElement::GetAnimationParameters() { AnimationParameters parameters; Metrics metrics =

    GetMetrics(); // ... ௕͍ͨΊলུ!! parameters.transform_begin = CreateTransform(-metrics.content_width); parameters.transform_end = CreateTransform(metrics.marquee_width); // ... ௕͍ͨΊলུ!! } ࢀߟDISPNJVNUIJSE@QBSUZ8FC,JU4PVSDFDPSFIUNM)5.-.BSRVFF&MFNFOUDQQ Transform?? Λ࡞͍ͬͯΔΆ͍

  27. ͞Βʹ͞Βʹ CreateTransform ʹഭΔ AtomicString HTMLMarqueeElement::CreateTransform(double value) const { char axis

    = IsHorizontal() ? 'X' : 'Y'; return String::Format("translate%c(", axis) + String::NumberToStringECMAScript(value) + "px)"; } ࢀߟDISPNJVNUIJSE@QBSUZ8FC,JU4PVSDFDPSFIUNM)5.-.BSRVFF&MFNFOUDQQ

  28. ͞Βʹ͞Βʹ CreateTransform ʹഭΔ AtomicString HTMLMarqueeElement::CreateTransform(double value) const { char axis

    = IsHorizontal() ? 'X' : 'Y'; return String::Format("translate%c(", axis) + String::NumberToStringECMAScript(value) + "px)"; } ࢀߟDISPNJVNUIJSE@QBSUZ8FC,JU4PVSDFDPSFIUNM)5.-.BSRVFF&MFNFOUDQQ CSS ϓϩύςΟͰ͋Δ Transform ͷ஋Λੜ੒ͯͨ͠

  29. ͦͷଞɺ ιʔείʔυΛݟͯ ؾ͍ͮͨ఺͕…

  30. ཁૉͷੜ੒ॲཧ void HTMLMarqueeElement::DidAddUserAgentShadowRoot(ShadowRoot& shadow_root) { auto* style = HTMLStyleElement::Create(GetDocument(), CreateElementFlags());

    style->setTextContent( ":host { display: inline-block; overflow: hidden;" "text-align: initial; white-space: nowrap; }" ":host([direction=\"up\"]), :host([direction=\"down\"]) { overflow: " "initial; overflow-y: hidden; white-space: initial; }" ":host > div { will-change: transform; }"); shadow_root.AppendChild(style); Element* mover = HTMLDivElement::Create(GetDocument()); shadow_root.AppendChild(mover); mover->AppendChild( HTMLSlotElement::CreateUserAgentDefaultSlot(GetDocument())); mover_ = mover; } ࢀߟDISPNJVNUIJSE@QBSUZ8FC,JU4PVSDFDPSFIUNM)5.-.BSRVFF&MFNFOUDQQ

  31. ShadowRoot ΍Β Slot ཁૉ΍Β ݟ֮͑ͷ͋Δهड़͕୔ࢁʂ

  32. ੜ੒͞ΕΔཁૉͷΠϝʔδ <marquee> #shadow-root <style> :host { display: inline-block; overflow: hidden;

    text-align: initial; white-space: nowrap; } :host([direction="up"]), :host([direction="down"]) { overflow: initial; overflow-y: hidden; white-space: initial; } :host > div { will-change: transform; } </style> <!-- ҎԼͷ div ͕ transform ϓϩύςΟͰΞχϝʔγϣϯ͢Δ --> <div> <slot></slot> </div> </marquee>

  33. ࢥ͍͖ͬΓ Web Components

  34. Chromium ͷ marquee ࣮૷ ͸૝૾ΑΓ΋Ϟμϯͩͬͨ… • ಺෦࣮૷͸ Web Components ͩͬͨ…!!

    • requestAnimationFrame ʹΑΔ࠶ඳըλΠϛϯάͷ࠷దԽ - ϧʔϓͱϒϥ΢βͷ࠶ඳըλΠϛϯά͕Ұக • ֤ϧʔϓͰͷ࠲ඪ͸ CSS ͷ transform ϓϩύςΟͰ؅ཧ͞Ε͍ͯͨ - ϨΠΞ΢τͷ࠶ܭࢉ͕ى͖ͳ͍ ✨

  35. ·ͱΊ

  36. ͍ʹ͑͠ͷཁૉ͸ࢥ͍ͷ΄͔ Ϟμϯͳٕज़Ͱಈ࡞͍ͯͨ͠ • ShadowDOM ʹΑΔελΠϧͷӅṭ • requestAnimationFrame ʹΑΔΞχϝʔγϣϯͷ੍ޚ • will-change

    Λ࢖ͬͨΞχϝʔγϣϯͷ࠷దԽ • transform/translate Λ࢖ͬͨ࠲ඪҠಈ (ඳըෛՙ࠷దԽ) • ීஈͷ Web ϑϩϯτΤϯυ։ൃʹ௨͡Δٕज़Ͱ
 ߏ੒͞Ε͍ͯͨ • ͋͘·Ͱ Chromium ͷதͰ͸Ͷ

  37. ϒϥ΢βͷ࣮૷Λ೷͘ͷ͸ ҙ֎ͱָ͍͠!! • C++ ॻ͚ͳͯ͘΋ɺงғؾͰԿͱͳ͘ॻ͍ͯ͋Δ͜ͱ͕෼͔Δ • ίϝϯτ΋ͦͦ͜͜ॻ͔Ε͍ͯΔͷͰ • ΤσΟλΛ׆༻͢Δ -

    $ ctags --languages=C++ ͰλάΛ࡞ͬͯ… - vim Ͱఆٛδϟϯϓͯ͠ιʔείʔυ㓢኶͢Δͱָ • ripgrep Έ͍ͨͳߴ଎ͳ grep ୅ସπʔϧ΋༗༻ • https://cs.chromium.org ΋ศར

  38. ϒϥ΢β࣮૷ݟΔͷ͸ ͜Ε͕ॳΊͯͰͨ͠… ޡΓͳͲ͋Γ·ͨ͠Βɺ༏͘͠ڭ͍͑ͯͨͩ ͚Δͱ޾͍Ͱ͢

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