目錄
減少HTTP請求
合并檔案
雪碧/精靈圖
內嵌圖片
減少DNS查詢
避免頁面多次跳轉（重定向）
快取AJAX
延遲加載（懶加載）
提前加載（首屏加載）
無條件提前加載
有條件加載
有預期的的加載
根據域名劃分內容
減少iframe數量
避免404
減少HTTP請求
合并檔案
很多現成的庫可以幫你將多個腳本檔案合并成一個檔案，將多個樣式表檔案捆合并一個檔案，以此來減少檔案的下載次數，
雪碧/精靈圖
合并圖片，并通過坐標決定顯示哪張圖片，
內嵌圖片
通過編碼的字串將圖片內嵌到網頁文本中，
.sample-inline-png {
padding-left: 20px;
background: white url('data:image/png;base64,iVBORw0KGgoAA
AANSUhEUgAAABAAAAAQAQMAAAAlPW0iAAAABlBMVEUAAAD///+l2Z/dAAAAM0l
EQVR4nGP4/5/h/1+G/58ZDrAz3D/McH8yw83NDDeNGe4Ug9C9zwz3gVLMDA/A6
P9/AFGGFyjOXZtQAAAAAElFTkSuQmCC') no-repeat scroll left top;
}減少DNS查詢
DNS查詢也消耗回應時間，如果我們的網頁內容來自各個不同的domain (比如嵌入了開放廣告，參考了外部圖片或腳本)，那么客戶端首次決議這些domain也需要消耗一定的時間，DNS查詢結果快取在本地系統和瀏覽器中一段時間，所以DNS查詢一般是對首次訪問回應速度有所影響，
避免頁面多次跳轉（重定向）
當客戶端收到服務器的跳轉回復時，客戶端再次根據服務器回復中的location指定的地址再次發送請求，例如以下跳轉回復，
HTTP/1.1 301 Moved Permanently Location: http://example.com/newuri
當客戶端遇到這種回復的時候，用戶只能等待客戶端再次發送請求，有的網站甚至會一直跳n次，跳到他想帶你去的地方…當然在這個時候用戶看不到任何頁面內容，只有瀏覽器的進度條一直在重繪
快取AJAX
Ajax可以幫助我們異步的下載網頁內容，但是有些網頁內容即使是異步的，用戶還是在等待它的回傳結果，例如ajax的回傳是用戶聯系人的下拉串列，所以我們還是要注意盡量應用以下規則提高ajax的回應速度，
- 添加Expires 或 Cache-Control報文頭使回復可以被客戶端快取
- 壓碩訓復內容
- 減少dns查詢
- 精簡javascript
- 避免跳轉
- 配置Etags
延遲加載（懶加載）
實作懶加載（滾屏加載），知道我們的網頁最初加載需要的最小內容集（按需加載）是什么，剩下的內容就可以推到延遲加載的集合中，Javascript是典型的可以延遲加載內容，
提前加載（首屏加載）
實作首屏加載，
無條件提前加載
當前網頁加載完成后，馬上去下載一些其他的內容，例如google會在頁面加載成功之后馬上去下載一個所有結果中會用到的image sprite，
有條件加載
根據用戶的輸入推斷需要加載的內容，雅虎的示例是search.yahoo.com，
有預期的的加載
這種情況一般發生在網頁重新設計時，由于用戶經常訪問舊網頁，本地對舊的網頁內容快取充分從而顯得舊網頁速度很快，而新的網頁內容卻沒有快取，設計者可以在舊網頁的內容中預先加載一些新網頁中可能用到的內容，這樣新的網頁就會生下來一些需要下載的資源，
根據域名劃分內容
瀏覽器一般對同一個域的下載連接數有所限制，按照域名劃分下載內容可以瀏覽器增大并行下載連接，但是注意控制域名使用在2-4個之間，不然dns查詢也是個問題，
一般網站規劃會將靜態資源放在類似于static.example.com，動態內容放在www.example.com上，這樣做還有一個好處是可以在靜態的域名上避免使用cookie，后面我們會在cookie的規則中提到，
減少iframe數量
使用iframe要注意理解iframe的優缺點
優點
- 可以用來加載速度較慢的內容，例如廣告，
- 安全沙箱保護，瀏覽器會對iframe中的內容進行安全控制，
- 腳本可以并行下載
缺點
- 即使iframe內容為空也消耗加載時間
- 會阻止頁面加載
- 沒有語意
避免404
404我們都不陌生，代表服務器沒有找到資源，我們要特別要注意404的情況不要在我們提供的網頁資源上，客戶端發送一個請求但是服務器卻回傳一個無用的結果，時間浪費掉了，
更糟糕的是我們網頁中需要加載一個外部腳本，結果回傳一個404，不僅阻塞了其他腳本下載，下載回來的內容(404)客戶端還會將其當成Javascript去決議，
轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/301916.html
標籤：其他
下一篇：vue安裝+部署到nginx中