360フロントエンドスタープログラム-フロントエンドパフォーマンスを一緒に最適化（Rao Zhanping）

パフォーマンスを最適化する理由 サイトおよびアプリケーションのパフォーマンスのボトルネックことがわかった、のユーザーエクスペリエンス向上の
パフォーマンスを最適化する方法を？次に説明します。

1. RAILモデルを使用してパフォーマンスを評価する

1.1レール

ユーザー中心のパフォーマンスモデル。各ネットワークアプリケーションには宣言サイクルに関連する4つの側面があり、これらの側面はさまざまな方法でパフォーマンスに影響を与えます。

遅延とユーザー応答：

1.2応答：50msでイベントを処理する

• 目標：100ms以内にユーザー入力に応答する
• ガイダンス
  -ユーザー入力イベントを50ミリ秒以内に
  処理して、100ミリ秒以内にユーザーの視覚的応答のフィードバックを確実にします- 高価なタスクのタスク処理を個別にするか、それらをワーカープロセスに入れて、ユーザーの相互作用に影響を与えないようにします
  -イベントを50ミリ秒以上処理する操作は常にフィードバックを提供する（進捗状況と活動の指標）

1.3アニメーション：フレームあたり10ミリ秒

• 目標：10ミリ秒（1000ミリ秒/ 60フレーム-6ミリ秒（レンダリングされたフレームバジェット））以下の時間でフレームを生成し、ビジョンがスムーズであること
• ガイダンス：アニメーションのプレッシャーが高いポイントでは、ロジックを処理しないようにしてください。アニメーションの種類（スクロール、ビジュアルアニメーション、ドラッグアニメーション）

1.4アイドル時間の最大化

• 目標：アイドル時間を最大化して、ページがユーザーの入力に100ミリ秒以内に応答する可能性を高める
• ガイダンス：アイドル時間を使用して据え置き作業を完了します。アイドル時間中はユーザーの操作が最も優先されます。

1.5読み込み：5秒でインタラクティブコンテンツを表示する

• 目的：最初の画面の読み込みから5秒以内にインタラクティブコンテンツを表示し、最初の画面以外の読み込みから2秒以内に読み込みます
• 案内
  • ユーザーの一般的に使用される機器とネットワーク接続のパフォーマンスをテストする
  • 重要なレンダリングパスを最適化してレンダリングのブロックを解除する
  • プログレッシブレンダリングを開始し、バックグラウンドでいくつかの作業を実行します
  • 読み込みパフォーマンスに影響する要素：ネットワーク速度、ハードウェア（CPU）、JavaScriptの解析

1.6主要指標のまとめ

• 応答：100ms以内にユーザー入力に応答する
• アニメーション：アニメーションまたはスクロールすると、フレームが10msで生成されます
• アイドル時間：メインスレッドのアイドル時間を最大化
• 読み込み：1000ミリ秒以内にインタラクティブコンテンツを表示する
• ユーザー中心

2.パフォーマンスを評価するためのツール

• 灯台
• WebPageTest
• Chrome DevTools

3.実際の戦闘

3.1ブラウザのレンダリングプロセス

• JavaScript（アニメーションの実装、domの操作など）
• スタイル（HTMLとCSSをレンダーツリーに結合）
• レイアウト（出力ボックスモデル、正確な位置とサイズ）
• ペイント（ラスタライズ、表示）
• コンポジット（レンダーレイヤーマージ）

3.2ブラウザレンダリングシーン：

ウェブサイト：csstriggers.com

3.3パフォーマンス最適化の方向

• 読み込み中
  • リソース効率の最適化
  • 画像の最適化
  • フォントの最適化
  • クリティカルレンダリングパスの最適化
• レンダリング
  • JavaScript実行の最適化
  • 大規模で複雑なレイアウトを避ける
  • レンダーレイヤーマージ