Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Speaker Deck
PRO
Sign in
Sign up for free
Chrome の marquee 要素が 優秀だった話
tsuyoshi wada
March 29, 2018
Technology
8
4.6k
Chrome の marquee 要素が 優秀だった話
marquee の深みに迫ります。
tsuyoshi wada
March 29, 2018
Tweet
Share
More Decks by tsuyoshi wada
See All by tsuyoshi wada
技術面からみる パフォーマンス改善 / Frontrend Vol.13 Dec 19th, 2018
tsuyoshiwada
7
1.1k
Yarn + CI + GitHub で挑む npm パッケージの定期更新
tsuyoshiwada
3
1.4k
Other Decks in Technology
See All in Technology
FlexScan HD2452Wの 後継を探して
tring
0
6.4k
DNS権威サーバのクラウドサービス向けに行われた攻撃および対策 / DNS Pseudo-Random Subdomain Attack and mitigations
kazeburo
5
1.3k
OCI技術資料 : ロード・バランサー 詳細 / Load Balancer 200
ocise
2
7.2k
JAWS-UG 横浜 #54 資料
takakuni
0
210
Multi-Cloud Gatewayでデータを統治せよ!/ Data Federation with MCG
tutsunom
1
300
Oracle Transaction Manager for Microservices Free 22.3 製品概要
oracle4engineer
PRO
5
110
Kaggleシミュレーションコンペの動向
nagiss
0
270
Oracle Cloud Infrastructure:2023年1月度サービス・アップデート
oracle4engineer
PRO
0
160
ML PM, DS PMってどんな仕事をしているの?
line_developers
PRO
1
240
NGINXENG JP#2 - 1-NGINX-エンジニアリング勉強会-きょうの見どころ
hiropo20
0
110
メドレー エンジニア採用資料/ Medley Engineer Guide
medley
3
5.1k
AI Builderについて
miyakemito
0
910
Featured
See All Featured
The Pragmatic Product Professional
lauravandoore
21
3.4k
A Tale of Four Properties
chriscoyier
149
21k
Web development in the modern age
philhawksworth
197
9.6k
Faster Mobile Websites
deanohume
295
29k
Designing on Purpose - Digital PM Summit 2013
jponch
108
5.9k
The Brand Is Dead. Long Live the Brand.
mthomps
48
2.9k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
239
19k
A designer walks into a library…
pauljervisheath
199
16k
Web Components: a chance to create the future
zenorocha
304
40k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
13
1.1k
Clear Off the Table
cherdarchuk
79
290k
Rails Girls Zürich Keynote
gr2m
87
12k
Transcript
Chrome ͷ marquee ཁૉ͕ ༏लͩͬͨ 2018-03-29 / Meguro.es #14 @wadackel
ࣗݾհ @wadackel / Θͩ ͭΑ͠ tsuyoshiwada https://blog.wadackel.me • Go Ͱ
CHANGELOG δΣωϨʔλ࡞ͬͨΓ • Storybook ͱ Puppeteer ͰεΫϦʔϯγϣοτࡱͬͨΓ • CyberAgent, Inc. Ͱಇ͍͍ͯͨΓ͠·͢
·ͣ࢝Ίʹ͓அΓͰ͕͢…
marquee ཁૉطʹ ഇࢭ͞Ε͍ͯΔͨΊ Θͳ͍Α͏ʹ͠·͠ΐ͏ օ͞Μ͝ଘͷ௨Γ 00000002 ਓੜ ͷ-5 8FMDPNF৺͔Βܴ
marquee ཁૉͷ͓͞Β͍ HTML ্ͰςΩετ͕εΫϩʔϧ͢ΔྖҬΛ ࡞Δɻࢦఆͨ͠ଐੑʹԠͯ͡ɺςΩετ͕Ξ χϝʔγϣϯ͠ͳ͕ΒϨϯμϦϯά͞ΕΔɻ ʮ͍ͭ͜……ಈͧ͘ʂʯ
͔͜͜Β͕ຊɻ marquee in Chrome ͷ Ͳ͕͜༏लͳͷ ʁ
Chrome ͱ Firefox Ͱ marquee ͷಈ࡞Λൺֱͯ͠Έ·͠ΐ͏ https://developer.mozilla.org/ja/docs/Web/HTML/Element/marquee MDN web docs
ͷ DEMO
Firefox ʮΧΫΧΫʯ ͱ ςΩετ͕εΫϩʔϧ͞ΕΔ
Chrome Կނ͔ ʮψϧψϧʯ ͱಈ͘
͜ΕԿʹʁ
Ͳ͏ͤ Chrome ͷ ϨϯμϦϯάΤϯδϯ͕༏लͱ͔ ͦΜͳͰ͠ΐʁ
ͱɺࡶͳղऍͰࡁ·ͣ͞ʹ ϒϥβͷιʔείʔυΛ ͬͯΈΔ
·ͣ Firefox ͷ ϨΠΞτΤϯδϯͰ͋Δ Gecko ͔Β
Ξχϝʔγϣϯ͕։࢝͞Εͯ ͍ΔͩΖ͏෦ <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
Ξχϝʔγϣϯ͕։࢝͞Εͯ ͍ΔͩΖ͏෦ <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() Λݺͼग़ͯ͠Δ
_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
_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 ʹ ࢉग़ͨ͠࠲ඪΛࢦఆ͍ͯ͠Δ
ૉͳ࣮͕ͩʮΧΫΧΫʯ ͢Δͷೲಘͷ༰ • setTimeout() ͰϧʔϓΛൃੜͤͯ͞Ξχϝʔγϣϯͤͯ͞Δ - ϧʔϓͱϒϥβͷ࠶ඳըλΠϛϯά͕Ұக͠ͳ͍ • ֤ϧʔϓͰͷ࠲ඪΛٻΊͯ scrollTop,
scrollLeft ʹೖ͠Ҡಈ͍ͤͯ͞Δ - ϨΠΞτͷ࠶ܭࢉ͕ൃੜ͢Δ ※ಈ࡞͕ JS Ͱ࣮͞Ε͍ͯͨͷ͕ɺݸਓతʹҙ֎ͩͬͨ
Ͱຊ໋
Chrome վΊ Chromium ͷ ࣮Λ͘
Ξχϝʔγϣϯ͕։࢝͞Εͯ ͍ΔͩΖ͏ίʔυ෦ void HTMLMarqueeElement::start() { if (continue_callback_request_id_) return; RequestAnimationFrameCallback* callback
= new RequestAnimationFrameCallback(this); continue_callback_request_id_ = GetDocument().RequestAnimationFrame(callback); } ࢀߟDISPNJVN
[email protected]
8FC,JU4PVSDFDPSFIUNM)5.-.BSRVFF&MFNFOUDQQ
Ξχϝʔγϣϯ͕։࢝͞Εͯ ͍ΔͩΖ͏ίʔυ෦ void HTMLMarqueeElement::start() { if (continue_callback_request_id_) return; RequestAnimationFrameCallback* callback
= new RequestAnimationFrameCallback(this); continue_callback_request_id_ = GetDocument().RequestAnimationFrame(callback); } ࢀߟDISPNJVN
[email protected]
8FC,JU4PVSDFDPSFIUNM)5.-.BSRVFF&MFNFOUDQQ requestAnimationFrame Λ ͬͯΔͬΆ͍!!
֤ඳըϑϨʔϜͷॲཧΛ ͬͯΈΔ void HTMLMarqueeElement::ContinueAnimation() { // ... લॲཧ (͍ͷͰলུ) AnimationParameters
parameters = GetAnimationParameters(); int scroll_delay = scrollDelay(); int scroll_amount = scrollAmount(); // ... ࣮ࡍʹ࠲ඪΛద༻ͨ͠Γͯ͠Δ (͍ͷͰলུ) } ࢀߟDISPNJVN
[email protected]
8FC,JU4PVSDFDPSFIUNM)5.-.BSRVFF&MFNFOUDQQ
֤ඳըϑϨʔϜͷॲཧΛ ͬͯΈΔ void HTMLMarqueeElement::ContinueAnimation() { // ... લॲཧ (͍ͷͰলུ) AnimationParameters
parameters = GetAnimationParameters(); int scroll_delay = scrollDelay(); int scroll_amount = scrollAmount(); // ... ࣮ࡍʹ࠲ඪΛద༻ͨ͠Γͯ͠Δ (͍ͷͰলུ) } ࢀߟDISPNJVN
[email protected]
8FC,JU4PVSDFDPSFIUNM)5.-.BSRVFF&MFNFOUDQQ ԿΒΞχϝʔγϣϯ༻ͷ ύϥϝʔλΛ࡞͍ͬͯΔ
AnimationParameters ͷ ੜʹഭΔ HTMLMarqueeElement::GetAnimationParameters() { AnimationParameters parameters; Metrics metrics =
GetMetrics(); // ... ͍ͨΊলུ!! parameters.transform_begin = CreateTransform(-metrics.content_width); parameters.transform_end = CreateTransform(metrics.marquee_width); // ... ͍ͨΊলུ!! } ࢀߟDISPNJVN
[email protected]
8FC,JU4PVSDFDPSFIUNM)5.-.BSRVFF&MFNFOUDQQ
AnimationParameters ͷ ੜʹഭΔ HTMLMarqueeElement::GetAnimationParameters() { AnimationParameters parameters; Metrics metrics =
GetMetrics(); // ... ͍ͨΊলུ!! parameters.transform_begin = CreateTransform(-metrics.content_width); parameters.transform_end = CreateTransform(metrics.marquee_width); // ... ͍ͨΊলུ!! } ࢀߟDISPNJVN
[email protected]
8FC,JU4PVSDFDPSFIUNM)5.-.BSRVFF&MFNFOUDQQ Transform?? Λ࡞͍ͬͯΔΆ͍
͞Βʹ͞Βʹ CreateTransform ʹഭΔ AtomicString HTMLMarqueeElement::CreateTransform(double value) const { char axis
= IsHorizontal() ? 'X' : 'Y'; return String::Format("translate%c(", axis) + String::NumberToStringECMAScript(value) + "px)"; } ࢀߟDISPNJVN
[email protected]
8FC,JU4PVSDFDPSFIUNM)5.-.BSRVFF&MFNFOUDQQ
͞Βʹ͞Βʹ CreateTransform ʹഭΔ AtomicString HTMLMarqueeElement::CreateTransform(double value) const { char axis
= IsHorizontal() ? 'X' : 'Y'; return String::Format("translate%c(", axis) + String::NumberToStringECMAScript(value) + "px)"; } ࢀߟDISPNJVN
[email protected]
8FC,JU4PVSDFDPSFIUNM)5.-.BSRVFF&MFNFOUDQQ CSS ϓϩύςΟͰ͋Δ Transform ͷΛੜͯͨ͠
ͦͷଞɺ ιʔείʔυΛݟͯ ؾ͍͕ͮͨ…
ཁૉͷੜॲཧ 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; } ࢀߟDISPNJVN
[email protected]
8FC,JU4PVSDFDPSFIUNM)5.-.BSRVFF&MFNFOUDQQ
ShadowRoot Β Slot ཁૉΒ ݟ֮͑ͷ͋Δهड़͕ࢁʂ
ੜ͞ΕΔཁૉͷΠϝʔδ <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>
ࢥ͍͖ͬΓ Web Components
Chromium ͷ marquee ࣮ ૾ΑΓϞμϯͩͬͨ… • ෦࣮ Web Components ͩͬͨ…!!
• requestAnimationFrame ʹΑΔ࠶ඳըλΠϛϯάͷ࠷దԽ - ϧʔϓͱϒϥβͷ࠶ඳըλΠϛϯά͕Ұக • ֤ϧʔϓͰͷ࠲ඪ CSS ͷ transform ϓϩύςΟͰཧ͞Ε͍ͯͨ - ϨΠΞτͷ࠶ܭࢉ͕ى͖ͳ͍ ✨
·ͱΊ
͍ʹ͑͠ͷཁૉࢥ͍ͷ΄͔ Ϟμϯͳٕज़Ͱಈ࡞͍ͯͨ͠ • ShadowDOM ʹΑΔελΠϧͷӅṭ • requestAnimationFrame ʹΑΔΞχϝʔγϣϯͷ੍ޚ • will-change
ΛͬͨΞχϝʔγϣϯͷ࠷దԽ • transform/translate Λͬͨ࠲ඪҠಈ (ඳըෛՙ࠷దԽ) • ීஈͷ Web ϑϩϯτΤϯυ։ൃʹ௨͡Δٕज़Ͱ ߏ͞Ε͍ͯͨ • ͋͘·Ͱ Chromium ͷதͰͶ
ϒϥβͷ࣮Λ͘ͷ ҙ֎ͱָ͍͠!! • C++ ॻ͚ͳͯ͘ɺงғؾͰԿͱͳ͘ॻ͍ͯ͋Δ͜ͱ͕͔Δ • ίϝϯτͦͦ͜͜ॻ͔Ε͍ͯΔͷͰ • ΤσΟλΛ׆༻͢Δ -
$ ctags --languages=C++ ͰλάΛ࡞ͬͯ… - vim Ͱఆٛδϟϯϓͯ͠ιʔείʔυ㓢͢Δͱָ • ripgrep Έ͍ͨͳߴͳ grep ସπʔϧ༗༻ • https://cs.chromium.org ศར
ϒϥβ࣮ݟΔͷ ͜Ε͕ॳΊͯͰͨ͠… ޡΓͳͲ͋Γ·ͨ͠Βɺ༏͘͠ڭ͍͑ͯͨͩ ͚Δͱ͍Ͱ͢
͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