性能優化

性能優化

---

如何進行網站性能優化

• content方面

  • 減小HTTP請求：合併文件、CSS精靈、inline Image
  • 減小DNS查詢：DNS查詢完成以前瀏覽器不能從這個主機下載任何任何文件。方法：DNS緩存、將資源分佈到恰當數量的主機名，平衡並行下載和DNS查詢
  • 避免重定向：多餘的中間訪問
  • 使Ajax可緩存
  • 非必須組件延遲加載
  • 將來所需組件預加載
  • 減小DOM元素數量
  • 將資源放到不一樣的域下：瀏覽器同時從一個域下載資源的數目有限，增長域能夠提升並行下載量
  • 減小iframe數量
  • 不要404

• Server方面

  • 使用CDN
  • 添加Expires或者Cache-Control響應頭
  • 對組件使用Gzip壓縮
  • 配置ETag
  • Flush Buffer Early
  • Ajax使用GET進行請求
  • 避免空src的img標籤

• Cookie方面

  • 減少cookie大小
  • 引入資源的域名不要包含cookie

• css方面

  • 將樣式表放到頁面頂部
  • 不使用CSS表達式
  • 不使用IE的Filter

• Javascript方面

  • 將腳本放到頁面底部
  • 將javascript和css從外部引入
  • 壓縮javascript和css
  • 刪除不須要的腳本
  • 減小DOM訪問
  • 合理設計事件監聽器

• 圖片方面

  • 優化圖片：根據實際顏色須要選擇色深、壓縮
  • 優化css精靈
  • 不要在HTML中拉伸圖片
  • 保證favicon.ico小而且可緩存

• 移動方面

  • 保證組件小於25k
  • Pack Components into a Multipart Document

你有用過哪些前端性能優化的方法？

• 減小http請求次數：CSS Sprites, JS、CSS源碼壓縮、圖片大小控制合適；網頁Gzip，CDN託管，data緩存 ，圖片服務器。
• 前端模板 JS+數據，減小因爲HTML標籤致使的帶寬浪費，前端用變量保存AJAX請求結果，每次操做本地變量，不用請求，減小請求次數
• 用innerHTML代替DOM操做，減小DOM操做次數，優化javascript性能。
• 當須要設置的樣式不少時設置className而不是直接操做style
• 少用全局變量、緩存DOM節點查找的結果。減小IO讀取操做
• 避免使用CSS Expression（css表達式)又稱Dynamic properties(動態屬性)
• 圖片預加載，將樣式表放在頂部，將腳本放在底部 加上時間戳
• 避免在頁面的主體佈局中使用table，table要等其中的內容徹底下載以後纔會顯示出來，顯示比div+css佈局慢

談談性能優化問題

• 代碼層面：避免使用css表達式，避免使用高級選擇器，通配選擇器
• 緩存利用：緩存Ajax，使用CDN，使用外部js和css文件以便緩存，添加Expires頭，服務端配置Etag，減小DNS查找等
• 請求數量：合併樣式和腳本，使用css圖片精靈，初始首屏以外的圖片資源按需加載，靜態資源延遲加載
• 請求帶寬：壓縮文件，開啓GZIP

代碼層面的優化

• 用hash-table來優化查找
• 少用全局變量
• 用innerHTML代替DOM操做，減小DOM操做次數，優化javascript性能
• 用setTimeout來避免頁面失去響應
• 緩存DOM節點查找的結果
• 避免使用CSS Expression
• 避免全局查詢
• 避免使用with(with會建立本身的做用域，會增長做用域鏈長度)
• 多個變量聲明合併
• 避免圖片和iFrame等的空Src。空Src會從新加載當前頁面，影響速度和效率
• 儘可能避免寫在HTML標籤中寫Style屬性

前端性能優化最佳實踐？

• 性能評級工具（PageSpeed 或 YSlow）
• 合理設置 HTTP 緩存：Expires 與 Cache-control
• 靜態資源打包，開啓 Gzip 壓縮（節省響應流量）
• CSS3 模擬圖像，圖標base64（下降請求數）
• 模塊延遲(defer)加載/異步(async)加載
• Cookie 隔離（節省請求流量）
• localStorage（本地存儲）
• 使用 CDN 加速（訪問最近服務器）
• 啓用 HTTP/2（多路複用，並行加載）
• 前端自動化（gulp/webpack）