ブラウザでウェブサイトがどのようにレンダリングするには？
HTML自体は最初のDOMツリー、HTMLにレンダリングされますが、実際には最初の要求の後にWebサイトから来ている、リクエストが来て、HTML自体、その後で、ブラウザが文字ストリームを取ることです、文字ストリームに1つのバイトを転送します字句解析の後、それぞれのトークンの構文解析は、例えば、ヘッダ・トークン、トークン変換タグ異なるため、その後追記DOMトークンタイプによってツリーに、に対応します。
CSSは再びリンクトークンタグの後に遭遇し、その後、要求CSSに、リクエストの解析上、CSSOMを生成して、DOMツリーはツリーは、このようなツリーをレンダリングレンダリング形成するために結合されます。そして、レイアウトとレンダリング。
出会いのスクリプトタグ、その後、JSは、V8エンジンのブラウザのパースに戻って要求します、JS-関連のWebリソースを依頼します
HTMLレンダリングプロセスの一部の機能
1、実行の順序
彼は第一の特徴は、実行順序であるので、全体のhtmlの下解析、タグ対応状況に字句解析、トップを使用する機能ですので。字句解析では、タグの構文解析するために、上から下へ、上から下への文書、パースのhtmlへの道である、多くの場合、詰まりを判定する。
2、同時負荷
CSSの多くを導入することが私たちのHTMLは、WebリソースのJS、ブラウザでこれらのWebリソースには、ポイントを最適化する必要が同時実行の程度が同時ロードプロセスは、当社のブラウザドメインの制限によって支配されていることである同時ロード、です。これは、単一のドメインの制限が防ぐ3-4 CDNドメインを設定します
3、ブロックされています
まず、負荷がJS、CSSの負荷をブロックするかどうか、負荷JS JS実行がブロックされ、負荷CSSは、ページのレンダリングをブロックするかどうか。
その後、頭の中で双方向リンクによって導入されたCSSは、彼はページのレンダリングをブロックします。それは、この完成積載CSSのレンダリング後まで待つことです。分析後、この時間はスタイルで完了するので、要求がヘッド内部のCSSであることが推奨されます
道によるCSSのリンク、CSSはスタイルがJSに影響するため、JS、CSSが完成していない負荷が問題になる可能性がある場合jsの実行は、いくつかのCSSのプロパティにCSSを依存し、実行をブロックします、ページのレンダリングをブロックします。しかし、事前にWebKitのスキャナが実際に存在するため、CSSのロード外部スクリプトをブロックしていない、彼はロードのプロセスを停止しませんので、バックの言葉をプリスキャンすることができますが、実装のプロセスを停止します。
JSは、jsの実行が変更されたDOMノードに影響しますので、直接、ページのレンダリングを阻止導入、それはノード作成の後ろにブロックされます。また、これは論理的です。
4、依存関係
状況の効率を改善するために、正しい依存関係を確認するために、どのようにフォローする依存関係が存在する場合、HTML、レンダリングプロセス。例えば、いくつかのケースではHTMLが出ていますが、ないスタイルがありません、そして、突然、スタイルの外に光りました。この状況は、依存関係を次のCSSや他のページ内のheadタグの一般的なCSSがうまくロードされます、生成されたCSSOM、その後、レンダリングされていない、問題CSSの点滅で、この時間は発生しません。時にはjsが、この時間は依存JSを放棄することで、JSの依存関係に焦点を当てるために、この時間の必要性を非同期に追加されます
ページのレンダリングは、CSSの負荷に依存しています
の実行のJS依存順序
依存関係のためのJSのロジックは、DOMノードは、いくつかのJSのDOMノードを取得する必要があります
5、導入方法
例えば、リンクの導入、またはインポートの導入は、双方の違いは何ですか。などのようなタグとしてJS、のために動的に導入しました。
ダイレクトレンダリングの導入は、ページをブロックします
延期、ページのレンダリングをブロックしていないが、延期時間に、すべての木が完成し、DOMを構築してきました。注文の実装を延期
違いは延期、それはバックエンドサービス、最初の実行で開始し、実行の順序を保証するものではありませんとの非同期は、レンダリングは、ページをブロックしません
非同期ダイナミックのJS、必要に応じて、新しいJSファイルの動的な導入、スパは非常に広範な単一ページのページの紹介
これらの特性に基づいて、我々は、最適化されたポイントを見つけることができます
1、CSSスタイルシートのトップ
図2に示すように、代わりにインポートのリンクと、インポートが底部に書き込まれ、内部CSSのインポートを参照して、このように導入されたときは、CSS良くありません
3、CSSとJSとJSを区別していない最後のjsのスクリプトセット、同時要求は、一番上に書いたCSSに影響しますので、ページの下部に配置されたページの独立したjsファイルをレンダリング、JSにより、レンダリング、CSS時に、ロードされました
4、非同期ローディング容量JS、最適化ロードして実行JSの使用の合理化
リアル
1は、同時ロードの数がキャップされ、CSSの原因の遅延を置い混合し、CSSのjsが、JSので、下に反対し、ページをフラッシュにつながります
2、CSS配置ヘッダは、レンダリングは一歩をレンダリング保証するように、ページスタイルの遷移を配置し、DOMをリロードページ、CSS完成ローディングを、ブロックされました
図3は、CSSはバックブロックせずに同時負荷をJSが、JSの実行をブロックします。JSは、ヘッダ内に配置した場合、それは、HTMLのレンダリングをブロックします。
4は、JSをヘッダに配置され、非同期、ディファー入れました。
非同期は、最初に実行するには、保証工事DOMブックの完了後に再実行していない人に戻ってくるために、実行の順序を保証するものではありません、ページのレンダリングをブロックしません。
延期DOMツリー構造が完了した後に再実行を保証するために、注文の履行を確保するため、ページのレンダリングをブロックしません。
インポートリンク体操@ 5、
@import二つの主要な欠陥、それは同時実行をサポートしていない最初のポイントがあります。彼は、インポート秒をインポートするために行くことを望んでいるの後、彼は同時サポートしていません。
第二に、彼はすべての後に、ページ全体の完成読み込み、コードの中に行く前に、インポートの実装を必要とします。
しかし,,,この二つの大きな欠点は、以前に存在していたかもしれないが、効果のリンクがまったく同じであると今これらの2つの問題は、されていません。彼はモジュラーCSSに適しています。しかし、別のCSSファイルで@importのみファイルの後にロードされたCSSの@importの内側に行く前に、同時サポートしていませんが、ロードされたCSSとなっています