體驗(yàn)與性能優(yōu)化
1. 體驗(yàn)優(yōu)化
使用lazyload實(shí)現(xiàn)懶加載，優(yōu)化體驗(yàn)與性能。
使用連續(xù)的jpg與交錯(cuò)的png。
移動(dòng)端采用fastclick + touch-action: manipulation實(shí)現(xiàn)消除300ms延遲。
使用@media與1x、2x圖片優(yōu)化體驗(yàn)。
數(shù)據(jù)多級(jí)兜底（服務(wù)端、服務(wù)端緩存、本地存儲(chǔ)、腳本內(nèi)置硬兜底）。
2. 性能標(biāo)準(zhǔn)
| 時(shí)間 | 感覺 |
|---|---|
| 0~100ms | 很快 |
| 100~300ms | 有一點(diǎn)點(diǎn)慢 |
| 300~1000ms | 機(jī)械在工作呢 |
| >1000ms | 先干點(diǎn)別的吧 |
| >10000ms | 不能用了 |
- onload 時(shí)間：1000ms 以內(nèi)；
- 首屏可見時(shí)間：300ms 以內(nèi)；
- 秒開率：80% 以上；
- 首屏css與js請(qǐng)求數(shù)總計(jì)不超過5個(gè)；
2.1 圖片約束
- 首屏大小限制：400kb；
- 圖片限制：100kb / 張；
- 禁止圖片使用空地址；
2.2 請(qǐng)求優(yōu)化
- cdn combo;
- 首屏 CSS 請(qǐng)求保證兩個(gè)以內(nèi)；
- 首屏 JS 請(qǐng)求保證保證三個(gè)以內(nèi)；
- 首屏所有請(qǐng)求數(shù)小于 20 個(gè)；
- 每個(gè)頁面僅允許使用 1 個(gè)字體文件（icon font）；
- 字體文件僅使用 ttf 文件即可，如果文件較小，可將其轉(zhuǎn)換為 base64 格式；
- 禁止使用 iframe；
- 禁止資源、圖片重定向；
- 小于 10k 的背景圖片盡可能的轉(zhuǎn)換為 base64 格式；
2.3 其它優(yōu)化
- css寫在head，script寫在body。
- 在cdn支持的情況下，使用cdn處理圖片尺寸。
- 代碼上線前一定經(jīng)過混淆壓縮。
- 按需打包與加載：split coding或動(dòng)態(tài)路由。
- cdn 資源需收斂到 zos(as).alipayobjects.com 域名；
- 常用的小圖片base64化。
- 使用webp格式減少圖片體積。
- 服務(wù)端開啟GZIP壓縮。
- 首屏數(shù)據(jù)可以按需直接放在頁面中不通過ajax獲取。
- 合理使用max-age做緩存。
- 根據(jù)實(shí)際情況采用服務(wù)端渲染。
