前端性能统计与优化

前端性能统计与优化

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 展现数据

数据报警

---