受访页面

陈梦阳 发表于 2015年07月21日 16:59

构成网站的页面元素会很庞大,加载一个页面时需要加载很多第三方的插件、广告、和跨域的资源,这些资源的加载受到很多因素的影响,这些资源出现性能问题是会造成统计网页加载速度缓慢,但这部分资源的加载往往并非网站的核心业务,一个广告的加载失败或者跨域图片加载缓慢并不会影响到用户正常业务使用及交互体验。据此为更加准确的去衡量浏览器端真实的用户体验数,BI将影响页面加载时间的五个技术指标细分为以下四个时间段:

  1. 白屏时间:请求发起到浏览器收到第一个字节数据的时间

    00155ae07967d722d8f16b3efe20a8a

  2. 首屏时间:header标签中核心资源加载完的时间

    00155ae07ad82b20bd01123f63405d3

  3. 启动时间:DOM文档结构加载完的时间

    00155ae07d5d89f122a91004ef1bd7c

  4. 页面就绪时间:包括页面渲染时间、图片的加载时间、外部引用及第三方资源加载完成的时间

    00155ae07ee83f0f64770d71baf3c74

此外,Bi 提供了强大的 session trace 功能收集影响页面加载时间的每一个因素,按照访问页面来诊断性能瓶颈。

甘特图

抓取用户缓慢的请求,获取 browser trace 的相关信息,包括:用户访问时间、用户访问 IP,地点、浏览器类型和版本号、响应时间等。用户访问时的响应时间甘特图,包括:Redirect、Cache、DNS、TCP、Request、Response、DOM、Page loading 时间,同时能深入到 Dom加载细节、Page loading 细节。

00155ae0967b57550cc7b771ea6ace4

详细资源列表

00155ae098c0eea921bed89d01be8a0

资源列表时序图

00155ae09a9661981ad0c863ed48960

按照资源类型、域名分类统计

00155ae09bfd193f8014a5b03a27f8e

回复

shaohua.deng发表于 2017年06月06日 16:41

请详细解释一下甘特图中各阶段的意义,包括Unload, Redirect, Cache, DNS, TCP, Request, Response, DOM, Page等.


最好能够按照下面链接中mozilla的定义,说明一下每个阶段的开始事件和结束事件.

https://developer.mozilla.org/en-US/docs/Web/API/PerformanceTiming


谢谢!

mayanruOneAPM发表于 2017年06月07日 18:36

新版文档上线了,过段时间这个会下线,http://docs-bi.oneapm.com/这是新版文档,您参考下,这里有解释哈

619139691发表于 2017年07月22日 20:17

上文中“BI将影响页面加载时间的五个技术指标细分为以下四个时间段”一句没看明白,

请问这四个时间阶段:白屏时间、首屏时间、启动时间、页面就绪时间和页面加载时间的五个指标“

Request queuing、Web application、Network、DOM processing”间是什么关系?

您需要登录后才可以回复