ウェブサイトを開き、ロード順序は何であるか?HTMLとJSとCSSのか、それとも何をロードするには?

HTMLページがロードされ、解決プロセスされる:

1.ユーザーは(htmlページであると仮定し、最初の訪問です)URLを入力して、ブラウザがサーバへの要求は、サーバーが返すHTMLファイルを送信します。

2. HTMLブラウザは、<HEAD>タグ内の<link>タグ参照外部CSSファイルを見つけ、コードをロードするために開始します。

3.ブラウザは、サーバーは、CSSファイルを返し、CSSファイルへの要求を発行しました。

4.ページをレンダリングするために始めることができ、ブラウザは、HTMLの<body>セクション内のコードをロードし続け、およびCSSファイルが手に持っています。

ブラウザは、サーバーのコードを<img>タグの参照画像要求を見ています。この場合、ブラウザは画像がダウンロードされるまで待機しますが、コードの後ろをレンダリングするために続行されません。

画像は、段落配置の背面に影響を与え、一定の面積を占めているため、ブラウザが戻ってこのコードの一部を再描画する必要がある6.イメージファイルサーバへの戻りに、。

7.ブラウザは<SCRIPT>タグは、JavaScriptコードの行が含まれ、それはすぐに実行されました。

この文の8. JavaScriptのスクリプトの実行、それは<スタイル>(style.display =「なしのコード内で非表示にするには、ブラウザに指示 」)。カップは、ああ、突然以下の要素ので、ブラウザは、コードの再描画この部分にあります。

最後に</ HTML>すぐに、ブラウザの涙......まで9

10というように、ビット「スキン」ボタンのユーザ・インタフェース・ポイントを終了していない、Javascriptが<リンク>一瞬のブラウザを可能にCSSのパスのラベル。

11.ブラウザはあなたのすべてを召集の<div>の<span> <UL > <LI> 誰が「パックにみんなパック、我々は最初からやり直ししなければならない......」、ブラウザがページを再レンダリング、サーバーへの新しいCSSファイルを要求します。
関連:
まず、ブラウザの負荷とHTMLをレンダリングするために、

上から下へ1. IEのダウンロードのためには、同時に行われ、ダウンロードやレンダリング、上から下へ順にレンダリングされます。

2.ページの特定の部分にレンダリング、彼らのダウンロードの上記されている部分の全てが完了した(すべての関連する要素がダウンロードされていると言うことではありません)。

あなたが解釈セマンティックファイルに埋め込まれたタグ(JSスクリプト、CSSスタイル)を発生した場合は3、その後、ダウンロードプロセスの時間は別個の接続をダウンロードしてIEを可能にします。

ダウンロードが完了し4.スタイルシートの後に、それが解析され、すべてのスタイルシートは、以前、一緒にダウンロードされた解析が完了した後、再レンダリング(前にレンダリングを含む)すべての要素を持っています。

後に定義された機能が正面をカバーするための関数を定義した場合5. JS、CSSを再定義しました。

二、JS負荷

1ない並列ダウンロードと解析(ブロッキング・ダウンロード)。

2.ブラウザはJS要求は、要求の帰りを待っているだろう送信したときにJSを引用した場合。ブラウザが安定したDOMツリー構造を必要とし、JSコードを持っている可能性があるため、直接LOCATION.HREFでもジャンプ直接にブラウザを使用して、このようにdocument.writeかのappendChildを使用して、DOMツリー構造を変更しますJSは、DOMツリーを変更防ぐため、あなたはそれが他のダウンロードおよびレンダリングをブロックしますので、状況のDOMツリーを再構築する必要があります。

第三には、どのようにHTMLページ読み込み速度高速化する

:1.ページの減量を

Aがあまりにも脂肪ページの読み込み速度に影響を与える最も重要な要因です。

B。不必要なスペース、およびコメントを削除します。

C。インラインスクリプトやCSSを外部ファイルに移動しました。

D。あなたが失う重量にHTMLにHTML Tidyのを使用することができ、あなたはまた、JavaScriptに失う重量にいくつかの圧縮ツールを使用することができます。

2.ファイルの数を減らします。

。ページファイルへの参照の数を減らすためにHTTP接続の数を減らすことができます。

B。のJavaScriptの多くは、CSSファイルは、最良の合併をマージすることができます。

3.ドメイン名のクエリを削減:

。ドメイン名はとても良く、異なるドメイン名を使用し、外部のJavaScript、CSS、画像やその他のリソースへの参照を減らすために、DNSクエリと解決時間がかかります。

4.データ・キャッシュの再利用:

データキャッシュの再利用。

5.最適化ページ要素のロード順:

Aは、最初のページが最初にコンテンツと関連するJavaScriptとCSSを表示するロードした後、最初は非常に太っていないリソースは、画像、フラッシュ、ビデオディスプレイに関連するもののようなHTMLに関連するものを、ロードします。それが最後にロードされます。

6.インラインのJavaScriptの数を減らす:

。Aブラウザのパーサは、インラインJavaScriptの大きなオーバーヘッドを使用して、JavaScriptのページ構造が変更されますインライン仮定します。

B。方法は、この内容を出力する()document.writeを使用しないでください、現代のW3CのDOMメソッドを使用することは、現代のブラウザでページのコンテンツに対処します。

現代のCSSや合法的なラベルの7.:

な現代CSS +テキストの使用など、現代的なCSSと画像の使用を削減するラベルは、テキストのみの画像の一部を置き換えることができます。

B。、このようなHTMLブラウザを解析するなど、「エラー訂正」操作を行うことを避けるために、正当なラベルを使用し、また失うの重量にHTML HTML Tidyのであってよいです。

8.チャンクコンテンツ:

。ネストされたテーブル、および非ネストされたテーブルやdiv要素を使用しないでください。テーブルは、それらがすべての表示内容の完成ローディングになるまで、これによりページ全体(又は大テーブル)まで待機する必要がなくなり、小さな複数にバルクネストされたレイアウトテーブルに基づいています。

9.画像やテーブルのサイズを指定します

。画像やテーブルのサイズはすぐに、それはすぐにページを表示することができないと仕事のレイアウト構成の一部を再実行する場合はAのブラウザが判断することができます。

B。これは、ページの表示を高速化するだけでなく、ページの終了ローディングレイアウトを変更するには、いくつかの不適切を防ぐことができないだけ。

高さと幅を使用して、C。画像。 

https://zhidao.baidu.com/question/426714311168151572.html

おすすめ

転載: www.cnblogs.com/isme-zjh/p/12030746.html