SSSSLIDE

Chrome の marquee 要素が
優秀だった話
2018-03-29 / Meguro.es #14
@wadackel

自己紹介
@wadackel / わだつよし
tsuyoshiwada
https://blog.wadackel.me
• Go で CHANGELOG ジェネレータ作ったり
• Storybook と Puppeteer でスクリーンショット撮ったり
• CyberAgent, Inc. で働いていたりします

まず始めにお断りですが…

人生
00000002 度目のLT
皆さんご存知の通り
marquee 要素は既に
廃止されているため
使わないようにしましょう 🙅
Welcome! 心から歓迎!

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>
参考: mozilla/gecko/layout/style/xbl-marquee/xbl-marquee.xml

いるだろう部分
<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>
setTimeout() を使って
</method>
_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>

_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>
要素の scrollTop, scrollLeft に
</method>
算出した座標値を指定している

素直な実装だが「カクカク」
するのも納得の内容
•
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);
}
参考: chromium/third_party/WebKit/Source/core/html/HTMLMarqueeElement.cpp

いるだろうコード部分
void HTMLMarqueeElement::start() {
if (continue_callback_request_id_)
return;
RequestAnimationFrameCallback* callback =
new RequestAnimationFrameCallback(this);
continue_callback_request_id_ = GetDocument().RequestAnimationFrame(callback);
}
requestAnimationFrame を
使ってるっぽい!!

各描画フレームの処理を
追ってみる
void HTMLMarqueeElement::ContinueAnimation() {
// ... 前処理 (長いので省略)

AnimationParameters parameters = GetAnimationParameters();
int scroll_delay = scrollDelay();
int scroll_amount = scrollAmount();
// ... 実際に座標を適用したりしてる (長いので省略)
}

各描画フレームの処理を
追ってみる
void HTMLMarqueeElement::ContinueAnimation() {
// ... 前処理 (長いので省略)

AnimationParameters parameters = GetAnimationParameters();
int scroll_delay = scrollDelay();
int scroll_amount = scrollAmount();
// ... 実際に座標を適用したりしてる (長いので省略)
}
何やらアニメーション用の
パラメータを作っている

AnimationParameters の
生成に迫る
HTMLMarqueeElement::GetAnimationParameters() {
AnimationParameters parameters;
Metrics metrics = GetMetrics();
// ... 長いため省略!!

parameters.transform_begin = CreateTransform(-metrics.content_width);
parameters.transform_end = CreateTransform(metrics.marquee_width);
}

AnimationParameters の
生成に迫る
HTMLMarqueeElement::GetAnimationParameters() {
AnimationParameters parameters;
Metrics metrics = GetMetrics();

parameters.transform_begin = CreateTransform(-metrics.content_width);
parameters.transform_end = CreateTransform(metrics.marquee_width);
}
Transform?? を作っているぽい

さらにさらに
CreateTransform に迫る
AtomicString HTMLMarqueeElement::CreateTransform(double value) const {
char axis = IsHorizontal() ? 'X' : 'Y';
return String::Format("translate%c(", axis) +
String::NumberToStringECMAScript(value) + "px)";
}

さらにさらに
CreateTransform に迫る
AtomicString HTMLMarqueeElement::CreateTransform(double value) const {
char axis = IsHorizontal() ? 'X' : 'Y';
return String::Format("translate%c(", axis) +
String::NumberToStringECMAScript(value) + "px)";
}
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;
}

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>
<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 も便利

ブラウザ実装見るのは
これが初めてでした…
誤りなどありましたら、優しく教えていただ
けると幸いです🙏

ご清聴ありがとうございました

SSSSLIDE

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

tsuyoshi wada さんの他のスライド

関連するスライド

このスライドの内容

関連するタグ

SSSSLIDE

SSSSLIDE

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

tsuyoshi wada さんの他のスライド

関連するスライド

このスライドの内容

関連するタグ

SSSSLIDE

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