AbemaTVのランタイムパフォーマンスのAudit - 1000ch.net

2016.05.17AbemaTVのランタイムパフォーマンスのAudit最近業務で、巷で話題のAbemaTVのパフォーマンス改善をしている。個別具体性が高いが調査改善の雰囲気を感じ取ってもらえればそれで良いかと思い、記事にした。 AbemaTVのフロントエンドの構成話の前提となるAbemaTVのフロントエンドの構成は次の通りで、まさに流行りのといった感じ。 facebook/reactfacebook/immutable-jsReactive-Extensions/RxJSreactjs/react-routercss-modules/css-modulesビルド周りはbabelとwebpack、あとはlintツールがちょこちょこ入ったりしている。この改善の話と関係してくるのは、ReactとImmutableJSとRxJSだけ。 番組再生画面のコメント開閉が重い今回ケーススタディとして挙げ

[mizchi]

ここでスライドメニューの opacityを0.8などにするとHTMLと動画のアルファブレンディングが走って重くなるんで楽しいですよ

[takaesu]

Reactなどを使ったパフォーマンス。chromeのdeveloper tools の使い方も参考になる

[Nyoho]

おおAbemaはReactバリバリなんじゃ

[kazuph1986]

このレベルでチューニングできるのか！！

[shiyakeita]

9msすごい

[otiai10]

“元々130msだったのが9msまで速くなった”

[tokada]

AbemaTVのランタイムパフォーマンスのAudit - https://t.co/ZfBNpGuLBU

[efcl]

`shouldComponentUpdate`で避けたいけど、setStateが何度も行われて不要な描画行われてるの見つけて修正する話

[tomo_e]

AbemaTVのランタイムパフォーマンスのAudit

[akameco]

全く関係ないけど広告が流れると必ずクラッシュする現象起きててつらい

[tumo300-500]

ブラウザ版あったのか!!

[raydive]

計測して改善。/けどコメント欄開いてコメントするのだるいよね……映像に被さるし。

[kujoo]

このチューニングは凄いし面白いけど、そもそもあのコメント欄のレイアウトどーなの？と思う・・・

[nunux]

AbemaTVのフロントエンドの構成 サイバーエージェント

[enya_r]

あそこ改善されんだ

[pochi-mk]

おお〜すげー

[yoiIT]

ＧＪ

[keita_moromizato]

あとでゆっくり読む

[uva]

フロントのチューニングこうやってやるんだ～

[digitalglm]

AbemaTVのランタイムパフォーマンスのAudit - https://t.co/G5WAiFUkFh: AbemaTVのランタイムパフォーマンスのAudit - https://t.co/G5WAiFUkFh

[kwhrtsk]

ReactのsetState()とImmutableJSのtoJS()が重い処理という話。そこよりReact+RxJSの辺りが気になる。Redux/Fluxは使ってないのかな。

[khei-fuji]

好評なサービスの裏側が見れるのは面白い。

[pirosikick]

問題発見のプロセスを細かく書いていているで、とても参考になる〜

[TokyoIncidents]

これだけ実践的なパフォーマンスチューニングノウハウは貴重なのでは

[joe-re]

react + rxjs、詳しい実装気になる

[nakajmg]

“AbemaTVのランタイムパフォーマンスのAudit”