前端性能统计与优化
1 为什么做这件事情
2 前端性能指标
3 如何统计与优化
为什么做这件事情
原因：页面速度影响用户体验，我们要不断加强用户体验。
亚马逊：加载时间每增加100MS，就会减少1%销售。
谷歌：加载10个结果0.4S，变成加载30个结果0.9S，降低20%的广告收入
时间就是金钱
效率就是生命
前端性能监控目的
目的：页面加载速度更快
前端性能指标
不就是页面加载完毕时间吗？ 图片
页面加载顺序
1，用户点击链接或者输入URL
2，下载完header
3，下载完html
4，下载完成所有的资源
白屏时间
用户可操作时间
总下载时间
前端性能指标
-
白屏时间
-
用户可操作时间
-
总下载时间
-
首屏时间
-
核心业务可用时间
前端性能统计与优化
统计的方式
非侵入式： Yslow, Pagespeed, Webpagetest, 17ce
侵入式： 插入JS代码
方案对比
- 容易程序
- 数据真实性
- 数据自动化
起始时间点
1 从header头开始
2 从用户点击开始
代码截图
方案对比
- 代码侵入性
- 样本完整性
- 数据代表性
白屏时间统计
白屏时间
- DNS查找
- TCP连接
- 发送请求
- 服务器响应
- 接收服务器内容
- header静态资源
白屏时间优化
- 选用速度好的DNS服务器
- JS CSS资源压缩与合并
- 使用CDN
- 静态资源缓存
- 启用GZIP
- JS放置在底部
用户可操作时间统计
- 监听onDomReady事件
用户可操作时间优化
- DOM结构精简，不要使用IFRAME
- 使用W3C html标准
首屏时间
- 监听首屏内最后一张图片onLoad事件。
首屏时间特殊情况
- 背景图片
- 没有图片
- 异步加载与渲染
首屏时间优化
- 去掉无意义的图片
- 使用恰当的图片格式
- 使用支持SPDY的服务器
- 静态资源使用独立域名，使用CDN
总下载时间
- 监听onLoad事件
数据收集
- 数据收集两种方式
- 数据存储两种方式
数据处理
-
离线处理
-
实时处理
数据展现
- 折线图
- 柱状图
- 地图
统计的流程
- 1 获得数据
- 2 收集数据
- 3 处理数据
- 4 展现数据
数据报警