web前端優化方法

目前，互聯網BS模式應用發展愈來愈多，愈來愈普遍，包括網站系統、OA平臺的開發等，那麼如何作好、作得出色，給用戶帶來很好的體驗呢？下面跟你們分享一下Web前端優化方面的經驗，這些經驗都是工做實踐中比較實用的技術
　　一、儘可能減小HTTP請求個數——須權衡

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

　　二、爲文件頭指定Expires或Cache-Control，使內容具備緩存性。

　　區分靜態內容和動態內容，避免之後頁面訪問中沒必要要的HTTP請求。

　　三、避免空的src和href

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

　　四、使用gzip壓縮內容

　　Gzip壓縮全部可能的文件類型以來減小文件體積

　　五、把CSS放到頂部

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

　　六、把JS放到底部

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

　　七、避免使用CSS表達式

　　頁面顯示和縮放，滾動、乃至移動鼠標時，CSS表達式的計算頻率是咱們要關注的。能夠考慮一次性的表達式或者使用事件句柄來代替CSS表達式。

　　八、將CSS和JS放到外部文件中

　　咱們須要權衡內置代碼帶來的HTTP請求減小與經過使用外部文件進行緩存帶來的好處的折中點。

　　九、精簡CSS和JS

　　目的就是減小下載的文件體積，可考慮壓縮工具JSMin和YUI Compressor。

　　十、剔除重複的JS和CSS

　　重複調用腳本，除了增長額外的HTTP請求外，屢次運算也會浪費時間。在IE和Firefox中無論腳本是否可緩存，它們都存在重複運算JavaScript的問題。

　　十一、使AJAX可緩存

　　利用時間戳，更精巧的實現響應可緩存與服務器數據同步更新。

　　十二、儘早刷新輸出緩衝

　　尤爲對於css，js文件的並行下載更有意義

　　1三、使用GET來完成AJAX請求

　　當使用XMLHttpRequest時，瀏覽器中的POST方法是一個「兩步走」的過程：首先發送文件頭，而後才發送數據。在url小於2K時使用GET獲取數據時更加有意義。

　　1四、延遲加載

　　肯定頁面運行正常後，再加載腳原本實現如拖放和動畫，或者是隱藏部分的內容以及摺疊內容等。

　　1五、預加載

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

　　1六、儘可能減小iframe的個數

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

　　1七、避免404

　　HTTP請求時間消耗是很大的，有些站點把404錯誤響應頁面改成「你是否是要找*」，這雖然改進了用戶體驗可是一樣也會浪費服務器資源（如數據庫等）。

　　1八、減小Cookie的大小

　　去除沒必要要的coockie 使coockie體積儘可能小以減小對用戶響應的影響，設置合理的過時時間。較早地Expire時間和不要過早去清除coockie，都會改善用戶的響應時間。

　　1九、優化圖像

　　嘗試把GIF格式轉換成PNG格式，看看是否節省空間。在全部的PNG圖片上運行pngcrush（或者其它PNG優化工具）

　　20、不要在HTML中縮放圖像——須權衡

　　不要爲了在HTML中設置長寬而使用比實際須要大的圖片。

WEB前端學習交流羣21 598399936