首先從一次完整的的請求說起：（以此為例get,www,baidu.com）

1，webbrower 發出request，

2，然后解析www.baidu.com為ip,找到ip的服務器，

3，服務器處理請求資源并返回請求的內容，

4，browser接受請求內容過程，（返回內容是按順序讀取的）

4.1遇到外聯css，就會并發去讀取css內容（），

4.2遇到圖片時，回去并發讀取圖片，目前瀏覽器的并發數為2，

4.3遇到js時則會阻塞其他請求。

4.4加載完css后，browse開始渲染頁面，

4.5直到加載完頁面中的文本資源，這時dom的結構已經確定，會觸發 document.ready方法

4.6 browse繼續加載 圖片和js，完成后。頁面就全部加載完成，這時會觸發 window.onload()方法

?

來分析一下里面具體的時間開銷：

1，從1--4.4 用戶才開始看到頁面上有內容，在這以前頁面就是空白的

2，解析域名也是有一定時間開銷的，如果是大機房的可以通過路由配置 dns 緩存，依賴于外部機房環境，可控性比較小。 ?

3，這是服務器處理的時間，優化程序代碼可以減少這里的時間

?? 4，

4.1瀏覽器在接收完css之前，一般是不去渲染dom的，以避免無所謂的刷新和閃爍。所以直到4.4用戶才真正在頁面上看到內容。

4.2 瀏覽器的單域名并發訪問數?為2，多域名下并發數沒限制，可以通過定義域名別名改善

4.3 瀏覽器加載js時會阻塞其他請求，直到加載完成。改善的話可以把js放到頁面下面去加載。

?

從上面的流程可以分析出以下建議：

1，減少連接數（原因：并發限制，dns開銷）

2，將css放到 head中。（1,首先這符合w3c規范，2,應為css加載完后，遇到dom對象時就會直接顯示，可以更快的顯示頁面。）

3，將js放到頁面底部，（加載js時會阻塞其他請求，這段時間頁面沒有反映，如果js中沒有write的話應該放到底部，頁面渲染完后再加載js）

4，減少下載內容（網絡是有速度限制的，內容越少當然加載越快）

?

針對上面4條建議給出具體做法：

1，使用 css sprite將小圖片合并，合并css、js。使用瀏覽器緩存： cache-control、expires。不使用etag

2、3不用說了，上面已經解釋清楚了。

4，采用gzip壓縮，可以使用 jsmin 將js精簡，使用工具將css，html精簡，盡可能縮減圖片。

按照 性能黃金法則 說明： 文本內容只占所有時間的10%-20%, 這樣做以后 至少能將時間縮小40%-50%。能明顯改善用戶體驗。

?

這只是一些建議參考，具體的需要你針對自己的網站進行分析，分析工具可以使用firedebug,yslow，（這兩個可以集成）

yslow會直接給出你建議。

轉自：http://www.iteye.com/topic/1010833

轉載于:https://www.cnblogs.com/xpengfee/p/4581304.html

總結

以上是生活随笔為你收集整理的【转】WEB前端调优的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。