對(duì)前端開(kāi)發(fā)工程師來(lái)說(shuō)，前端性能優(yōu)化的重要性是不言而喻的，最為大家所知的是YSLOW的23條優(yōu)化規(guī)則，在我的理解中，性能優(yōu)化不純粹是指用戶訪問(wèn)網(wǎng)站的速度，也包括開(kāi)發(fā)的效率，這里我總結(jié)下我理解中的WEB前端性能優(yōu)化。

HTML部分

      2. 語(yǔ)義化HTML：好處在于可以使代碼簡(jiǎn)潔清晰，支持不同設(shè)備，利于搜索引擎，便于團(tuán)隊(duì)開(kāi)發(fā)；

      3. 減少DOM節(jié)點(diǎn)：加速頁(yè)面渲染；

      4. 給圖片加上正確的寬高值：這可以減少頁(yè)面重繪，同時(shí)防止圖片縮放；

      5. 防止src屬性和link的href屬性為空：當(dāng)值為空時(shí)，瀏覽器很可能會(huì)把當(dāng)前頁(yè)面當(dāng)成其屬性值加載；

      6. 正確的閉合標(biāo)簽：如避免使用, 瀏覽器會(huì)多一個(gè)將它解析成的過(guò)程；

      7. 用LINK而不用@import方式導(dǎo)入樣式；

      8. 樣式放在頁(yè)頭，JS放在頁(yè)尾；

      9. 縮小favicon.ico并緩存；

CSS部分

      1. 避免使用 CSS Expressions(CSS表達(dá)式)：如

      2. 避免使用 CSS Filter（CSS濾鏡）；

      3. 使用CSS縮寫，減少代碼量；

      4. 通過(guò)CSSSprites把同類圖片合成一張，減少圖片請(qǐng)求；

      5. 減少查詢層級(jí)：如.header .logo要好過(guò).header .top .logo；

      6. 減少查詢范圍：如.header>li要好過(guò).header li；

      7. 避免TAG標(biāo)簽與CLASS或ID并存：如a.top、button#submit；

      8. 刪除重復(fù)的CSS；

Javscript部分

      1. 盡量少用全局變量；

      2. 使用事件代理綁定事件，如將事件綁定在body上進(jìn)行代理；

      3. 避免頻繁操作DOM節(jié)點(diǎn)；

      4. 不使用EVAL；

      5. 減少對(duì)象查找，如a.b.c.d這種查找方式非常耗性能，盡可能把它定義在變量里；

      6. 類型轉(zhuǎn)換：把數(shù)字轉(zhuǎn)換成字符串使用”” + 1，浮點(diǎn)數(shù)轉(zhuǎn)換成整型使用Math.floor()或者M(jìn)ath.round()；

      7. 對(duì)字符串進(jìn)行循環(huán)操作，譬如替換、查找，應(yīng)使用正則表達(dá)式；

      8. 刪除重復(fù)的JS；

服務(wù)器部分

      1. 盡量合并CSS、JS文件，或?qū)⑵渲苯訉懺陧?yè)面上，減少HTTP請(qǐng)求；

      2. 壓縮CSS、JS文件，縮短文件傳輸時(shí)間；

      3. 避免404錯(cuò)誤：特別要避免給404指定一個(gè)停擺頁(yè)面，否則所有404錯(cuò)誤都將會(huì)加載一次頁(yè)面；

      4. 一般要求減少DNS查詢次數(shù)，如同一個(gè)頁(yè)面的請(qǐng)求資源盡量少的使用不同的主機(jī)名，這可以減少網(wǎng)站并行下載的數(shù)量，但很多網(wǎng)站為了加速下載資源其實(shí)是特意用了多個(gè)主機(jī)名，這里要做一個(gè)權(quán)衡；

      5. 使用CDN加速，使用戶從離自己最近的服務(wù)器下載文件；

      6. 減少Cookie的大小，使用無(wú)cookie的域，客戶端請(qǐng)求靜態(tài)文件的時(shí)候，減少 Cookie 的反復(fù)傳輸對(duì)主域名的影響；

      7. 為文件頭指定Expires，使內(nèi)容具有緩存性；

      8. 使用gzip壓縮內(nèi)容；