HTML頁面加載和解析流程介紹

時間 2019-11-10

標籤 html 頁面加載解析流程介紹欄目 HTML 简体版

原文原文鏈接

1.瀏覽器加載和渲染html的順序css

    1.一、IE下載的順序是從上到下，渲染的順序也是從上到下，下載和渲染是同時進行的。
    1.二、在渲染到頁面的某一部分時，其上面的全部部分都已經下載完成（並非說全部相關聯的元素都已經下載完）
    1.三、若是遇到語義解釋性的標籤嵌入文件（JS腳本，CSS樣式），那麼此時IE的下載過程會啓用單獨鏈接進行下載。
    1.四、而且在下載後進行解析，解析過程當中，中止頁面全部往下元素的下載。阻塞加載
    1.五、樣式表在下載完成後，將和之前下載的全部樣式表一塊兒進行解析，解析完成後，將對此前全部元素（含之前已經渲染的）從新進行渲染。
    1.六、JS、CSS中若有重定義，後定義函數將覆蓋前定義函數html

2. JS的加載java

2.一、不能並行下載和解析（阻塞下載）瀏覽器

2.2 、當引用了JS的時候，瀏覽器發送1個js request就會一直等待該request的返回。由於瀏覽器須要1個穩定的DOM樹結構，而JS中頗有可能有代碼直接改變了DOM樹結構，好比使用 document.write 或 appendChild,甚至是直接使用的location.href進行跳轉，瀏覽器爲了防止出現JS修改DOM樹，須要從新構建DOM樹的狀況，因此就會阻塞其餘的下載和呈現.緩存

3.如何加快HTML頁面加載速度服務器

3.一、頁面減肥app

a. 頁面的肥瘦是影響加載速度最重要的因素。

b. 刪除沒必要要的空格、註釋。

c. 將inline的script和css移到外部文件。

d. 可使用HTML Tidy來給HTML減肥，還可使用一些壓縮工具來給JavaScript減肥。ide

3.二、減小文件數量：

a. 減小頁面上引用的文件數量能夠減小HTTP鏈接數。

b. 許多JavaScript、CSS文件能夠合併最好合並，不少網站都把本身的JavaScript. functions和Prototype.js合併到一個base.js文件裏去了。函數

3.三、減小域名查詢：

a. DNS查詢和解析域名也是消耗時間的，因此要減小對外部JavaScript、CSS、圖片等資源的引用，不一樣域名的使用越少越好。工具

3.四、緩存重用數據：

a. 對重複使用的數據進行緩存。

3.五、優化頁面元素加載順序：

a. 首先加載頁面最初顯示的內容和與之相關的JavaScript和CSS，而後加載HTML相關的東西，像什麼不是最初顯示相關的圖片、flash、視頻等很肥的資源就最後加載。

3.六、減小inline JavaScript的數量：

a. 瀏覽器parser會假設inline JavaScript會改變頁面結構，因此使用inline JavaScript開銷較大。

b. 不要使用document.write()這種輸出內容的方法，使用現代W3C DOM方法來爲現代瀏覽器處理頁面內容。

3.七、使用現代CSS和合法的標籤：

a. 使用現代CSS來減小標籤和圖像，例如使用現代CSS+文字徹底能夠替代一些只有文字的圖片。

b. 使用合法的標籤避免瀏覽器解析HTML時作「error correction」等操做，還能夠被HTML Tidy來給HTML減肥。
3.八、 Chunk your content：

a. 不要使用嵌套table

<table>
  <table>
    <table>
      ..
    <table>
  <table>
<table>

而使用非嵌套table或者div，將基於大塊嵌套的table的layout分解成多個小table

<table>...</table>
<table>...</table>
<table>...</table>

這樣就不須要等到整個頁面（或大table）內容所有加載完才顯示。

3.九、指定圖像和table的大小：

a. 若是瀏覽器能夠當即決定圖像或table的大小，那麼它就能夠立刻顯示頁面而不要從新作一些佈局安排的工做。

b. 這不只加快了頁面的顯示，也預防了頁面完成加載後佈局的一些不當的改變。

c. image使用height和width。

3.十、根據不一樣瀏覽器選擇不一樣策略

3.十一、頁面結構例子

· HTML

    · HEAD

        · LINK ...
        CSS files required for page appearance. Minimize the number of files for performance while keeping unrelated CSS in separate files for maintenance.

        · SCRIPT. ...
        JavaScript. files for functions required during the loading of the page, but not any DHTML that can only run after page loads.
        Minimize the number of files for performance while keeping unrelated JavaScript. in separate files for maintenance.

    · BODY
    · User visible page content in small chunks (tables / divs) that can be displayed without waiting for the full page to download.

        · SCRIPT. ...
        Any scripts which will be used to perform. DHTML. DHTML script. typically can only run after the page has completely loaded and all necessary objects have been initialized. There is no need to load these scripts before the page content. That only slows down the initial appearance of the page load.
        Minimize the number of files for performance while keeping unrelated JavaScript. in separate files for maintenance.
        If any images are used for rollover effects, you should preload them here after the page content has downloaded.

4.HTML頁面加載和解析流程
    4.1. 用戶輸入網址（假設是個html頁面，而且是第一次訪問），瀏覽器向服務器發出請求，服務器返回html文件。

    4.2. 瀏覽器開始載入html代碼，發現<head>標籤內有一個<link>標籤引用外部CSS文件。

    4.3. 瀏覽器又發出CSS文件的請求，服務器返回這個CSS文件。

    4.4. 瀏覽器繼續載入html中<body>部分的代碼，而且CSS文件已經拿到手了，能夠開始渲染頁面了。

    4.5. 瀏覽器在代碼中發現一個<img>標籤引用了一張圖片，向服務器發出請求。此時瀏覽器不會等到圖片下載完，而是繼續渲染後面的代碼。

    4.6. 服務器返回圖片文件，因爲圖片佔用了必定面積，影響了後面段落的排布，所以瀏覽器須要回過頭來從新渲染這部分代碼。

    4.7. 瀏覽器發現了一個包含一行Javascript代碼的<script>標籤，趕快運行它。

4.8. Javascript腳本執行了這條語句，它命令瀏覽器隱藏掉代碼中的某個<style>（style.display=」none」）。忽然就少了這麼一個元素，瀏覽器不得不從新渲染這部分代碼。

    4.9. 終於等到了</html>的到來

    4.10. 等等，還沒完，用戶點了一下界面中的「換膚」按鈕，Javascript讓瀏覽器換了一下＜link＞標籤的CSS路徑。

    4.11. 瀏覽器召集了在座的各位<div><span><ul><li>們，「大夥兒收拾收拾行李，咱得從新來過……」，瀏覽器向服務器請求了新的CSS文件，從新渲染頁面。

5.Yahoo對網頁設計性能的建議，我的感受是說得很是好的。
英文版：http://developer.yahoo.com/performance/rules.html
中文翻譯：http://www.cnblogs.com/smjack/archive/2009/02/24/1396895.html

5.參考
http://hideto.javaeye.com/blog/133384
http://blog.chinaacc.com/liuzhantao/blog/20100430-3015241029081.html

http://renyongjie668.blog.163.com/blog/static/1600531201097062789/