目前，互聯網BS模式應用發展越來越多，越來越廣泛，包括網站系統、OA平臺的開發等，那麼如何做好、做得出色，給用戶帶來很好的體驗呢？下面跟大家分享一下Web前端優化方面的經驗，這些經驗都是工作實踐中比較實用的技術
1、儘量減少HTTP請求個數——須權衡
合併圖片（如css sprites，內置圖片使用數據）、合併CSS、JS，這一點很重要，但是要考慮合併後的文件體積。
2、爲文件頭指定Expires或Cache-Control，使內容具有緩存性。
區分靜態內容和動態內容，避免以後頁面訪問中不必要的HTTP請求。
3、避免空的src和href
留意具有這兩個屬性的標籤如link，script，img，iframe等；
4、使用gzip壓縮內容
Gzip壓縮所有可能的文件類型以來減少文件體積
5、把CSS放到頂部
實現頁面有秩序地加載，這對於擁有較多內容的頁面和網速較慢的用戶來說更爲重要，同時，HTML規範清楚指出樣式表要放包含在頁面的區域內；
6、把JS放到底部
HTTP/1.1 規範建議，瀏覽器每個主機名的並行下載內容不超過兩個，而問題在於腳本阻止了頁面的平行下載，即便是主機名不相同
7、避免使用CSS表達式
頁面顯示和縮放，滾動、乃至移動鼠標時，CSS表達式的計算頻率是我們要關注的。可以考慮一次性的表達式或者使用事件句柄來代替CSS表達式。
8、將CSS和JS放到外部文件中
我們需要權衡內置代碼帶來的HTTP請求減少與通過使用外部文件進行緩存帶來的好處的折中點。
9、精簡CSS和JS
目的就是減少下載的文件體積，可考慮壓縮工具JSMin和YUICompressor。
10、剔除重複的JS和CSS
重複調用腳本，除了增加額外的HTTP請求外，多次運算也會浪費時間。在IE和Firefox中不管腳本是否可緩存，它們都存在重複運算JavaScript的問題。
11、使AJAX可緩存
利用時間戳，更精巧的實現響應可緩存與服務器數據同步更新。
12、儘早刷新輸出緩衝
尤其對於css，js文件的並行下載更有意義
13、使用GET來完成AJAX請求
當使用XMLHttpRequest時，瀏覽器中的POST方法是一個“兩步走”的過程：首先發送文件頭，然後才發送數據。在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中設置長寬而使用比實際需要大的圖片。
WEB前端學習交流羣21 598399936