圖片加載優(yōu)化
- 不用圖片
- 對(duì)于移動(dòng)端來說,一般圖片都用 CDN 加載决帖，可以計(jì)算出適配屏幕的寬度扁远，然后去請(qǐng)求相應(yīng)裁剪好的圖片。
- 小圖使用 base64 格式
- 將多個(gè)圖標(biāo)文件整合到一張圖片中（雪碧圖）
- 對(duì)于能夠顯示 WebP 格式的瀏覽器盡量使用 WebP 格式。缺點(diǎn)就是兼容性并不好
- 小圖使用 PNG，其實(shí)對(duì)于大部分圖標(biāo)這類圖片，完全可以使用 SVG 代替
- 照片使用 JPEG
防抖和節(jié)流
利用Lodash
防抖
考慮一個(gè)場景靠瞎，有一個(gè)按鈕點(diǎn)擊會(huì)觸發(fā)網(wǎng)絡(luò)請(qǐng)求，但是我們并不希望每次點(diǎn)擊都發(fā)起網(wǎng)絡(luò)請(qǐng)求，而是當(dāng)用戶點(diǎn)擊按鈕一段時(shí)間后沒有再次點(diǎn)擊的情況才去發(fā)起網(wǎng)絡(luò)請(qǐng)求溉委，對(duì)于這種情況我們就可以使用防抖黔酥。
_.debounce防抖函數(shù)
參數(shù)
func (Function): 要防抖動(dòng)的函數(shù)趴酣。
[wait=0] (number): 需要延遲的毫秒數(shù)柜蜈。
[options={}] (Object): 選項(xiàng)對(duì)象。
[options.leading=false] (boolean): 指定在延遲開始前調(diào)用。
[options.maxWait] (number): 設(shè)置 func 允許被延遲的最大值。
[options.trailing=true] (boolean): 指定在延遲結(jié)束后調(diào)用。
返回
(Function): 返回新的 debounced（防抖動(dòng)）函數(shù)黎棠。
// 避免窗口在變動(dòng)時(shí)出現(xiàn)昂貴的計(jì)算開銷跟狱。
jQuery(window).on('resize', _.debounce(calculateLayout, 150));
// 當(dāng)點(diǎn)擊時(shí) `sendMail` 隨后就被調(diào)用。
jQuery(element).on('click', _.debounce(sendMail, 300, {
'leading': true,
'trailing': false
}));
// 確保 `batchLog` 調(diào)用1次之后，1秒內(nèi)會(huì)被觸發(fā)。
var debounced = _.debounce(batchLog, 250, { 'maxWait': 1000 });
var source = new EventSource('/stream');
jQuery(source).on('message', debounced);
// 取消一個(gè) trailing 的防抖動(dòng)調(diào)用
jQuery(window).on('popstate', debounced.cancel);
自己封裝防抖函數(shù)：
// func是用戶傳入需要防抖的函數(shù)
// wait是等待時(shí)間
const debounce = (func, wait = 50) => {
// 緩存一個(gè)定時(shí)器id
let timer = 0
// 這里返回的函數(shù)是每次用戶實(shí)際調(diào)用的防抖函數(shù)
// 如果已經(jīng)設(shè)定過定時(shí)器了就清空上一次的定時(shí)器
// 開始一個(gè)新的定時(shí)器室奏，延遲執(zhí)行用戶傳入的方法
return function(...args) {
if (timer) clearTimeout(timer)
timer = setTimeout(() => {
func.apply(this, args)
}, wait)
}
}
節(jié)流
考慮一個(gè)場景绒怨，滾動(dòng)事件中會(huì)發(fā)起網(wǎng)絡(luò)請(qǐng)求，但是我們并不希望用戶在滾動(dòng)過程中一直發(fā)起請(qǐng)求，而是隔一段時(shí)間發(fā)起一次，對(duì)于這種情況我們就可以使用節(jié)流。
thorttle節(jié)流函數(shù)
參數(shù)
func (Function): 要節(jié)流的函數(shù)必搞。
[wait=0] (number): 需要節(jié)流的毫秒梅割。
[options={}] (Object): 選項(xiàng)對(duì)象鳖粟。
[options.leading=true] (boolean): 指定調(diào)用在節(jié)流開始前弹砚。
[options.trailing=true] (boolean): 指定調(diào)用在節(jié)流結(jié)束后。
返回
(Function): 返回節(jié)流的函數(shù)。
// 避免在滾動(dòng)時(shí)過分的更新定位
jQuery(window).on('scroll', _.throttle(updatePosition, 100));
// 點(diǎn)擊后就調(diào)用 `renewToken`为流，但5分鐘內(nèi)超過1次。
var throttled = _.throttle(renewToken, 300000, { 'trailing': false });
jQuery(element).on('click', throttled);
// 取消一個(gè) trailing 的節(jié)流調(diào)用莲祸。
jQuery(window).on('popstate', throttled.cancel);
自己封裝節(jié)流函數(shù)：
// func是用戶傳入需要防抖的函數(shù)
// wait是等待時(shí)間
const throttle = (func, wait = 50) => {
// 上一次執(zhí)行該函數(shù)的時(shí)間
let lastTime = 0
return function(...args) {
// 當(dāng)前時(shí)間
let now = +new Date()
// 將當(dāng)前時(shí)間和上一次執(zhí)行函數(shù)時(shí)間對(duì)比
// 如果差值大于設(shè)置的等待時(shí)間就執(zhí)行函數(shù)
if (now - lastTime > wait) {
lastTime = now
func.apply(this, args)
}
}
}
setInterval(
throttle(() => {
console.log(1)
}, 500),
1
)
預(yù)加載
有些資源不需要馬上用到，但是希望盡早獲取，這時(shí)候就可以使用預(yù)加載蛮拔。
<link rel="preload" >
預(yù)加載可以一定程度上降低首屏的加載時(shí)間，因?yàn)榭梢詫⒁恍┎挥绊懯灼恋匾奈募雍蠹虞d肛跌，唯一缺點(diǎn)就是兼容性不好转唉。
懶加載
懶加載的原理就是只加載自定義區(qū)域（通常是可視區(qū)域酝掩，但也可以是即將進(jìn)入可視區(qū)域）內(nèi)需要加載的東西原朝。對(duì)于圖片來說鞠评，先設(shè)置圖片標(biāo)簽的 src 屬性為一張占位圖剃幌，將真實(shí)的圖片資源放入一個(gè)自定義屬性中，當(dāng)進(jìn)入自定義區(qū)域時(shí)抖棘，就將自定義屬性替換為 src 屬性，這樣圖片就會(huì)去下載資源，實(shí)現(xiàn)了圖片懶加載芙盘。
懶加載不僅可以用于圖片，也可以使用在別的資源上。比如進(jìn)入可視區(qū)域才開始播放視頻等等巩剖。
CDN
CDN 的原理是盡可能的在各個(gè)地方分布機(jī)房緩存數(shù)據(jù)曙聂，這樣即使我們的根服務(wù)器遠(yuǎn)在國外，在國內(nèi)的用戶也可以通過國內(nèi)的機(jī)房迅速加載資源榆苞。
因此，我們可以將靜態(tài)資源盡量使用 CDN 加載赊琳，由于瀏覽器對(duì)于單個(gè)域名有并發(fā)請(qǐng)求上限，可以考慮使用多個(gè) CDN 域名。并且對(duì)于 CDN 加載靜態(tài)資源需要注意 CDN 域名要與主站不同，否則每次請(qǐng)求都會(huì)帶上主站的 Cookie婶博，平白消耗流量叹阔。
