前端性能统计与优化

前端性能统计与优化

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

数据报警


猜你喜欢

转载自blog.csdn.net/jiaojiao51290/article/details/113179439