圖片優(yōu)化：計算圖片大小
一張100*100像素的圖片，有10000個像素點（每個像素點用RGBA存儲）---每個像素點有4個通道，每個通道1個字節(jié)（8位=1字節(jié)），圖片大小39kb（10000*1*4/1024）
我們通過減少每個像素點的調(diào)色板--------壓縮圖片大小
減少像素點? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?減少每個像素點能夠顯示的顏色?
圖片加載優(yōu)化
1.不用圖片? ? ? ? ? ? ? ? ? 修飾圖片用css代替
2.移動端? ? ? ? ? ? ? ?屏幕小，沒必要加載原圖浪費帶寬，一般使用CDN加載
3.小圖? ? ? 使用base64格式
4.雪碧圖
5.正確的圖片格式? ? ? 對于能夠顯示 WebP 格式的瀏覽器盡量使用 WebP 格式? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 小圖使用 PNG，其實對于大部分圖標(biāo)這類圖片? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 照片使用 JPEG
DNS預(yù)解析：DNS解析也是需要時間的，通過預(yù)解析方式預(yù)先獲得域名對應(yīng)IP
<link rel="dns-prefetch" >
節(jié)流
場景：? 滾動事件發(fā)起網(wǎng)絡(luò)請求——我們不希望滾動中一直發(fā)請求，而是隔一段時間發(fā)一次
// func是用戶傳入需要防抖的函數(shù)? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? // wait是等待時間? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? const throttle = (func, wait = 50) => {? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?// 上一次執(zhí)行該函數(shù)的時間? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? let lastTime = 0 return function(...args) {? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? // 當(dāng)前時間? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?let now = +new Date()? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?// 將當(dāng)前時間和上一次執(zhí)行函數(shù)時間對比? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?// 如果差值大于設(shè)置的等待時間就執(zhí)行函數(shù)? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?if (now - lastTime > wait) {? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? lastTime = now? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? func.apply(this, args)? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? }? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?}? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? }? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? setInterval(? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? throttle(() => {? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? console.log(1)? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?}, 500),? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 1? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? )?
防抖
場景 ：點擊一個按鈕觸發(fā)網(wǎng)絡(luò)請求，我們不希望每次點擊都發(fā)起網(wǎng)絡(luò)請求
當(dāng)用戶點擊按鈕一段時間后沒有再次點擊的情況才去發(fā)起網(wǎng)絡(luò)請求，對于這種情況我們就可以使用防抖。
預(yù)加載：有些資源不需要馬上用到，希望盡早獲取
預(yù)加載其實是聲明式的?fetch?，強制瀏覽器請求資源，并且不會阻塞?onload?事件，可以使用以下代碼開啟預(yù)加載
<link rel="preload" >
預(yù)加載可以一定程度上降低首屏的加載時間，因為可以將一些不影響首屏但重要的文件延后加載，唯一缺點就是兼容性不好。
預(yù)渲染： 可以通過預(yù)渲染將下載的文件預(yù)先在后臺渲染
<link rel="prerender" >
預(yù)渲染雖然可以提高頁面的加載速度，但是要確保該頁面大概率會被用戶在之后打開，否則就是白白浪費資源去渲染。
懶執(zhí)行：將某些邏輯延遲到使用時計算-----首屏優(yōu)化
對于耗時不需要在首屏使用的---------------采用懶執(zhí)行（一般用定時器或者函數(shù)調(diào)用執(zhí)行）
懶加載：將不關(guān)鍵的資源延后加載
原理：是只加載自定義區(qū)域
實現(xiàn)圖片懶加載：
先設(shè)置圖片標(biāo)簽的?src?屬性為一張占位圖，將真實的圖片資源放入一個自定義屬性中，當(dāng)進入自定義區(qū)域時，就將自定義屬性替換為?src?屬性，這樣圖片就會去下載資源，實現(xiàn)了圖片懶加載。
CDN
原理：盡可能在各個地方分布機房緩存數(shù)據(jù)
這樣即使我們服務(wù)器在國外，國內(nèi)用戶也可以通過國內(nèi)機房迅速加載資源
將靜態(tài)資源盡量使用 CDN 加載，
由于瀏覽器對于單個域名有并發(fā)請求上限，可以考慮使用多個 CDN 域名。
并且對于 CDN 加載靜態(tài)資源需要注意 CDN 域名要與主站不同，否則每次請求都會帶上主站的 Cookie，平白消耗流量。
