タグ

ブックマーク / web.dev (3)

  • レンダリング ツリーの構築、レイアウト、ペイント  |  Articles  |  web.dev

    レンダリング ツリーの構築、レイアウト、ペイント コレクションでコンテンツを整理 必要に応じて、コンテンツの保存と分類を行います。 CSSOM ツリーと DOM ツリーを組み合わせてレンダリング ツリーを作成し、表示可能な各要素のレイアウトを計算し、画面にピクセルをレンダリングするペイント プロセスへの入力として使用します。これらの各ステップを最適化することは、最適なレンダリング パフォーマンスを実現するうえで重要です。 オブジェクト モデルの構築に関する前のセクションでは、HTMLCSS の入力に基づいて DOM ツリーと CSSOM ツリーを構築しました。ただし、どちらもドキュメントのさまざまな側面をキャプチャする独立したオブジェクトです。1 つはコンテンツを記述し、もう 1 つはドキュメントに適用する必要があるスタイルルールを記述します。この 2 つを統合して、ブラウザが画面上

  • HTTP/2 の概要  |  Articles  |  web.dev

    HTTP/2 の概要 コレクションでコンテンツを整理 必要に応じて、コンテンツの保存と分類を行います。 HTTP/2 は、めったにない組み合わせで、アプリケーションの速度、シンプルさ、堅牢性を高めます。これまでアプリケーション内で行っていた HTTP/1.1 の回避策の多くを元に戻し、トランスポート レイヤ自体でこれらの問題に対処できるようになります。さらに、アプリケーションを最適化してパフォーマンスを改善するまったく新しい機会も数多く生まれます。 HTTP/2 の主な目標は、リクエストとレスポンス全体の多重化を有効にしてレイテンシを短縮し、HTTP ヘッダー フィールドを効率的に圧縮することでプロトコルのオーバーヘッドを最小限に抑え、リクエストの優先順位付けとサーバー push のサポートを追加することです。これらの要件を実装するために、他のプロトコル機能強化(新しいフロー制御、エラー処

  • RAIL モデルでパフォーマンスを測定する  |  Articles  |  web.dev

    目標とガイドライン RAIL においては、「目標」と「ガイドライン」という用語には次のような特定の意味があります。 目標。ユーザー エクスペリエンスに関連する主要なパフォーマンス指標。たとえば、タップして 100 ミリ秒未満でペイントします。人間の認識は比較的一定であるため、これらの目標が近いうちに変更される可能性は低くなります。 ガイドライン。目標の達成に役立つ推奨事項。現在のハードウェアやネットワーク接続の状態に固有のものであるため、今後変更される可能性があります。 レスポンス: 50 ミリ秒未満でイベントを処理 目標: ユーザー入力によって開始される遷移を 100 ミリ秒以内に完了し、ユーザーが操作が瞬時にあると感じられるようにします。 ガイドライン: レスポンスが 100 ミリ秒以内に表示されるようにするには、ユーザー入力イベントを 50 ミリ秒以内に処理します。これは、ボタンのク

  • 1