瀏覽器加載網頁的順序

時間 2019-11-18

標籤瀏覽器加載網頁順序欄目瀏覽器简体版

原文原文鏈接

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

1. 用戶輸入網址（假設是個 HTML 頁面，而且是第一次訪問），瀏覽器向服務器發出請求，服務器返回 HTML 文件；html

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

3. 瀏覽器又發出 CSS 文件的請求，服務器返回這個 CSS 文件；緩存

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

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

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

7. 瀏覽器發現了一個包含一行 JavaScript 代碼的 <script> 標籤，趕快運行它；優化

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

9. 終於等到了 </html> 的到來，瀏覽器淚流滿面……pwa

10. 等等，還沒完，用戶點了一下界面中的「換膚」按鈕，JavaScript 讓瀏覽器換了一下 <link> 標籤的 CSS 路徑；

11. 瀏覽器召集了在座的各位 <div><span><ul><li> 們，「大夥兒收拾收拾行李，咱得從新來過……」，瀏覽器向服務器請求了新的CSS文件，從新渲染頁面。瀏覽器天天就這麼來來回回跑着，要知道不一樣的人寫出來的 HTML 和 CSS 代碼質量良莠不齊，說不定哪天跑着跑着就掛掉了。好在這個世界還有這麼一羣人——頁面重構工程師，平時挺不起眼，也就幫視覺設計師們切切圖啊改改字，其實背地裏仍是幹了很多實事的。

各個步驟的加載渲染時間，能夠經過各個瀏覽器的插件跟蹤到，例如IE的 httpwatch、火狐的firebug等等。

2、如何加快HTML頁面加載速度

1. 頁面減肥

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

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

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

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

2. 減小文件數量

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

b. 許多JavaScript、CSS文件能夠合併最好合並，人家財幫子都把本身的JavaScript. functions和Prototype.js合併到一個base.js文件裏去了。

3. 減小域名查詢

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