目前，互聯網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