1. 程式人生 > >前端提高效能的方式

前端提高效能的方式

1、DNS預解析

可以通過預解析的方式來預先獲取域名所對應的IP。

2、瀏覽器快取

  強快取與協商快取。

  強快取表示在快取期間不需要請求。 

  如果快取過期了,我們就可以使用協商快取來解決問題。協商快取需要請求,如果快取有效會返回 304。

協商快取需要客戶端和服務端共同實現。

3、預載入

  有些資源不需要馬上用到,但是希望儘早獲取,這時候就可以使用預載入。唯一缺點就是相容性不好。

4、懶載入

  懶載入就是將不關鍵的資源延後載入。

  懶載入的原理就是隻載入自定義區域(通常是可視區域,但也可以是即將進入可視區域)內需要載入的東西。懶載入不僅可以用於圖片,也可以使用在別的資源上。比如進入可視區域才開始播放視訊等等。

5、檔案優化

  圖片優化:減少畫素點、減少每個畫素點能夠顯示的顏色。

6、CDN 載入

  靜態資源儘量使用 CDN 載入,由於瀏覽器對於單個域名有併發請求上限,可以考慮使用多個 CDN 域名。對於 CDN 載入靜態資源需要注意 CDN 域名要與主站不同,否則每次請求都會帶上主站的 Cookie。

7、使用 Webpack 優化專案

  對於 Webpack4,打包專案使用 production 模式,這樣會自動開啟程式碼壓縮

  使用 ES6 模組來開啟 tree shaking,這個技術可以移除沒有使用的程式碼

  優化圖片,對於小圖可以使用 base64 的方式寫入檔案中

  按照路由拆分程式碼,實現按需載入

  給打包出來的檔名新增雜湊,實現瀏覽器快取檔案

8、如何渲染幾萬條資料並不卡住介面

  可以通過 requestAnimationFrame 來每 16 ms 重新整理一次