web前端性能優(yōu)化主要分為以下幾個(gè)板塊:

• 加載優(yōu)化

  • DNS預(yù)解析
  • 合并img、css、javascript文件，減少http請(qǐng)求
  • 緩存一切可緩存資源
  • 使用長(zhǎng)Cache
  • 使用外聯(lián)式引用css、javascript文件
  • 壓縮HTML、css、javascript文件
  • 啟用GZip
  • 使用首屏加載(比如同構(gòu))
  • 使用按需加載資源文件
  • 使用滾屏記載資源文件
  • 資源懶加載
  • 通過Media Query加載css文件
  • 增加Loading進(jìn)度條
  • 減少Cookie
  • 避免重點(diǎn)向

• 圖片優(yōu)化

  • 在保證圖片質(zhì)量的情況下，壓縮圖片，減少圖片大小
  • 使用Css3、svg、iconfont代替圖片
  • 首次加載不大于1024KB的圖片
  • 圖片寬不大于640px(移動(dòng)端)

• 腳本優(yōu)化

  • 減少重回和回流操作
  • 緩存DOM元素、DOM列表長(zhǎng)度length、屬性值
  • 使用事件委托，避免批量綁定事件
  • 盡量使用ID選擇器
  • 使用touch事件代替click事件
  • 使用節(jié)流函數(shù)減少性能消耗

• HTML優(yōu)化

  • css文件寫在頭部，javascript放在尾部
  • 避免層級(jí)深嵌套
  • 避免img、iframe、a等元素的空src
  • 避免行內(nèi)樣式和事件綁定
  • 大圖片避免使用base64

• css優(yōu)化

  • 移除空的css規(guī)則
  • 正確使用display的屬性
  • 不濫用float
  • 不聲明過多的font-size
  • 值為0時(shí)不要使用單位
  • 標(biāo)準(zhǔn)化各種瀏覽器前綴

• 渲染優(yōu)化

  • HTML使用viewport(移動(dòng)端)
  • 減少DOM節(jié)點(diǎn)
  • 盡量使用CSS3 3d動(dòng)畫來(lái)觸發(fā)GPU渲染
  • 使用requestAnimationFrame代替setTimeInter和setTimeout
  • 適當(dāng)使用canvas動(dòng)畫
  • 對(duì)于resize、mousemove事件使用節(jié)流處理，較少DOM回流和重繪次數(shù)

重點(diǎn)提示:

• 首屏加載

  首屏的快速顯示，可以大大提升用戶對(duì)頁(yè)面速度的感知，因此應(yīng)盡量針對(duì)首屏的快速顯示做優(yōu)化，比如使用Loading等待動(dòng)畫、服務(wù)器渲染首屏(同構(gòu))...

• DNS預(yù)解析

  DNS 作為互聯(lián)網(wǎng)的基礎(chǔ)協(xié)議，其解析的速度似乎容易被網(wǎng)站優(yōu)化人員忽視?，F(xiàn)在大多數(shù)新瀏覽器已經(jīng)針對(duì)DNS解析進(jìn)行了優(yōu)化，典型的一次DNS解析耗費(fèi)20-120 毫秒，減少DNS解析時(shí)間和次數(shù)是個(gè)很好的優(yōu)化方式。DNS Prefetching是具有此屬性的域名不需要用戶點(diǎn)擊鏈接就在后臺(tái)解析，而域名解析和內(nèi)容載入是串行的網(wǎng)絡(luò)操作，所以這個(gè)方式能減少用戶的等待時(shí)間，提升用戶體驗(yàn)。

  瀏覽器對(duì)網(wǎng)站第一次的域名DNS解析查找流程依次為：

  瀏覽器緩存-系統(tǒng)緩存-路由器緩存-ISP DNS緩存-遞歸搜索

  DNS預(yù)解析

  DNS預(yù)解析的實(shí)現(xiàn)：

  用meta信息來(lái)告知瀏覽器, 當(dāng)前頁(yè)面要做DNS預(yù)解析:

  <meta http-equiv="x-dns-prefetch-control" content="on" />
  

  在頁(yè)面header中使用link標(biāo)簽來(lái)強(qiáng)制對(duì)DNS預(yù)解析:

  <link rel="dns-prefetch"  />
  

  示例

  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta http-equiv="x-dns-prefetch-control" content="on" />
  <link rel="dns-prefetch" />
  <link rel="dns-prefetch"  />
  

  注：dns-prefetch需慎用，多頁(yè)面重復(fù)DNS預(yù)解析會(huì)增加重復(fù)DNS查詢次數(shù)。

  PS：DNS預(yù)解析主要是用于網(wǎng)站前端頁(yè)面優(yōu)化，在SEO中的作用湛藍(lán)還未作驗(yàn)證，但作為增強(qiáng)用戶體驗(yàn)的一部分rel="dns-prefetch"或許值得大家慢慢發(fā)現(xiàn)。