玩转OneAPM Browser Insight 性能指标

近期OneAPM Browser Insight 在原有的五个指标(请求排队、网络、web应用程序、页面加载、资源下载)的基础上增加了5个指标(白屏时间,首屏时间,页面加载完成时间, 资源下载完成时间,整页时间)。
    这10个指标分别都是什么意思?和我的网站又有什么关系?为什么TOPN页面会惊现平均时间为1分钟?是谁在拖后腿?
这篇文章将解答大家心中的困惑。
 

性能指标不在多,找到适合自己业务的,作为判断标准才是最好的,本期主要带领大家找到适合自己业务性能指标

用户打开一个页面的过程

从用户在浏览器地址栏里面输入一个网址,到用户最终看到页面,在页面上可以进行各种操作,简单分为一下几个过程
1、用户输入网址,浏览器发出请求。(主要是网络耗时)
2、web服务器接到请求,处理请求,(主要是web服务器耗时)
3、web服务器返回数据,浏览器开始接受数据(主要是网络耗时)
4、浏览器边接受数据边加载页面中的脚本(下载js脚本等耗时)
5、浏览器下载页面中的样式、图片、视频等资源(下载图片等耗时)

OneApm Browser Insight 指标介绍

OneApm Browser Insight 10个指标从两个方面描述了网页加载过程

第一个方面 页面加载5阶段的耗时,用于分片运营(请求排队、网络、web应用程序、页面加载、资源下载)
第二个方面 页面加载过程中的5个时间点,分别对应用户感知网页加载过程中的5个关键时间点和页面状态

分段运营的5个指标中,请求排队和web应用程序 是从Ai 中获取到的
网络=总网络时间-web应用程序耗时
页面加载时间段=页面加载完成时间-白屏时间
资源下载时间段=资源下载完成时间-面加载完成时间
在试用的过程中,当应用程序异常时候,web应用程序面积就会增大
当网络异常时候,网络的面积就会增大

                 平时大家看到页面加载时段或者资源下载时段面积大,是因为在一般情况下,web和网络都不是性能的瓶颈,性能瓶颈往往在复杂的前端页面和资源的加载过程
                 

页面加载过程中5个关键的时间点

白屏时间:打开一个页面感觉屏幕从白色开始变化时刻
首屏时间:页面刚开始加载是杂乱无章,无样式的(在网速缓慢时候特别明显),当页面样式加载完毕的时候,页面就好看多了

页面加载完成时间:

                   页面加载完成时间是和业务关系最为密切的时间点,大量js业务逻辑都在这个时间点触发
                  如果你发现页面上一个按钮开始无法点击,过一会可以点击了,那么可以点击的时间点就是页面加载完成时间
                   对于移动端或者pc端,有很多应用是js控制出现一个loading动画,当有数据了在去掉loading,
                   js控制出现loading的时刻就是页面加载完成时间
                   如果页面很长,开始没有滚动条,当滚动条出现的时候,就是页面加载完成时间
                   

 
整页时间:页面彻底加载完成的时间,一般情况下资源下载完成时间和整页面时间很接近

影响 页面加载时段 的主要因素

1: 基础的网络质量
2: 网页html文件的大小 例如 你是10k,1m 10m
3:是页面中通过scrtpt标签引入的脚本下载和执行,包括head中的也包括body中

   因为一个浏览器同时可以可以下载的文件是有限的,同一个域名下可以同时下载的文件也是有限的
   总的来说一般的浏览器为2~4 性能好点的浏览器是8个左右
   所以这个阶段网页中下载 css,图片等资源,都会影响页面加载时段的面积
   因为css影响页面样式,所以一般放在head里面,公共的js文件放在head里面,业务的js建议通过动态加载
 

影响 资源下载时段 的主要因素

1:基础的网络质量
2:页面中图片、视频、iframe 嵌套页,广告等,都在这个阶段下载
3:下载资源个数和域名数,因为浏览器从同一个域名下同时下载资源是有限的,所以域名个数个和下载文件的个数都会影响整体性能
所以一般都会把一个域名下载资源分散到3个左右域名下,同时下载,提高页面性能
4:第三方资源 例如百度统计、谷歌统计、 百度地图 一般都会在这个阶段加载,如果第三方资源处现在问题,资源下载时段面积也会增大

查看那些资源的下载拖慢了整个页面的速度

的参考

