CSSウェブページのパフォーマンスの最適化におけるCSSの読み込み、分析、およびアプリケーション:重要なテーマ
CSSの読み込み、分析、およびアプリケーションは、Webパフォーマンスの最適化の重要なリンクです。このプロセスを理解することは、ページの読み込み時間を最適化し、ユーザーエクスペリエンスを改善するために不可欠です。以下では、CSSの分析とレンダリングを検討して、DOMをブロックし、その背後にあるメカニズムをブロックします。
css負荷とドム解析
dom parsing
DOM(ドキュメントオブジェクトモデル)分析とは、受信したHTMLバイトフローをDOMツリーに変換するブラウザのプロセスを指します。
HTMLドキュメントの分析中、パーサーが非ブロッキングリソース(非同期スクリプトなど)に遭遇すると、リソースの並列をダウンロードし、同時にドキュメントを解析し続けようとします。 -
- CSSはDOM分析をブロックしますか?
CSS自体はDOM分析をブロックしません。言い換えれば、ブラウザは引き続きHTMLを分析し、DOMツリーを構築します。
ただし、CSSはdomレンダリングとJavaScriptの実行をブロックします。これは、DOMツリーを構築できるが、ブラウザは関連するCSS(つまり、CSSOMツリー)を分析する前にレンダリング操作を実行しないことを意味します。これは、ページが画面に正しく表示されていることを確認して、再配置と再塗装を避けるためです。
-
ブラウザがHTMLを分析してDOMツリーを生成すると、CSSファイルを並行してダウンロードし、CSSOM(CSSオブジェクトモデル)の構築を開始します。 DOMとCSSOMの構築は同時に発生します。つまり、CSSのダウンロードと分析はDOMの構築をブロックしません。 -
cssomの木とレンダリング
cssom tree
CSSOM(CSSオブジェクトモデル)は、DOMに並行してページ上のすべてのCSS情報を含むデータ構造です。ブラウザはそれを使用してレンダリングツリーを構築します。
ブラウザが
タグまたは- タグに遭遇すると、レンダリングを停止し、CSSの負荷と解析を優先し、CSSOMツリーを構築します。
-
レンダリングツリーの構造
<link></link>
<style>
レンダリングツリーは、DOMツリーとCSSOMツリーの組み合わせの結果です。つまり、ブラウザがレンダリングされます。
レンダリングツリーにはすべてのDOM要素のスタイル情報が必要であるため、
CSSOMツリーが完成する前に、レンダリングツリーを構築することはできません。
なぜCSSはJavaScriptをロードするのですか?
正確なスタイルの計算を確認してください- :JavaScriptがCSSが完全にロードされていないときにDOMを変更しようとするか、スタイルを計算しようとする場合、JavaScriptによって取得されたスタイル情報は不正確である可能性があります。これを回避するために、ブラウザは、すべての関連するCSSがJavaScriptの実行前にロードおよび分析されることを保証し、DOM要素の最終スタイルのスクリプト検索を行います。
再配置を避け、再塗装
:CSSOMが不完全なときにJavaScriptが実行されることを許可されている場合、不完全なスタイル情報に基づいてDOMを変更する可能性があります。 CSSOMが完了すると、ブラウザはレンダリング効率を大幅に低下させるために、レンダリングされた要素を復元して再描画する必要がある場合があります。 -
分析順序への依存性:HTML解析中、ブラウザが
タグに遭遇すると、すぐにCSSのロードを開始します。タグ(no- または属性)に遭遇すると、スクリプトを実行するためにDOMの解析を停止します。 CSSが完全にロードされていない場合、スクリプトの実行は不完全なスタイル情報に依存する場合があります。したがって、CSSOMの準備が整う前に、ブラウザはスクリプトを待っています。
<link href="..." rel="stylesheet"></link>
<script>
JavaScriptにCSSを書くと、DOMレンダリングがブロックされますか? async
defer
JavaScriptでCSSスタイルを書くかどうかは、アプリケーション方法とスタイルの時間に応じてDOMレンダリングをブロックします。これには、ブラウザのレンダリングプロセス、特にJavaScript、CSS、およびDOMの関係が含まれます。詳細に説明しましょう:
要素スタイルを直接変更します
JavaScriptのDOM要素の
属性(たとえば、
)を変更することにより、CSSスタイルが直接適用される場合、そのような操作は通常、DOM分析をブロックしません。ただし、ブラウザがスタイルを再計算し、復活と再塗装をトリガーする必要があるため、レンダリングプロセスをブロックする場合があります。
レストラン
:要素のサイズ、構造、または特定の属性が発生する場合、ブラウザは位置とサイズを再計算する必要があります。 style
element.style.color = 'red';
draw
:要素の視覚的な外観(色や境界など)が変更されますが、そのサイズや構造に影響しない場合、これはブラウザが要素を再ドローすることを示します。
以上がCSSは解析とレンダリングをブロックしますか?詳細な分析の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。