たつのおとしごのしっぽ

技術に楽しくしがみつく えんじにあ の備忘録

Front-End Study #2「Performance Tuning in depth」を聞いた感想

イベント参加

はじめに

下記のイベントに参加したため感想をつらつら書きます。
Front-End Study #2「Performance Tuning in depth」 - connpass

どのセッションもレベルが高く楽しかったです。
Twitterでも沢山つぶやきがあって参考になるので、イベント時間帯の記録を下記URLにのこしておきます。
https://twitter.com/search?q=%23FEStudy%20since%3A2020-12-15_19%3A30%3A00_JST%20until%3A2020-12-15_22%3A00%3A00_JST&src=typed_query

セッション

メタ・パフォーマンスチューニング

メタ・パフォーマンスチューニング - Speaker Deck パフォーマンスチューニング について普段考える機会が少なかったので勉強になりました。
以前携わっていたテーマで開発終盤で起動が遅い目標に達していないということでミリ秒単位でもいいから起動早くなるように四苦八苦して色々大変だった記憶が蘇りました。

まず、Core Web Vitalsとは状態だったので簡単に調べてみました。

上記の基準などの説明の後にパフォーマンスを考慮することについて話がありました。

  • パフォーマンスは生き物で、ユーザー体験を向上させるために考えるもの
  • エンジニアがすべきこと
    • パフォーマンス 指標を可視化する
    • Reactだとデフォルトで入っている
  • UIが高度化して単純な尺度だけで足りないと感じたら自作も視野に入れる
  • パフォーマンス 改善を職人芸にしない
    • 知見を共有して文化にする

パフォーマンス 可視化ツールの紹介もありました。今後使ってみたいですね。

他にもTwitterで下記の話をされていました。

  • 手軽な方法としてGoogleのデベロッパーツールもパフォーマンス確認に使える
    • Peformanceタブからパフォーマンスを見る
    • MemoryタブでHeapdumpを取得してメモリリークが起きてそうかチェックする
    • Coverageタブから現在の表示には何%のJSが使われているかチェックする
  • 非同期読み込みの際はキャッシュ戦略が大事
  • パフォーマンス をあげるのは大変だから最初から設計は意識しておく
    • 時間が経ってからタグマネージャーでたくさん3rd party JSが入っていると改善するのは大変
  • 全てのページで一通りパフォーマンス 測定しないとパフォーマンス が下がったことに気付けない

パフォーマンスについて調べていて下記の記事は初学者にも分かりやすく説明されています。 Webページ描画までのクリティカルパスは何でどのように最適化すればよいか具体的に書かれています。
Web パフォーマンスのための HTML 最適化 | メルカリエンジニアリング

Webページ描画までのクリティカルパス

  • HTMLをロードする
    • URLに対してリクエストするとHTMLをサーバーが用意する
    • ブラウザはHTMLをダウンロードする
    • ブラウザはHTMLを上から評価していきDOMと呼ばれるオブジェクトモデルに変換する
    • SSRならばサーバーのソフトウェア内部から更にリクエストを実行してデータを取得する
  • サブリソースをロードする
    • HTMLの評価時にサブリソースへの参照がある度にリクエストし、サブリソースをロードする
    • CSS ファイルと JavaScript ファイルのロードは特に影響大
      • CSSは非同期でダウンロードしてCSSOMと呼ばれるオブジェクトモデルに変換する
      • JavaScriptは同期的にロードする。この間HTMLの評価がストップする
  • DOM と CSSOM を組み合わせてページを描画する
    • DOM と CSSOM を組み合わせてレンダーツリーと呼ばれるスタイル情報を持った DOM ノードのツリーを構築
    • レンダリングツリーが構築されると描画が開始する
    • レイアウト→ペイントの順に実行

Web フロントエンドのパフォーマンスと、WebAssembly。期待できることと、できないこと。

festudy02-wasm - Speaker Deck

そもそもWebAssemblyってなにというレベルだったので調べてみた。

  • WebAssemblyとは、ブラウザ上で動くバイナリコードの新しい仕様とのこと。WebAssemblyとは - Qiita
  • 資料上は、安全でポータブルなコンパイラターゲット、ソースコードをコンパイルして作るバイナリファイルと説明がありました。
  • WASMと略す。
  • 仕組みとしては
    • Goなどの言語からWASMでビルドする。
    • WASMモジュールからエキスポートされた関数をJSから呼び出して使うことができる。
  • 下記で試すことが可能

WebAssemblyとパフォーマンスに関する話についての話は

  • WASMは必ずJSより早い訳ではなく、パフォーマンスにばらつきがない(ブラウザごとに違いが少ないなど)とのこと
  • パフォーマンスという面で見るとWASMは最後の手段として使う。CPU由来のパフォーマンスをあげたいなど

高速なメディアを実現させるための戦略と戦術

frontend強いといえば日経のイメージありますね。