文档介绍：Web前端性能优化 实践与提高
邢世康
焦点科技股份有限公司
一个网页从开始加载到完全载入
最长你能“hold”住多久?
普通人的接受范围为8s之内
根据yahoo曾做过的统计:
慢500ms意味着20%的用户放弃访问google
慢400ms意味着5%-9%的用户放弃访问yahoo!
慢100ms意味着1%的用户放弃在amazon上交易
450,000访问次数
15,000,000页面浏览量
每天,我们有:(3年前)
MIC中国制造网
我们要保障:
页面平均响应时间为2s-3s
页面访问过程:
DNS查询
建立连接
HTTP
渲染页面
GET /login
HTTP/ 200 OK
发送请求
服务器响应
接收数据
预处理
缓存
…
时间线
坐而思,不如起而行
Gzip压缩
压缩合并js、css
配置ETag
避免404
减少cookie体积
合理使用cookie
Js放在页面底部
减少dom数量
设置expires、cache-contorl
减少dns查找次数
缓存ajax
子域名划分页面内容
CDN
。。。
今天我们的目标:
分享几套一劳永逸、通用的前端性能优化方案;
讲述探索这些方案的开发思路及所尝试的途径;
服务器动态压缩、合并静态文件
图片懒加载
BigPipe
1
服务器动态压缩、合并静态文件
1s
1s
1s
1s
存在的问题?
静态文件在开发状态与发布状态的最佳形式存在差异:
开发状态:代码的清晰、易读、易维护;
发布状态:请求数少、体积小;
货物
开发环境
发布环境
文件系统
或缓存
服务器
Minify,服务器压缩、合并、
缓存设置
Filter处理
还原常规请求
自动实现
开发、发布的最佳状态
旧方案
JSTL+配置XML
新方案
缓存处理
域名管理
统一规划
…
预先压缩
缓存、版本控制
memcache
这样做就够了吗?还能做些什么??
两种存在的场景:
压缩、合并后的文件>100k;
响应页面由多个页面组成:include、import等;
得出结论:
一个响应页面存在多个js,这个事实无法避免;
阻塞加载
并行加载、预加载:
> 1个主机
2个主机速度提高一倍
各个浏览器的并行下载数
2个主机是比较合适的
使用一个子域名处理静态文件,实现并行下载,提高加载速度。