不能錯過的web前端性能優化總結

web前端性能優化主要分爲如下幾個板塊:

• 加載優化

  • DNS預解析
  • 合併img、css、javascript文件，減小http請求
  • 緩存一切可緩存資源
  • 使用長Cache
  • 使用外聯式引用css、javascript文件
  • 壓縮HTML、css、javascript文件
  • 啓用GZip
  • 使用首屏加載(好比同構)
  • 使用按需加載資源文件
  • 使用滾屏記載資源文件
  • 資源懶加載
  • 經過Media Query加載css文件
  • 增長Loading進度條
  • 減小Cookie
  • 避免重點向

• 圖片優化

  • 在保證圖片質量的狀況下，壓縮圖片，減小圖片大小
  • 使用Css三、svg、iconfont代替圖片
  • 首次加載不大於1024KB的圖片
  • 圖片寬不大於640px(移動端)

• 腳本優化

  • 減小重回和迴流操做
  • 緩存DOM元素、DOM列表長度length、屬性值
  • 使用事件委託，避免批量綁定事件
  • 儘可能使用ID選擇器
  • 使用touch事件代替click事件
  • 使用節流函數減小性能消耗

• HTML優化

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

• css優化

  • 移除空的css規則
  • 正確使用display的屬性
  • 不濫用float
  • 不聲明過多的font-size
  • 值爲0時不要使用單位
  • 標準化各類瀏覽器前綴

• 渲染優化

  • HTML使用viewport(移動端)
  • 減小DOM節點
  • 儘可能使用CSS3 3d動畫來觸發GPU渲染
  • 使用requestAnimationFrame代替setTimeInter和setTimeout
  • 適當使用canvas動畫
  • 對於resize、mousemove事件使用節流處理，較少DOM迴流和重繪次數

重點提示:

• 首屏加載

  首屏的快速顯示，能夠大大提高用戶對頁面速度的感知，所以應儘可能針對首屏的快速顯示作優化，好比使用Loading等待動畫、服務器渲染首屏(同構)...

• DNS預解析

  DNS 做爲互聯網的基礎協議，其解析的速度彷佛容易被網站優化人員忽視。如今大多數新瀏覽器已經針對DNS解析進行了優化，典型的一次DNS解析耗費20-120 毫秒，減小DNS解析時間和次數是個很好的優化方式。DNS Prefetching是具備此屬性的域名不須要用戶點擊連接就在後臺解析，而域名解析和內容載入是串行的網絡操做，因此這個方式能減小用戶的等待時間，提高用戶體驗。

  瀏覽器對網站第一次的域名DNS解析查找流程依次爲：

  瀏覽器緩存-系統緩存-路由器緩存-ISP DNS緩存-遞歸搜索

  

  DNS預解析的實現：

  • 用meta信息來告知瀏覽器, 當前頁面要作DNS預解析:

  <meta http-equiv="x-dns-prefetch-control" content="on" />
  複製代碼

  • 在頁面header中使用link標籤來強制對DNS預解析:

  <link rel="dns-prefetch" href="http://bdimg.share.baidu.com" />
  複製代碼

  示例

  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta http-equiv="x-dns-prefetch-control" content="on" />
  <link rel="dns-prefetch" href="http://mat1.gtimg.com"/>
  <link rel="dns-prefetch" href="http://tajs.qq.com" />
  複製代碼

  注：dns-prefetch需慎用，多頁面重複DNS預解析會增長重複DNS查詢次數。

  PS：DNS預解析主要是用於網站前端頁面優化，在SEO中的做用湛藍還未做驗證，但做爲加強用戶體驗的一部分rel="dns-prefetch"或許值得你們慢慢發現。