http://biyinjishi.blog.163.com/blog/static/2591020362016319101520511
http://biyinjishi.lofter.com/post/1de35feb_aadb062
http://blog.sina.com.cn/s/blog_15e2eae990102wam3.html
http://blog.sina.com.cn/s/blog_15e2eae990102wam6.html
http://blog.tianya.cn/post-7182283-114524159-1.shtml
http://blog.tianya.cn/post-7182283-114524435-1.shtml
http://blog.tianya.cn/post-7199130-114081604-1.shtml
http://blog.tianya.cn/post-7199130-114525029-1.shtml
http://blog.tianya.cn/post-7199130-114525147-1.shtml
http://blog.tianya.cn/post-7199130-114525394-1.shtml
http://blog.tianya.cn/post-7199130-114525579-1.shtml
http://blog.tianya.cn/post-7199130-114525677-1.shtml
http://blog.tianya.cn/post-7199130-114525793-1.shtml
http://blog.tianya.cn/post-7199130-114525891-1.shtml
http://blog.tianya.cn/post-7199130-114526031-1.shtml
http://blog.tianya.cn/post-7199130-114526111-1.shtml
http://www.cnblogs.com/SA-Jim/p/5407381.html
http://www.cnblogs.com/SA-Jim/p/5407387.html
http://www.cnblogs.com/SA-Jim/p/5407397.html
http://www.cnblogs.com/SA-Jim/p/5407404.html
http://www.cnblogs.com/SA-Jim/p/5407416.html
http://www.cnblogs.com/SA-Jim/p/5407426.html
http://www.cnblogs.com/SA-Jim/p/5407441.html
http://www.cnblogs.com/SA-Jim/p/5407454.html
http://baa.bitauto.com/bj/thread-9016278.html#131628488
http://bbs.pcauto.com.cn/topic-10966610.html
http://baa.bitauto.com/bj/thread-9016302.html#131629021
http://bbs.pcauto.com.cn/topic-10967102.html
http://www.biyinjishi.com/kdoc/89456295/
http://www.biyinjishi.com/kdoc/89456282/
http://www.biyinjishi.com/kdoc/89456286/
http://www.biyinjishi.com/kdoc/89456283/
http://www.biyinjishi.com/kdoc/89456285/
http://www.biyinjishi.com/kdoc/89456290/
http://www.biyinjishi.com/kdoc/89456284/
http://www.biyinjishi.com/kdoc/89456289/
http://www.biyinjishi.com/kdoc/89456294/
http://www.biyinjishi.com/kdoc/89456281/
http://www.biyinjishi.com/kdoc/89456287/
http://www.biyinjishi.com/kdoc/89456288/
http://www.biyinjishi.com/kdoc/89456291/
http://www.biyinjishi.com/kdoc/89456292/
http://www.biyinjishi.com/kdoc/89456293/

时间: 2024-10-06 04:35:22

玩转OneAPM Browser Insight 性能指标的相关文章

【转】两款 Web 前端性能测试工具

前段时间接手了一个 web 前端性能优化的任务,一时间不知道从什么地方入手,查了不少资料,发现其实还是蛮简单的,简单来说说. 一.前端性能测试是什么? 前端性能测试对象主要包括: HTML.CSS.JS.AJAX 等前端技术开发的 Web 页面 影响用户浏览网页速度的因素主要有: 服务端数据返回.网络传输.页面渲染等 前端性能测试目的: 计算出包含页面渲染.网络传输以及服务器端解析等综合因素在内的加载时间指标,对该页面性能进行评估分析,找出影响性能的主要因素和瓶颈,并在此基础上,给出一定的优化建

2016年度 JavaScript 展望(上)

[编者按]本文作者为资深 Web 开发者 TJ VanToll, TJ 专注于移动端 Web 应用及其性能,是<jQuery UI 实践> 一书的作者. 本文系 OneAPM 工程师编译呈现,以下为正文的第一部分.点此阅读第二部分. 在过去的几年间,JavaScript 这种原本用于 Web 浏览器端的脚本语言,越来越多地出现在更广泛的软件应用中.现在,JavaScript 可用作服务器端代码,运行 iOS 与 Android 应用,甚至控制机器人.很难想象还有什么软件生态系统是 JavaSc

2016年度 JavaScript 展望(下)

