瀏覽器加載和渲染html的順序
- 用戶輸入網址（假設是個 HTML 頁面，并且是第一次訪問），瀏覽器向服務器發出請求，服務器返回 HTML 文件；
- 瀏覽器開始載入 HTML 代碼，發現 <head> 標簽內有一個 <link> 標簽引用外部 CSS 文件；
- 瀏覽器又發出 CSS 文件的請求，服務器返回這個 CSS 文件；
- 瀏覽器繼續載入 HTML 中 <body> 部分的代碼，并且 CSS 文件已經拿到手了，可以開始渲染頁面了；
- 瀏覽器在代碼中發現一個 < img > 標簽引用了一張圖片，向服務器發出請求。此時瀏覽器不會等到圖片下載完，而是繼續渲染后面的代碼；
- 服務器返回圖片文件，由于圖片占用了一定面積，影響了后面段落的排布，因此瀏覽器需要回過頭來重新渲染這部分代碼；
- 瀏覽器發現了一個包含一行 JavaScript 代碼的 <script> 標簽，趕快運行它；
- JavaScript 腳本執行了這條語句，它命令瀏覽器隱藏掉代碼中的某個 <div>（style.display=”none”）。杯具啊，突然就少了這么一個元素，瀏覽器不得不重新渲染這部分代碼；
- 終于等到了 </html> 的到來，瀏覽器淚流滿面……
- 等等，還沒完，用戶點了一下界面中的“換膚”按鈕，JavaScript 讓瀏覽器換了一下 <link> 標簽的 CSS 路徑；
- 瀏覽器召集了在座的各位 < div><span>< ul>< li> 們，“大伙兒收拾收拾行李，咱得重新來過……”，瀏覽器向服務器請求了新的CSS文件，重新渲染頁面。
各個步驟的加載渲染時間，可以通過各個瀏覽器的插件跟蹤到，例如IE的 httpwatch、火狐的firebug等等。
如何加快HTML頁面加載速度
- 頁面減肥
a. 頁面的肥瘦是影響加載速度最重要的因素。
b. 刪除不必要的空格、注釋。
c. 將inline的script和css移到外部文件。
d. 可以使用HTML Tidy來給HTML減肥，還可以使用一些壓縮工具來給JavaScript減肥。 - 減少文件數量或壓縮文件
a. 減少頁面上引用的文件數量可以減少HTTP連接數。
b. 許多JavaScript、CSS文件可以合并最好合并，人家財幫子都把自己的JavaScript. functions和Prototype.js合并到一個base.js文件里去了。
c. 壓縮JavaScript和Css； - 減少域名查詢
a. DNS查詢和解析域名也是消耗時間的，所以要減少對外部JavaScript、CSS、圖片等資源的引用，不同域名的使用越少越好。 - 緩存重用數據
a. 對重復使用的數據進行緩存。 - 優化頁面元素加載順序
a. 首先加載頁面最初顯示的內容和與之相關的JavaScript和CSS，然后加載HTML相關的東西，像什么不是最初顯示相關的圖片、flash、視頻等很肥的資源就最后加載。 - 減少inline JavaScript的數量
a. 瀏覽器parser會假設inline JavaScript會改變頁面結構，所以使用inline JavaScript開銷較大。
b. 不要使用document.write()這種輸出內容的方法，使用現代W3C DOM方法來為現代瀏覽器處理頁面內容。 - 使用現代CSS和合法的標簽
a. 使用現代CSS來減少標簽和圖像，例如使用現代CSS+文字完全可以替代一些只有文字的圖片。
b. 使用合法的標簽避免瀏覽器解析HTML時做“error correction”等操作，還可以被HTML Tidy來給HTML減肥。 - Chunk your content
a. 不要使用嵌套table，而使用非嵌套table或者div。將基于大塊嵌套的table的layout分解成多個小table，這樣就不需要等到整個頁面（或大table）內容全部加載完才顯示。 - 指定圖像和table的大小
a. 如果瀏覽器可以立即決定圖像或table的大小，那么它就可以馬上顯示頁面而不要重新做一些布局安排的工作。
b. 這不僅加快了頁面的顯示，也預防了頁面完成加載后布局的一些不當的改變。
c. image使用height和width。 - 使用內容分發網絡（Content Delivery Network CDN）
- 把CSS文件放在頁面頂部，而JS文件放在底部
把CSS文件在頁面頂部引入可以禁止逐步渲染，節省瀏覽器加載和重繪頁面元素的資源。JavaScript是用于功能和驗證。把JS文件放在頁面底部可以避免代碼執行前的等待時間，從而提升頁面加載速度。
這些都是一些減少頁面加載時間和提高轉換率的方法。在某些情況下，需要JavaScript在頁面的頂部加載（如某些第三方跟蹤腳本）。 - 使用 CSS Sprites 整合圖像
多圖像的網站加載時間比較久。其中一個解決方法就是把多個圖像整合到少數幾個輸出文件中。你可以使用 CSS Sprites 來整合圖像文件。這樣就減少了在下載其他資源時的往返次數和延遲，從而提高了站點的速度。 - 啟用GZIP壓縮
在服務器上壓縮網站的頁面是提升網站訪問速度非常有效的一種方法。你可以用gzip壓縮做到這一點。Gzip是一個減小發送給訪客的HTML文件、 JS和CSS體積的工具。壓縮的文件減少了HTTP響應時間。據Yahoo報道，這大概可以減少70%的下載時間。而目前90%的通過瀏覽器的流量都支持 Gzip壓縮，因此，這是一個提示網站性能有效的選項。 - 圖片格式優化
png為無損格式，適合精準的按鈕圖標；在網頁中需要瀏覽大圖時，采用jpg壓縮格式，能夠大大節省流量。 - 延遲加載和執行非必要腳本
網頁中有很多腳本是在頁面完全加載完前都不需要執行的，可以延遲加載和執行非必要腳本。這些腳本可以在onload事件之后執行，避免對網頁上重要內容的呈現造成影響。這些腳本可能是你自己網頁的甲苯，往往更多的是一些第三方腳本，這樣的有很多，比如評論、廣告、智能推薦、百度云圖、分享等等，這些完全可以等主體內容加載完后再執行。 - 使用 Progressive JPEGs
ProgressiveJPEGs圖片是JPEG格式的一個特殊變種，名為“高級JPEG”。在創建高級JPEG文件時，數據是這樣安排的：在裝入圖像時，開始只顯示一個模糊的圖像，隨著數據的裝入，圖像逐步變得清晰。它相當于交織的GIF格式的圖片。高級JPEG主要是考慮到使用調制解調器的慢速網絡而設計的，快速網絡的使用者通常不會體會到它和正常JPEG格式圖片的區別。對于網速比較慢的用戶，這無疑有很好的體驗。 - 延遲顯示可見區域外的內容
為了確保用戶可以更快地看見可見區域的網頁可以延遲加載或展現可見區域外的內容，為了避免頁面變形，可以使用占位符標簽制定正確的高度和寬度。比如WP的jQueryImage LazyLoad插件就可以在用戶停留在第一屏的時候，不加載任何第一屏以下的圖片信息，只有當用戶把鼠標往下滾動的時候，這些圖片才開始加載。這樣很明顯提升可見區域的加載速度，提高用戶體驗。
