WEB前端性能優化小結

轉：http://www.gafish.net/archives/1514

對前端開發工程師來講，前端性能優化的重要性是不言而喻的，最爲你們所知的是YSLOW的23條優化規則，在個人理解中，性能優化不純粹是指用戶訪問網站的速度，也包括開發的效率，這裏我總結下我理解中的WEB前端性能優化。

HTML部分

1. 語義化HTML：好處在於可使代碼簡潔清晰，支持不一樣設備，利於搜索引擎，便於團隊開發；
2. 減小DOM節點：加速頁面渲染；
3. 給圖片加上正確的寬高值：這能夠減小頁面重繪，同時防止圖片縮放；
4. 防止src屬性和link的href屬性爲空：當值爲空時，瀏覽器極可能會把當前頁面當成其屬性值加載；
5. 正確的閉合標籤：如避免使用<div/>，瀏覽器會多一個將它解析成<div\></div\>的過程；
6. 連接爲目錄或首頁的地址後面加」/」，如http://www.qq.com/；
7. 用LINK而不用@import方式導入樣式；
8. 樣式放在頁頭，JS放在頁尾；
9. 縮小favicon.ico並緩存；

CSS部分

1. 避免使用 CSS Expressions(CSS表達式)：如background-color: expression( (new Date()).getHours()%2 ? 「#B8D4FF」 : 「#F08A00″ ) ;
2. 避免使用 CSS Filter（CSS濾鏡）；
3. 使用CSS縮寫，減小代碼量；
4. 經過CSSSprites把同類圖片合成一張，減小圖片請求；
5. 減小查詢層級：如.header .logo要好過.header .top .logo；
6. 減小查詢範圍：如.header>li要好過.header li；
7. 避免TAG標籤與CLASS或ID並存：如a.top、button#submit；
8. 刪除重複的CSS；

Javscript部分

1. 儘可能少用全局變量；
2. 使用事件代理綁定事件，如將事件綁定在body上進行代理；
3. 避免頻繁操做DOM節點；
4. 不使用EVAL；
5. 減小對象查找，如a.b.c.d這種查找方式很是耗性能，儘量把它定義在變量裏；
6. 類型轉換：把數字轉換成字符串使用」」 + 1，浮點數轉換成整型使用Math.floor()或者Math.round()；
7. 對字符串進行循環操做，譬如替換、查找，應使用正則表達式；
8. 刪除重複的JS；

服務器部分

1. 儘可能合併CSS、JS文件，或將其直接寫在頁面上，減小HTTP請求；
2. 壓縮CSS、JS文件，縮短文件傳輸時間；
3. 避免404錯誤：特別要避免給404指定一個停擺頁面，不然全部404錯誤都將會加載一次頁面；
4. 通常要求減小DNS查詢次數，如同一個頁面的請求資源儘可能少的使用不一樣的主機名，這能夠減小網站並行下載的數量，但不少網站爲了加速下載資源實際上是特地用了多個主機名，這裏要作一個權衡；
5. 使用CDN加速，使用戶從離本身最近的服務器下載文件；
6. 減小Cookie的大小，使用無cookie的域，客戶端請求靜態文件的時候，減小 Cookie 的反覆傳輸對主域名的影響；
7. 爲文件頭指定Expires，使內容具備緩存性；
8. 使用gzip壓縮內容；