前端提升性能的方式

一、DNS預解析瀏覽器

能夠經過預解析的方式來預先獲取域名所對應的IP。緩存

二、瀏覽器緩存併發

  強緩存與協商緩存。優化

  強緩存表示在緩存期間不須要請求。 spa

  若是緩存過時了,咱們就可使用協商緩存來解決問題。協商緩存須要請求,若是緩存有效會返回 304。code

協商緩存須要客戶端和服務端共同實現。視頻

三、預加載圖片

  有些資源不須要立刻用到,可是但願儘早獲取,這時候就可使用預加載。惟一缺點就是兼容性很差。資源

四、懶加載路由

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

  懶加載的原理就是隻加載自定義區域(一般是可視區域,但也能夠是即將進入可視區域)內須要加載的東西。懶加載不只能夠用於圖片,也可使用在別的資源上。好比進入可視區域纔開始播放視頻等等。

五、文件優化

  圖片優化:減小像素點、減小每一個像素點可以顯示的顏色。

六、CDN 加載

  靜態資源儘可能使用 CDN 加載,因爲瀏覽器對於單個域名有併發請求上限,能夠考慮使用多個 CDN 域名。對於 CDN 加載靜態資源須要注意 CDN 域名要與主站不一樣,不然每次請求都會帶上主站的 Cookie。

七、使用 Webpack 優化項目

  對於 Webpack4,打包項目使用 production 模式,這樣會自動開啓代碼壓縮

  使用 ES6 模塊來開啓 tree shaking,這個技術能夠移除沒有使用的代碼

  優化圖片,對於小圖可使用 base64 的方式寫入文件中

  按照路由拆分代碼,實現按需加載

  給打包出來的文件名添加哈希,實現瀏覽器緩存文件

八、如何渲染幾萬條數據並不卡住界面

  能夠經過 requestAnimationFrame 來每 16 ms 刷新一次

相關文章
相關標籤/搜索