👍 しかし、content-visibility はランタイムのパフォーマンスのみに影響しますので、ローカル環境での数値でも同じようなコンテンツであれば、おおよそプロダクション環境と同じ改善を確認できると考えられます。
18要素の数に応じて番組ごとのセルの方が紫色の帯の数が増えており、各番組表conetnt-visilibity を付与した要素ごとにレンダリング処理が走っている様子が分かります。
そのような方はまずは番組表を確認するのがおすすめ。
🤟 content-visibility プロパティを付与する要素の選定 content-visibility を付与するにあたって２つのパターンを検討しました。 指標 番組欄 チャンネル欄 TTI s 10. 各番組のセル• content-visibilityを適用する前 content-visibilityを適用した後 まとめ ABEMA の番組表における content-visibility を用いた改善例をご紹介しました。
paint: プロパティを付与した要素の子要素がプロパティを付与した要素を越えて表示されない ここでは各制約の列挙に留めますが、CSS Containment の詳しい解説や分かりやすい解説が次の記事にありますのでこちらを参照ください。
ABEMA には、各日付ごと、各チャンネルごとにどの時間帯にどの番組が放送されているかを確認できる 機能が存在します。
✆ 2020年4月に変更。
7「テレビ」では「番組表」に沿った配信を行っています。 今回も実装を始める前に他のブラウザの状況を調査しました。
CSS Containment には以下の４つの種類の制約が存在します。
🤟 content-visibility を適用したことで、特にロースペックなユーザーに対して TBT が大きく改善されることにより、 TTI の改善が確認できました。 家庭用テレビとほとんど操作に変わりなく、ザッピングしながら見たい番組を探すという手も。 CSS Containment とは、ブラウザに要素が満たす制約をブラウザに伝えることにより、それに応じたレンダリングの最適化を可能にする という CSS プロパティです。
3縦や横にコンテンツが長く画面外に表示されていない要素が存在し、その要素の大きさが予測可能である時には検討の価値がありそうです。
無料で視聴できるのは、リアルタイム視聴する「テレビ」のすべての番組、一部無料化されたABEMAビデオとなります。
☯ スマートフォンアプリ版ではできません。 以下のキャプチャは、同じコンテンツをレンダリングしている部分のフレームチャートを表しています。 番組の合間にはCMが流れます。
18有料ビデオはに登録すると視聴することができます。
便利な「チャンネル別」番組表 PCブラウザ版のみに搭載された便利な機能のひとつが、「チャンネル別番組表」です。
🤪 各番組のセルにおけるフレームチャート 各チャンネルのカラムにおけるフレームチャート 各番組表の場合は、要素の数は多いが本当に必要な要素のみを表示するケースであり、チャンネル欄の方は縦方向の表示されていない部分も表示されてしまうケースです。
15仮想スクロールの実装が難しい場合でも、CSS プロパティを指定するだけで同じような効果を手に入れることができるというのは魅力的なのではないでしょうか？• 結果としては、 の改善や、特に CPU のパフォーマンスが良くない環境において明らかに動作の滑らかさの違いがあることが確認できました。
目的の番組がある場合は、まず検索しましょう。