フロントエンドの

パフォーマンスチューニング

〜レンダリング編〜

2018-05-30

Monthly Hygge #4 at Kurashicom Inc.

Ryuta Hamasaki

@avosalmon

今日話すこと

  1. 表示速度におけるフロントエンドの重要性(復習)
  2. レンダリングの超概要
  3. レンダリング処理の計測

1. 表示速度における

フロントエンドの重要性

Webページの速度は

フロントエンドが一番重要

  • サーバーは最初のHTMLを配信しているだけ
  • HTMLを起点としたサブリソースへのリクエストがほとんどを占める

Webコンテンツのリッチ化

  • ページ当たりの画像ファイル数の増加
  • 動画も増えてきている
  • JSのロジックも増える
  • 放っておくだけで表示速度は確実に遅くなる

Webフロントエンド上の3要因

  • ネットワーク処理
    • 各種リソースのダウンロード
  • レンダリング処理 ← 今日はここ
    • HTML, CSSに基いて要素を表示
  • スクリプト処理
    • JSによる処理

2. レンダリングの超概要

レンダリングとは

ブラウザがHTMLを解析して

画面に表示すること

レンダリングの構成要素

  • スクリプト処理
    • JSでDOMを操作
  • スタイルの評価
    • CSSのスタイルをDOMに適用
  • レイアウトの算出
    • 各DOM要素の位置関係を決定
  • ペイント
    • ディスプレイに表示

FPS

(Frames Per Second)

画面が1秒間に何回更新されるか

FPSの目標値

  • テレビ: 30FPS
  • Web: 60FPSを目指す(ディスプレイの限界値)

  → 1回の画面更新 = 16.7msec

2. レンダリング処理の計測

計測ツール

Chrome DevToolsのPerformanceパネル

スライドはここまで

Thank You!

Made with Slides.com