HTMLページの読み込みとパース処理の詳細

ブラウザがhtmlを読み込んでレンダリングする順番
1. IEは上から順にダウンロードし、上から順にレンダリングし、ダウンロードとレンダリングは同時に行われます。
2. ページの一部がレンダリングされるまでに、その上のすべての部分がダウンロードされている（関連するすべての要素がダウンロードされているわけではない）。
3. セマンティックタグの埋め込みファイル（JSスクリプト、CSSスタイル）が発生した場合、IEのダウンロード処理では、ダウンロードのための個別のリンクが有効になります。
4. ダウンロードが完了すると、以前にダウンロードしたすべてのスタイルシートとともに解析され、解析が完了すると、以前にレンダリングしたすべての要素（以前にレンダリングしたものを含む）が再びレンダリングされます。
5. 5. JSやCSSで再定義があった場合、後に定義された機能が前に定義された機能をオーバーライドします。
JSの読み込み
1. ダウンロードとパースを並行して行うことができません（ダウンロードがブロックされます）。
2. JSが参照された場合、ブラウザはJSリクエストを送信し、リクエストの返事を待つ。ブラウザは安定したDOMツリー構造を必要とし、高い確率でJSの
のコードが直接 DOM ツリー構造を変更する場合、例えば document.write や appendChild を使用したり、あるいはジャンプのために location.href を直接使用する場合、ブラウザは JS 修復を防ごうとしています。 {ブラウザはJSの修正を防ごうとしています。
{Document.write や appendChild を使用したり、あるいは直接 location.href を使用してジャンプするなど、DOM ツリー構造への JS 修正を防止しようとしています。
JS が DOM ツリーを変更して再構築するのを防ぐため、他のダウンロードやレンダリングをブロックするためです。
HTMLページの読み込みを高速化する方法
1.ページの減量。
a. ページの太さは、読み込み速度に影響を与える最も重要な要素です。
b. 不要なスペース、コメントを削除する。
c. インラインのスクリプトとCSSを外部ファイルに移動する。
d. HTML Tidyを使ってHTMLの減量ができますし、いくつかの圧縮ツールを使ってJavaScriptの減量もできます。
2. ファイル数を減らす。
a. ページで参照されるファイルの数を減らすことで、HTTPコネクションの数を減らすことができます。
b. 多くのJavaScriptとCSSのファイルはマージすることができ、人々がJavaScript.functionsとPrototype.jsを1つのbase.jsファイルにマージしたように、マージすることがベストです。
3.ドメイン名のクエリーを減らす。
a. DNSクエリやドメイン名の解決も時間がかかるので、JavaScript、CSS、画像などの外部リソースの参照を減らす。異なるドメイン名の使用は少ないほどよい。
4. 再利用されるデータをキャッシュする。
a. Cache reused data.
5. Optimize page element loading order.
a. Load the content initially displayed on the page and the JavaScript and CSS associated with it first, then load the HTML related stuff, like what is not initially displayed related to images, flash, videos and other very fat resources are loaded last.
6. Reduce the amount of inline JavaScript by.
a. The browser parser assumes that inline JavaScript changes the page structure, so using inline JavaScript has a higher overhead.
b. Instead of using document.write(), which outputs content, use modern W3C DOM methods to process page content for modern browsers.
7. Use modern CSS and legal tags.
a. Use modern CSS to reduce tags and images, e.g. using modern CSS + text can completely replace some text-only images.
b. Use legal tags to avoid browser "error correction" when parsing HTML, and HTML Tidy to lose weight in HTML.
8. Chunk your content.
/a. Do not use nested tables, but non-nested tables or divs. a. Instead of using nested tables, use non-nested tables or divs. break up the layout of a large nested table into multiple smaller tables so that you don't have to wait until the entire page (or large table) is loaded before displaying it.
9. Specify the size of images and tables.
a. If the browser can immediately determine the size of the image or table, then it can display the page immediately without having to do some layout rearrangement work.
b. This not only speeds up the display of the page, but also prevents some improper changes to the layout after the page has finished loading.
c. The image uses height and width.
HTML page loading and parsing flow
1. The user enters a URL (assuming it is an html page and it is the first visit), the browser sends a request to the server, and the server returns the html file.
2. The browser starts loading the html code and finds a tag inside the tag that references an external CSS file.
3. 浏览器又发出CSS文件的请求，服务器返回这个CSS文件。
4. 浏览器继续载入html中部分的代码，并且CSS文件已经拿到手了，可以开始渲染页面了。
5. 浏览器在代码中发现一个 标签引用了一张图片，向服务器发出请求。 此时浏览器不会等到图片下载完，而是继续渲染后面的代码。
6. 服务器返回图片文件，由于图片占用了一定面积，影响了后面段落的排布，因此浏览器需要回过头来重新渲染这部分代码。
7. 浏览器发现了一个包含一行Javascript代码的