前端效能優化 資源優化

資源優化方向壓縮和合併，目的是減少http請求數量、減少請求資源大小。

css、js檔案合併原則：

1、若干小檔案可以嘗試合併

2、無衝突，服務相同模組

3、不是為了優化合併而合併，按需合併，讓使用者更早看到和使用功能為主。

1、選擇合適格式的，了解jpg、png、svg、webp、gif等格式的特點，jpg可以儲存成漸進式格式，預設格式是自上而下載入

2、選擇合適大小的傳給客戶端

3、不同顯示器顯示合適尺寸的，可以使用srcset、sizes屬性設定不同瀏覽器下顯示的

4、壓縮，要平衡質量和壓縮之間的比例關係

5、優先順序的載入

6、懶載入、預載入

字型優化：

1、font-display來控制字型以上的行為，font-display不同值產生的效果：

2、拆分字符集，將常用字符集優先載入。

3、使用ajax+base64，解決相容問題，但是無法有效快取。

前端效能優化 資源預載入

預載入是瀏覽器對將來可能被使用資源的一種暗示，一些資源可以在當前頁面使用到，一些可能在將來的某些頁面中被使用。作為開發人員，我們比瀏覽器更加了解我們的應用，所以我們可以對我們的核心資源使用該技術。預載入可以拆分成很多小點 dns prefetch,subresource,prefetch,preco...

前端效能優化 資源預載入

預載入是瀏覽器對將來可能被使用資源的一種暗示，一些資源可以在當前頁面使用到，一些可能在將來的某些頁面中被使用。作為開發人員，我們比瀏覽器更加了解我們的 應用，所以我們可以對我們核心資源使用該技術。當提到前端效能優化時，我們首先會聯想到檔案的合併，壓縮，檔案快取和開啟服務端的gzip壓縮等，這使得頁面...

前端效能優化 靜態資源優化4 JS

js 優化原則 需要時才優化，要考慮可維護性 1 提公升 js 檔案載入效能 將 css 檔案放在 head 裡，將 js 檔案放在 body 裡 2 js 變數和函式優化 盡量使用 id 選擇器 盡量避免使用 eval js 函式盡可能保持簡潔 使用事件節流函式 使用事件委託 3 js 動畫優化 ...