前端優(yōu)化總結(jié)
優(yōu)化用戶體驗(yàn)
文字 | 圖片 | 動(dòng)效 | 錯(cuò)誤頁(yè) |
---|---|---|---|
占位圖 | 占位圖,大小, 清晰度 | 流暢度莉掂,展示效果 | 展示效果,信息告知 |
優(yōu)化響應(yīng)時(shí)間
靜態(tài)資源
css | js | html | 圖片 | 音/視頻 |
---|---|---|---|---|
配置cdn, 瘦身壓縮 | 同css | 同css | 同css | 同css |
抽象公用模版怯疤,去除冗余址芯,選擇性緩存 | 同css | 同css | 字體圖標(biāo)践磅,CSS Sprite, 本地緩存(選擇性加密) | 本地緩存(選擇性加密) |
拆分,按需加載 | 拆分钳踊,按需加載 | |||
預(yù)渲染首屏(服務(wù)器) |
數(shù)據(jù)接口
渲染/應(yīng)用初始化
日志管理
客戶端HTTP協(xié)議緩存的研究
Web靜態(tài)資源緩存及優(yōu)化-美團(tuán)點(diǎn)評(píng)點(diǎn)餐
HTTP Headers - MDN
HTTP Header 詳解