2016/12/21前端性能优化

体验与性能优化

---

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做缓存。
• 根据实际情况采用服务端渲染。