web前端優化方法

目前，網路BS模式應用發展越來越多，越來越廣泛，包括網站系統、OA平台的開發等，那麼如何做好、做得出色，為使用者帶來很好的體驗呢？以下跟大家分享Web前端優化的經驗，這些經驗都是工作實務中較實用的技術 
　　1、盡量減少HTTP請求個數－須權衡 

　　合併圖片（如css sprites，內建圖片使用資料） 、合併CSS、JS，這一點很重要，但是要考慮合併後的文件體積。 

　　2、為檔案頭指定Expires或Cache-Control，使內容具有快取性。 

　　區分靜態內容和動態內容，避免日後頁面存取中不必要的HTTP請求。

　　3、避免空的src和href 

　　留意具有這兩個屬性的標籤如link，script，img，iframe等； 

　　4、使用gzipipp.體積 

　　5、把CSS放到頂部 

　　實現頁面有秩序地加載，這對於擁有較多內容的頁面和網速較慢的用戶來說更為重要，同時，HTML規範清楚指出樣式表要放包含在頁面的區域內； 

　　6、把JS放到底部 

　　HTTP/1.1 規範建議，瀏覽器每個主機名的平行下載內容在於不超過兩個，而問題腳本阻止了頁面的平行下載，即使是主機名稱不相同 

　　7、避免使用CSS表達式 

　　頁顯示和縮放，滾動、甚至移動滑鼠時，CSS表達式的計算頻率是我們要注意的。可以考慮一次性的表達式或使用事件句柄來取代CSS表達式。 

　　8、將CSS和JS放到外部檔案中 

　　我們需要權衡內建程式碼帶來的HTTP請求減少與透過使用外部檔案進行快取帶來的好處的折中點。 

　　9、精簡CSS和JS 

　　目的就是減少下載的檔案體積，可考慮壓縮工具JSMin和YUI Compressor。 

　　10、剔除重複的JS和CSS 

　　重複呼叫腳本，除了增加額外的HTTP請求外，多次運算也會浪費時間。在IE和Firefox中不管腳本是否可緩存，它們都存在重複運算JavaScript的問題。 

　　11、使AJAX可緩存 

　　利用時間戳，更精巧的實現回應可快取與伺服器資料同步更新。

　　12、儘早刷新輸出緩衝 

　　尤其對於css，js檔案的並行下載更有意義 

　　13、使用GET來完成AJAX請求項走”的過程：先發送文件頭，然後才發送資料。在url小於2K時使用GET取得資料時更有意義。 

　　14、延遲載入 

　　確定頁面運作正常後，再載入腳本來實現如拖放和動畫，或是隱藏部分的內容以及摺疊內容等。 

　　15、預載 

　　關注下無條件加載，有條件加載和有預期的加載。

　　16、盡量減少iframe的個數 

　　考慮即使內容為空，加載也需要時間，會阻止頁面加載，沒有語義，注意iframe相對於其他DOM元素高出1-2個數量級的開銷，它會在典型方式下阻塞onload事件，IE和Firefox中主頁面樣式表會阻塞它的下載。

　　17、避免404 

　　HTTP請求時間消耗是很大的，有些站點把404錯誤響應頁面改為“你是不是要找*”，這雖然改進了用戶體驗但是同樣也會浪費服務器資源（如資料庫等）。 

　　18、減少Cookie的大小 

　　去除不必要的coockie 使coockie體積盡量小以減少對使用者回應的影響，設定合理的過期時間。較早地Expire時間和不要過早清除coockie，都會改善使用者的回應時間。 

　　19、最佳化影像 

　　嘗試將GIF格式轉換成PNG格式，看看是否節省空間。在所有的PNG圖片上執行pngcrush（或其它PNG最佳化工具） 

　　20、不要在HTML中縮放影像－須權衡 

　　不要為了在HTML中設定長寬而使用比實際需要大的圖片。