優(yōu)化

優(yōu)化的目的是提升用戶體驗(yàn)，減少網(wǎng)頁(yè)加載時(shí)間。我們可以依據(jù)雅虎軍規(guī)來(lái)對(duì)項(xiàng)目進(jìn)行優(yōu)化。

• 關(guān)于DOM
  1. 減少DOM元素的數(shù)量，不要嵌套太深，正常頁(yè)面的DOM元素?cái)?shù)量一般不應(yīng)該超過(guò)1000。
  2. 盡量少用iframe。
  3. 避免空的src和href。
  4. 用智能的事件處理器（事件委托）。
  5. DOM 的多個(gè)讀操作（或多個(gè)寫(xiě)操作），應(yīng)該放在一起。不要兩個(gè)讀操作之間，加入一個(gè)寫(xiě)操作。
  6. 不要一條條地改變樣式，而要通過(guò)改變class，一次性地改變樣式。
  7. 盡量使用離線DOM，而不是真實(shí)的網(wǎng)頁(yè)DOM，來(lái)改變?cè)貥邮?。比如，操作Document Fragment對(duì)象，完成后再把這個(gè)對(duì)象加入DOM。再比如，使用 cloneNode() 方法，在克隆的節(jié)點(diǎn)上進(jìn)行操作，然后再用克隆的節(jié)點(diǎn)替換原始節(jié)點(diǎn)。
  8. 使用 window.requestAnimationFrame()、window.requestIdleCallback() 這兩個(gè)方法調(diào)節(jié)重新渲染
• 關(guān)于css
  1. 避免使用CSS表達(dá)式
  2. 選擇<link>舍棄@import
  3. 避免使用濾鏡
• 關(guān)于請(qǐng)求
  1. 盡量減少HTTP請(qǐng)求數(shù)。
  2. 使用緩存技術(shù)。
  3. 使用CDN（內(nèi)容分發(fā)網(wǎng)絡(luò)），網(wǎng)站上靜態(tài)資源即css、js全都使用cdn分發(fā)，圖片亦然。
  4. 給Cookie減肥
  5. 避免重定向
  6. 權(quán)衡DNS查找次數(shù)，減少主機(jī)名可以節(jié)省DNS查找時(shí)間。但同時(shí)，需要注意，減少主機(jī)會(huì)減少頁(yè)面中并行下載的數(shù)量。
• 關(guān)于文件
  1. 對(duì)文件壓縮混淆。
  2. 把腳本放在底部，把樣式表放在頂部。
  3. 把JavaScript和CSS放到外面，不要寫(xiě)在頁(yè)面內(nèi)。
  4. 按需加載。
  5. 合并文件。
• 關(guān)于圖片
  1. 使用雪碧圖。（小圖標(biāo)）
  2. 避免圖片src屬性為空。
  3. 不要在HTML中縮放圖片。
  4. 更好的圖片格式。
  5. 使用base64編碼代替圖片，css、svg、canvas或iconfont代替圖片。

經(jīng)驗(yàn)

平時(shí)項(xiàng)目中，我們可以根據(jù)上述經(jīng)驗(yàn)來(lái)對(duì)項(xiàng)目進(jìn)行優(yōu)化。剩下的可以不斷優(yōu)化自己的代碼。

參考

• 網(wǎng)頁(yè)性能管理詳解
• CDN與DNS知識(shí)匯總
• 前端性能優(yōu)化指南