ブラウザがWebページをレンダリングする各ステップの仕組みを理解しましょう！

私の考え: 高速で信頼性の高い Web サイトを構築したい場合は、ブラウザーが Web ページをレンダリングする各ステップのメカニズムをよく理解し、各ステップを実行できるようにする必要があります。開発プロセスの最適化のステップ。この記事は、エンドツーエンドのプロセスについて私が学んだことを高レベルでまとめたものです。

さて、早速始めましょう。このプロセスは次の主な段階に分けることができます:

1. HTML の解析を開始します

2. 外部リソースを取得します

3. CSS を解析し、CSSOM

# を構築します##4. JavaScript を実行

##5. DOM と CSSOM を結合してレンダリング ツリーを構築

##6. レイアウトと描画を計算

##1. HTML の解析を開始

#ブラウザがネットワーク経由でページの

HTML

データを受信すると、すぐにパーサーをセットアップして

HTML

を ドキュメント オブジェクト モデル (DOM) に変換します。 ドキュメント オブジェクト モデル (DOM) は、HTML および XML ドキュメントのプログラミング インターフェイスです。これは、文書の構造化された表現を提供し、プログラムから構造にアクセスして文書の構造、スタイル、コンテンツを変更する方法を定義します。 DOM はドキュメントを解析して、ノードとオブジェクト (プロパティとメソッドを含むオブジェクト) の構造化されたコレクションを作成します。簡単に言えば、Web ページをスクリプトまたはプログラミング言語に接続します。 解析プロセスの最初のステップは、HTML を

開始タグ

、

終了タグ、および

その コンテンツ タグ##に分解して表現することです。 # を選択すると、DOM を構築できます。 2. 外部リソースの取得

パーサーは外部リソース (CSS または JavaScript ファイルなど) を検出すると、これらのファイルを抽出します。 CSS ファイルの読み込み中もパーサーは実行を継続するため、リソースが読み込まれて解析されるまでページは表示されません (これについては後ほど説明します)。

JavaScript ファイルは少し異なります。デフォルトでは、パーサーは JS ファイルをロードし、HTML の解析をブロックしながらそれを解析します。この状況を軽減するには、

defer

と

async

という 2 つの属性をスクリプト タグに追加できます。どちらも JavaScript ファイルがバックグラウンドで読み込まれている間、パーサーを実行し続けることができますが、その方法が異なります。詳細については後ほど説明しますが、要約すると、

defer は、ドキュメントの解析が完了するまでファイルの実行が遅延されることを意味します。複数のファイルに defer

属性がある場合、ページが配置された順序で順次実行されます。

<script></script>

async は、ファイルがロード直後に実行されることを意味しますが、解析プロセス中または解析プロセス後に実行される可能性があるため、非同期スクリプトの実行順序は保証されません。

<script></script>

リソースのプリロード

<link>

要素

preload

の

rel 属性の属性値により、次のことが可能になります。 HTML ページの

要素内に宣言的なリソース取得リクエストを記述します。これにより、ページが読み込まれた直後にどのリソースが必要になるかを示すことができます。 すぐに必要なリソースについては、ページ読み込みの ライフ サイクルの早い段階でリソースの取得を開始し、ブラウザのメインのレンダリング メカニズムが介入する前にプリロードすることをお勧めします。このメカニズムにより、リソースがより早く読み込まれて利用可能になり、ページの初期レンダリングがブロックされる可能性が低くなり、パフォーマンスが向上します。 <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">&lt;link&gt;</pre><div class="contentsignin">ログイン後にコピー</div></div>

3. CSS を解析して CSSOM を構築する

DOM については長い間知っていたかもしれませんが、

CSSOM ( CSS オブジェクト モデル)十分に聞いていないかもしれませんが、とにかく数回聞いたことがありません。

CSS オブジェクト モデル (CSSOM) は、すべての CSS セレクターと、ツリーのルート ノード、兄弟、子孫、子、その他の関係を含むツリー形式の各セレクターの関連プロパティのマップです。 CSSOM はドキュメント オブジェクト モデル (DOM) に非常に似ています。どちらも重要なレンダリング パスの一部であり、Web サイトを適切にレンダリングするために実行する必要がある一連の手順です。

CSSOM は DOM と連携して

レンダリング ツリー を構築し、ブラウザはこれを使用して Web ページのレイアウトと描画を行います。

HTML ファイルや DOM と同様、CSS ファイルが読み込まれるときは、解析してツリー (今回は

CSSOM) に変換する必要があります。ページ上のすべての CSS セレクター、その階層、プロパティについて説明します。

CSSOM

は、段階的に構築できないという点で DOM と異なります。

CSS

ルールはその特殊性により個別に変更できるためです。 カバーするポイントが異なります。お互い。 これが、CSS がレンダリングをブロックする理由です。 すべての CSS が解析され、CSSOM が構築されるまで、ブラウザーは各要素が画面上のどこにあるかを知る方法がないからです。

4.执行JavaScript

不同的浏览器有不同的 JS 引擎来执行此任务。从计算机资源的角度来看，解析 JS 可能是一个昂贵的过程，比其他类型的资源更昂贵，因此优化它对于获得良好的性能是如此重要。

载入事件

加载的JS和DOM被完全解析并准备就绪后就会 emit document.DOMContentLoaded事件。 对于需要访问DOM的任何脚本，例如以某种方式进行操作或侦听用户交互事件，优良作法是在执行脚本之前先等待此事件。

document.addEventListener('DOMContentLoaded', (event) => {
    // 这里面可以安全地访问DOM了
});

在所有其他内容（例如异步JavaScript，图像等）完成加载后，将触发window.load事件。

window.addEventListener('load', (event) => {
    // 页面现已完全加载
});

5.合并DOM和CSSOM 构建渲染树

渲染树是DOM和CSSOM的组合，表示将要渲染到页面上的所有内容。 这并不一定意味着渲染树中的所有节点都将在视觉上呈现，例如，将包含opacity: 0或visibility: hidden的样式的节点，并仍然可以被屏幕阅读器等读取，而display: none不包括任何内容。 此外，诸如之类的不包含任何视觉信息的标签将始终被忽略。

与 JS 引擎一样，不同的浏览器具有不同的渲染引擎。

6. 计算布局和绘制

现在我们有了完整的渲染树，浏览器知道了要渲染什么，但是不知道在哪里渲染。 因此，必须计算页面的布局（即每个节点的位置和大小）。 渲染引擎从顶部开始一直向下遍历渲染树，计算应显示每个节点的坐标。

完成之后，最后一步是获取布局信息并将像素绘制到屏幕上。

原文地址：https://dev.to/jstarmx/how-the-browser-renders-a-web-page-1ahc

作者：James Starkie

译文地址：https://segmentfault.com/a/1190000037650883

更多编程相关知识，请访问：编程学习课程！！

以上がブラウザがWebページをレンダリングする各ステップの仕組みを理解しましょう！の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。