face 31減少http請求

減少http請求

為什麼要減少http請求

效能的黃金法則，只有10%-20%的終端使用者響應時間花在接受請求的html文件上，剩下的80%-90%時間花在html文件所引用的所有元件(圖片，script,css,flash等等)進行的http請求上

如何改善

改善響應時間的最簡單途徑就是減少元件的數量，並由此減少 http請求的數量

http連結產生的開銷

域名解析-tcp連結-傳送請求-等待-下載資源-解析時間

dns快取是有，但是查詢dns快取也需要時間，多個快取就要查詢多次 同時還有可能快取會被清除

http1.1協議規定請求只能序列傳送，也就是說一百個請求必須一次逐個傳送，前面的一個請求完成才能開始下個請求

減少http的方式

圖片地圖

圖片地圖允許你在一個圖片上關聯多個url,目標url的選擇取決於使用者點選了圖片上的那個位置，就是圖片合併 以位置資訊定位超連結

把http請求減少為一個，可以保證設計的完整性和功能的齊全性

<img  usermap="#map1">

<map name="map1"><area shape="rect" coords="0,0,31,31" href="javascript:alert('home')" ></area></map>

css sprites 比圖片地圖 簡單一些

css sprites [css精靈],通過使用合併圖片，通過指定，css的backgroud-image和backgroud-position來顯示元素

x,y定點陣圖片位置

合併指令碼和樣式表

使用外部的js和css檔案引用的方式，因為這要比直接寫在頁面中效能要好一點

獨立的一個js比用多個js檔案組成的頁面載入要快38%

把多個指令碼合併成一個指令碼 把多個樣式表合併為一個樣式表

圖片使用 base64編碼減少頁面請求數--頁面會變大寫

採用 base64的編碼方式將圖片直接嵌入到網頁中，而不是從外部載入