效能優化瑣碎事

對於一張 100 * 100 畫素的來說，影象上有 10000 個畫素點，如果每個畫素的值是rgba儲存的話，那麼也就是說每個畫素有 4 個通道，每個通道 1 個位元組（8 位 = 1個位元組），所以該大小大概為 39kb（10000 * 1 * 4 / 1024）。

但是在實際專案中，一張可能並不需要使用那麼多顏色去顯示，我們可以通過減少每個畫素的調色盤來相應縮小的大小。

不用。很多時候會使用到很多修飾類，其實這類修飾完全可以用 css 去代替。

對於移動端來說，螢幕寬度就那麼點，完全沒有必要去載入原圖浪費頻寬。一般都用 cdn 載入，可以計算出適配螢幕的寬度，然後去請求相應裁剪好的。

小圖使用 base64 格式

將多個圖示檔案整合到一張中（雪碧圖）

dns 解析也是需要時間的，可以通過預解析的方式來預先獲得網域名稱所對應的 ip。

考慮乙個場景，滾動事件中會發起網路請求，但是我們並不希望使用者在滾動過程中一直發起請求，而是隔一段時間發起一次，對於這種情況我們就可以使用節流。

理解了節流的用途，我們就來實現下這個函式

// func是使用者傳入需要防抖的函式
// wait是等待時間
const throttle = (func, wait = 50) => 
}}setinterval(
throttle(() => , 500),
1)

考慮乙個場景，有乙個按鈕點選會觸發網路請求，但是我們並不希望每次點選都發起網路請求，而是當使用者點選按鈕一段時間後沒有再次點選的情況才去發起網路請求，對於這種情況我們就可以使用防抖。

理解了防抖的用途，我們就來實現下這個函式

// func是使用者傳入需要防抖的函式
// wait是等待時間
const debounce = (func, wait = 50) => , wait)
}}

在開發中，可能會遇到這樣的情況。有些資源不需要馬上用到，但是希望盡早獲取，這時候就可以使用預載入。

預載入其實是宣告式的fetch，強制瀏覽器請求資源，並且不會阻塞onload事件，可以使用以下**開啟預載入

預載入可以一定程度上降低首屏的載入時間，因為可以將一些不影響首屏但重要的檔案延後載入，唯一缺點就是相容性不好。

預渲染雖然可以提高頁面的載入速度，但是要確保該頁面大概率會被使用者在之後開啟，否則就是白白浪費資源去渲染。

懶執行就是將某些邏輯延遲到使用時再計算。該技術可以用於首屏優化，對於某些耗時邏輯並不需要在首屏就使用的，就可以使用懶執行。懶執行需要喚醒，一般可以通過定時器或者事件的呼叫來喚醒。

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

cdn 的原理是盡可能的在各個地方分布機房快取資料，這樣即使我們的根伺服器遠在國外，在國內的使用者也可以通過國內的機房迅速載入資源。

因此，我們可以將靜態資源盡量使用 cdn 載入，由於瀏覽器對於單個網域名稱有併發請求上限，可以考慮使用多個 cdn 網域名稱。並且對於 cdn 載入靜態資源需要注意 cdn 網域名稱要與主站不同，否則每次請求都會帶上主站的 cookie，平白消耗流量。

這些碎片化的效能優化點看似很短，但是卻能在出現效能問題時簡單高效的提高效能，並且好幾個點都是面試高頻考點，比如節流、防抖。如果你還沒有在專案中使用過這些技術，可以嘗試著用到項