HTML解析原理の説明

標準的なWebフロントエンドエンジニアが知っておくべき◎ブラウザ（または対応するプレーヤー）のレンダリング/再描画原理

これはもっと頑張らなければなりません。あまり明確に説明できなかったので、ただG-edしただけですが、結果があまり出なかったので、書き留めました。 。 。

以下の部分は、handawei-javaeye のブログからのものです:

Web ページはさまざまなブラウザーで実行されます。ブラウザーのページの読み込みとレンダリングの速度は、ユーザー エクスペリエンスに直接影響します。
簡単に言えば、ページのレンダリングはブラウザーで HTML コードを表示するプロセスです。 CSS で定義されたルールに従ってブラウザ ウィンドウを表示します。まず、ブラウザがどのように機能するかを一般的に理解しましょう:
1. ユーザーが URL を入力し (HTML ページであり、初めてアクセスすると仮定します)、ブラウザはサーバーにリクエストを送信し、サーバーはHTML ファイルを返します。 2. ブラウザは HTML コードの読み込みを開始し、

タグ内に外部 CSS ファイルを参照するタグがあることを確認します。
4. ブラウザは HTML の 部分のコードを読み込み続け、CSS ファイルが取得され、ページのレンダリングを開始できます。
5. ブラウザは画像を参照するコード内で タグを見つけ、それをサーバー ask に送信します。このとき、ブラウザは画像がダウンロードされるまで待機せず、次のコードのレンダリングを続行します。
6. サーバーは画像ファイルを返します。画像は一定の領域を占めるため、後続の段落の配置に影響します。そのため、ブラウザはコードのこの部分に戻って再レンダリングする必要があります。
7. ブラウザは、JavaScript コードの行を含む <script> タグを見つけて、すぐに実行します。 <br/> 8. JavaScript スクリプトがこのステートメントを実行します。これは、コードの特定の部分 <div> を非表示にするようにブラウザに指示します (style.display=”none”)。おっと、突然そのような要素が欠落し、ブラウザはコードのこの部分を再レンダリングする必要があります。 <br/> 9. 最後に の到着を待ったところ、ブラウザは突然泣き出しました... <br/> 10.待って、まだ完了していないので、ユーザーがインターフェースの「スキン変更」ボタンをクリックすると、JavaScript がブラウザーに <link> タグの CSS パスを変更するように要求しました。 ;span>&lt ;ul><li>「みんな荷物をまとめて、最初からやり直さなければなりません...」と、ブラウザはサーバーに新しい CSS ファイルをリクエストし、ページを再レンダリングしました。 <br/><br/> <br/><br/> <p> ブラウザは毎日このように行ったり来たりして実行されており、人によって書かれた HTML と CSS コードの品質にはばらつきがあり、実行中にある日突然クラッシュする可能性があることを知っておく必要があります。幸いなことに、この世界にはページ再構築エンジニアのグループがまだ存在しており、彼らは通常、ビジュアル デザイナーが画像を切り取ったり、言葉を変更したりするのを手伝うだけです。 <p>ページが遅いのはなぜですか?これは、特に特定の部分がわずかに変更されてレイアウトに影響を与えていることが判明した場合に、ブラウザーがレンダリングに時間と労力を費やすため、専門家はこのロールバック プロセスをリフローと呼んでいます。 <p><p> リフローはほぼ避けられない。ツリー状のディレクトリの折りたたみや展開 (基本的には要素の表示と非表示) など、現在インターフェースでよく使用されている効果の一部は、ブラウザーのリフローを引き起こします。マウスのスライド、クリック... これらのアクションにより、ページ上の特定の要素の領域、位置、余白、その他の属性が変更される限り、ページ内、ページの周囲、さらにはページ全体の再レンダリングが発生します。通常、ブラウザがコードのどの部分をリフローするかを予測することはできません。それらはすべて相互に影響を及ぼします。 <p style="max-width:90%"><img src="/static/imghw/default1.png" data-src="https://img.php.cn//upload/image/963/493/887/1488959472280777.jpg" class="lazy" title="HTML解析原理の説明" alt="HTML解析原理の説明" style="max-width:90%" style="max-width:90%"/><p> リフロー問題を最適化し、不要なリフローを最小限に抑えることができます。たとえば、冒頭の例の <img src="/static/imghw/default1.png" data-src="https://img.php.cn//upload/image/435/481/759/1488959491648314.jpg" class="lazy" alt="HTML解析原理の説明" > 画像読み込みの問題は、実際には画像の幅と高さを設定するだけで回避できるリフローです。このようにして、ブラウザは画像のフットプリントを認識し、画像をロードする前にスペースを予約します。 <p style="max-width:90%"><img src="/static/imghw/default1.png" data-src="https://img.php.cn//upload/image/435/481/759/1488959491648314.jpg" class="lazy" title="HTML解析原理の説明" alt="HTML解析原理の説明" style="max-width:90%" style="max-width:90%"/>また、リフローと似た言葉にリペイントという言葉があり、中国語ではリドローといいます。要素の周囲や内部のレイアウトに影響を与えずに、要素の背景色、テキストの色、境界線の色などを変更するだけの場合、ブラウザは再描画されるだけです。再描画の速度はリフローよりも大幅に高速です (IE では、用語を変更する必要があります。リフローは再描画よりも遅いです)。次回は、一連の実験を使用して、Firefox や IE などのブラウザーでのリフローの最適化を説明します。 <p><p></script>

以上がHTML解析原理の説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。