[编者按]本文作者为资深 Web 开发者 TJ VanToll, TJ 专注于移动端 Web 应用及其性能,是<jQuery UI 实践> 一书的作者. 本文系 OneAPM 工程师编译呈现,以下为正文的第二部分.点此阅读第一部分. 本地移动 apps 在2015年,出现了一种新的基于 JavaScript 的移动应用开发类别:JavaScript Native.与基于 Cordova 或 PhoneGap 的应用不同,JavaScript 本地应用使用平台的本地控制与范型建立用户界面,无需涉

【转】 普及下网站前端知识【局域网、公网、混合网络】站点监测(上篇)

针对web前端的性能,一时间不知道入手的同学,可以看看:前端性能测试对象:HTML.CSS.JS.AJAX等前端技术开发的Web页面影响用户浏览网页速度的因素:服务端数据返回.网络传输.页面渲染,页面资源结构等前端性能测试目的:计算出包含页面资源结构.页面渲染.网络传输以及服务器端解析等综合因素在内的加载时间等指标,对该页面性能进行评估分析,找出影响性能的主要因素和瓶颈,并在此结果的基础上,给出一定的优化建议和解决方案,从而提升用户体验页面结构分析工具: YSlow/PageSpeed 通过网页

为什么选用 React 创建混合型移动应用?

[编者按]本文作者为 14islands 联合创始人.创新 Web 开发者 David Lindkvist,主要介绍有关混合型应用搭建的方方面面.文章系国内 ITOM 管理平台 OneAPM 编译呈现. 最近,我们有幸与 Fjord 合作,从零开始为其用户打造了一款 HMTL5 混合型应用. 混合型移动应用(Hybrid apps)可以借助多种 web 技术搭建应用,并将其打包为原生应用(Native apps)以适应于多种移动平台. 在本文中,我们将分析使用 React 与 Cordova 创

浅谈 OneAPM 在 express 项目中的实践

[编者按]OneAPM 运营团队,近日在 github 上发现了一篇文章,特别奉献给大家.本文作者王宇先生从2015年年初就开始使用我们的产品,也是OneAPM 的忠实用户. OneAPM 是一个优秀的性能监控平台.为什么我们要使用性能监控呢? 并不是为了炫耀我有多么酷的玩具,仅仅因为我们希望在问题发生的第一时间就能知道. 在第一时间发现问题,把问题解决于无形之中,总比出了大麻烦通宵达旦加班舒服得多. 然而有的人喜欢说:「有些问题留着也不会有什么影响.」但我觉得服务端的事情, 凡是冒烟的地方,终

Zabbix,Nagios,OneAPM Servers 安装部署

如何快速实现对 Linux 服务器的监控? 做过服务器监控的开发者几乎都知道 Zabbix 和 Nagios ,他们都是提供系统监控以及网络监控功能的开源解决方案,资历比较老.在不久前,这个市场迎来了一位新成员OneAPM Servers--本土服务器监控领域的后起之秀. OneAPM Servers 虽然是一个商业级的解决方案,但是跟两位老牌玩家一样,都是完全免费的.今天,我们针对如何快速实现对 Linux 服务器监控,来对比一下这3种监控软件的安装部署过程: 一.Nagios 监控 Linu

Zabbix,Nagios,OneAPM Servers 安装部署大比拼

如何快速实现对 Linux 服务器的监控? 做过服务器监控的开发者几乎都知道 Zabbix 和 Nagios ,他们都是提供系统监控以及网络监控功能的开源解决方案,资历比较老.在不久前,这个市场迎来了一位新成员 OneAPM Servers--本土服务器监控领域的后起之秀. OneAPM Servers 虽然是一个商业级的解决方案,但是跟两位老牌玩家一样,都是完全免费的.今天,我们针对如何快速实现对 Linux 服务器监控,来对比一下这3种监控软件的安装部署过程: Nagios 监控 Linux

网站延迟如何破?看看 OneAPM 有什么好法子

当下无论是使用手机还是个人电脑,我们都会遇到网页打不开,访问延迟,甚至直接崩溃的问题,归根结底都是应用性能问题.而缓慢的加载.问题脚本以及 Java 报错等都会导致用户体验不佳.当用户遇到这些问题时,他们往往很难通过专业语言进行表述,也不能把真正把实际场景「复现」给运营人员,给网页性能优化带来不少困难. 5月6日,国内 APM 应用性能管理行业领军企业 OneAPM 正式发布了新产品 Browser Insight ,这是一款基于真实用户体验的浏览器端性能管理工具,该产品推出主要就是为了解决性能