前端面試-性能優化篇

從如下幾個方面來作性能優化

• 緩存
• 資源文件
• 編碼

緩存

使用 CDN，減小資源下載時間

CDN，內容分發網絡，用戶訪問一個URL的時候，CDN會根據用戶所在區域，訪問的內容和服務器的負載狀況，返回一臺緩存服務器的IP地址給用戶訪問 CDN是什麼？使用CDN有什麼優點

根據http緩存

• 強緩存 設置expire和cache-control
• 協商緩存 設置etag和last-modified時間 （具體的看這一篇）

資源文件

指css、js、img這類型的資源文件

• 使用多域名

  瀏覽器通常會限制每一個域的並行線程（通常爲 6 個，甚至更少），使用不一樣的域名能夠最大化下載線程，但注意保持在 2-4 個域名內，以免 DNS 查詢損耗。

• 壓縮大小

• 合併js、css文件，圖片作成雪碧圖，減小請求

• 懶加載

• icon類能夠使用iconfont或者SVG

編碼

• 減小DOM操做

  緩存DOM屬性和元素、把DOM集合的長度緩存到變量中並在迭代中使用。讀變量比讀DOM的速度要快不少

• 減小重排與重繪

  先讓元素脫離文檔流，處理完畢後再讓元素迴歸文檔流，這樣瀏覽器只會進行兩次重排與重繪（脫離時和迴歸時）

• 使用事件委託

性能監控

能夠使用第三方工具。瀏覽器也有相應apiperformace.timing

• 白屏時間：responseStart - navigationStart
• 首屏時間：imgLoadTime(本身計算的，api沒有) - navigationStart
• 用戶可操做時間：domContentLoadedEventEnd - navigationStart;
• Dom加載完成時間：loadEventEnd - navigationStart

參考連接：

嗨，送你一張Web性能優化地圖

前端性能優化最佳實踐