体验与性能优化
1. 体验优化
使用lazyload实现懒加载，优化体验与性能。
使用连续的jpg与交错的png。
移动端采用fastclick + touch-action: manipulation实现消除300ms延迟。
使用@media与1x、2x图片优化体验。
数据多级兜底（服务端、服务端缓存、本地存储、脚本内置硬兜底）。
2. 性能标准
| 时间 | 感觉 |
|---|---|
| 0~100ms | 很快 |
| 100~300ms | 有一点点慢 |
| 300~1000ms | 机械在工作呢 |
| >1000ms | 先干点别的吧 |
| >10000ms | 不能用了 |
- onload 时间：1000ms 以内；
- 首屏可见时间：300ms 以内；
- 秒开率：80% 以上；
- 首屏css与js请求数总计不超过5个；
2.1 图片约束
- 首屏大小限制：400kb；
- 图片限制：100kb / 张；
- 禁止图片使用空地址；
2.2 请求优化
- cdn combo;
- 首屏 CSS 请求保证两个以内；
- 首屏 JS 请求保证保证三个以内；
- 首屏所有请求数小于 20 个；
- 每个页面仅允许使用 1 个字体文件（icon font）；
- 字体文件仅使用 ttf 文件即可，如果文件较小，可将其转换为 base64 格式；
- 禁止使用 iframe；
- 禁止资源、图片重定向；
- 小于 10k 的背景图片尽可能的转换为 base64 格式；
2.3 其它优化
- css写在head，script写在body。
- 在cdn支持的情况下，使用cdn处理图片尺寸。
- 代码上线前一定经过混淆压缩。
- 按需打包与加载：split coding或动态路由。
- cdn 资源需收敛到 zos(as).alipayobjects.com 域名；
- 常用的小图片base64化。
- 使用webp格式减少图片体积。
- 服务端开启GZIP压缩。
- 首屏数据可以按需直接放在页面中不通过ajax获取。
- 合理使用max-age做缓存。
- 根据实际情况采用服务端渲染。
