使用performance api监测页面性能
- - jackyrong对于前端开发来说,知道整个页面从开始加载到有内容展示出来的时间是很重要的事情. 通常我们要知道页面加载的时间的话.是采用计算几个关键的时间点的方法来得出页面加载的时间.但是这个方式存在一些问题,比如:我们不知道浏览器在开始解析页面之前卸载前一个文档,解析dns的时间. 那么performance API是啥,能做啥和不能做啥呢.
使用performance api监测页面性能
标签：
performance
api
页面
| 发表时间：2013-08-22 13:15 | 作者：
出处：http://jackyrong.iteye.com
http://www.alloyteam.com/2012/11/performance-api-monitoring-page-performance/
对于前端开发来说,知道整个页面从开始加载到有内容展示出来的时间是很重要的事情.
通常我们要知道页面加载的时间的话.是采用计算几个关键的时间点的方法来得出页面加载的时间.但是这个方式存在一些问题,比如:我们不知道浏览器在开始解析页面之前卸载前一个文档,解析dns的时间.
那么performance API是啥,能做啥和不能做啥呢?
首先,performance这货素html5 的草案,目前ie9,chrome11+,firefox&+已经提供了支持,用来提供浏览器级别的监控数据,可以在猛戳这里查看文档http://w3c-test.org/webperf/specs/NavigationTiming/. 其次,他只能对和当前的html文档做检测,而不能检查html中资源的情况.
这个API主要包括如下2个接口
PerformanceNavigation 主要反应用户访问页面的形式和关于访问重定向的一些相关信息
PerformanceTiming 文档解析各个步骤的耗时. 这个是我们在测试页面性能的时候需要用的东东,先上个timing的图.
[img]
http://w3c-test.org/webperf/specs/NavigationTiming/timing-overview.png
[/img]
具体的含义:
.navigationStart 准备加载页面的起始时间
.unloadEventStart 如果前一个文档和当前文档同源,返回前一个文档开始unload的时间
.unloadEventEnd 如果前一个文档和当前文档同源,返回前一个文档开始unload结束的时间
.redirectStart 如果有重定向,这里是重定向开始的时间.
.redirectEnd 如果有重定向,这里是重定向结束的时间.
.fetchStart 开始检查缓存或开始获取资源的时间
.domainLookupStart 开始进行dns查询的时间
.domainLookupEnd dns查询结束的时间
.connectStart 开始建立连接请求资源的时间
.connectEnd 建立连接成功的时间.
.secureConnectionStart 如果是https请求.返回ssl握手的时间
.requestStart 开始请求文档时间(包括从服务器,本地缓存请求)
.responseStart 接收到第一个字节的时间
.responseEnd 接收到最后一个字节的时间.
.domLoading ‘current document readiness’ 设置为 loading的时间 (这个时候还木有开始解析文档)
.domInteractive 文档解析结束的时间
.domContentLoadedEventStart DOMContentLoaded事件开始的时间
.domContentLoadedEventEnd DOMContentLoaded事件结束的时间
.domComplete current document readiness被设置 complete的时间
.loadEventStart 触发onload事件的时间
.loadEventEnd onload事件结束的时间
通过计算这些时间消耗,我们能得出页面是在文档解析的时候消耗的时间很多还是的等等连接的时候消耗的时间多.
这个接口还有啥缺陷?
暂时还木有真正开始解析dom文档的时间,不过这个ie9,有个私有属性 msFirstPaint chrome下则是chrome.loadTimes().firstPaintTime
已有 0 人发表留言，猛击->> 这里<<-参与讨论
ITeye推荐
对于前端开发来说,知道整个页面从开始加载到有内容展示出来的时间是很重要的事情.
通常我们要知道页面加载的时间的话.是采用计算几个关键的时间点的方法来得出页面加载的时间.但是这个方式存在一些问题,比如:我们不知道浏览器在开始解析页面之前卸载前一个文档,解析dns的时间.
那么performance API是啥,能做啥和不能做啥呢?
首先,performance这货素html5 的草案,目前ie9,chrome11+,firefox&+已经提供了支持,用来提供浏览器级别的监控数据,可以在猛戳这里查看文档http://w3c-test.org/webperf/specs/NavigationTiming/. 其次,他只能对和当前的html文档做检测,而不能检查html中资源的情况.
这个API主要包括如下2个接口
PerformanceNavigation 主要反应用户访问页面的形式和关于访问重定向的一些相关信息
PerformanceTiming 文档解析各个步骤的耗时. 这个是我们在测试页面性能的时候需要用的东东,先上个timing的图.
[img]
http://w3c-test.org/webperf/specs/NavigationTiming/timing-overview.png
[/img]
具体的含义:
.navigationStart 准备加载页面的起始时间
.unloadEventStart 如果前一个文档和当前文档同源,返回前一个文档开始unload的时间
.unloadEventEnd 如果前一个文档和当前文档同源,返回前一个文档开始unload结束的时间
.redirectStart 如果有重定向,这里是重定向开始的时间.
.redirectEnd 如果有重定向,这里是重定向结束的时间.
.fetchStart 开始检查缓存或开始获取资源的时间
.domainLookupStart 开始进行dns查询的时间
.domainLookupEnd dns查询结束的时间
.connectStart 开始建立连接请求资源的时间
.connectEnd 建立连接成功的时间.
.secureConnectionStart 如果是https请求.返回ssl握手的时间
.requestStart 开始请求文档时间(包括从服务器,本地缓存请求)
.responseStart 接收到第一个字节的时间
.responseEnd 接收到最后一个字节的时间.
.domLoading ‘current document readiness’ 设置为 loading的时间 (这个时候还木有开始解析文档)
.domInteractive 文档解析结束的时间
.domContentLoadedEventStart DOMContentLoaded事件开始的时间
.domContentLoadedEventEnd DOMContentLoaded事件结束的时间
.domComplete current document readiness被设置 complete的时间
.loadEventStart 触发onload事件的时间
.loadEventEnd onload事件结束的时间
通过计算这些时间消耗,我们能得出页面是在文档解析的时候消耗的时间很多还是的等等连接的时候消耗的时间多.
这个接口还有啥缺陷?
暂时还木有真正开始解析dom文档的时间,不过这个ie9,有个私有属性 msFirstPaint chrome下则是chrome.loadTimes().firstPaintTime
已有 0 人发表留言，猛击->> 这里<<-参与讨论
ITeye推荐
相关 [performance api 页面] 推荐：
MySQL的Performance Schema库
- - 数据库 - ITeye博客Performance Schema是MySQL自带的、较为底层的性能监控特性，提供一系列、具备自定义收集粒度的监控体系. 对MySQL服务执行过程中的各项事件(Events)的分析尤为重视. Performance Schema的精细化控制，主要通过performance_schema库下的一系列setup表来实现.
Elasticsearch Performance Tuning Practice at eBay
- -Elasticsearch is an open source search and analytic engine based on Apache Lucene that allows users to store, search, analyze data in near real time. This document summarizes the challenges as well as the process and tools that the Pronto team builds to address the challenges in a strategic way.
译｜High-Performance Server Architecture
- - 掘金 架构本文的目的是分享我多年来关于如何开发某种应用程序的一些想法，对于这种应用程序，术语“服务”只是一个无力的近似称呼. 更准确地说，将写的与一大类程序有关，这些程序旨每秒处理大量离散的消息或请求. 网络服务通常最适合此定义，但从某种意义上讲，实际上并非所有的程序都是服务. 但是，由于“高性能请求处理程序”是很糟糕的标题，为简单起见，倒不如叫“服务”万事大吉.
ORACLE SQL Performance Analyzer的使用
- - CSDN博客数据库推荐文章通过 SPA，您可以根据各种更改类型（如初始化参数更改、优化器统计刷新和数据库升级）播放特定的. SQL 或整个 SQL 负载，然后生成比较报告，帮助您评估它们的影响.. 在 Oracle Database 11g 之前的版本中，我必须捕获所有 SQL 语句，通过跟踪运行这些语句，. 然后得到执行计划 — 这是一项极其耗时又极易出错的任务.
Api Blocking
- - xiaobaoqiu Blog4.RateLimiter实现限流. 接口限流是保证系统稳定性的三大法宝之一(缓存, 限流, 降级).. 本文使用三种方式实现Api限流, 并提供了一个用Spring实现的Api限流的简单Demo, Demo的git地址: https://github.com/xiaobaoqiu/api-blocking.
tsung: 好文: PHP performance tips - Google Webmaster
- 小汐 - Planet DebianTWGoogle 提供的 PHP 效能調校(Optimize performance)的幾點原則, 詳細可見此文:. 原文: Let's make the web faster - PHP performance tips. 作者: Eric Higgins, Google Webmaster. 此文內容很短, 講得都是大方向, 主題內容如下:.
SQL Performance Analyzer SPA常用脚本汇总
- - CSDN博客数据库推荐文章附件为 一个SPA报告 spa_buffergets_summary. SQL 性能分析器 SQL Performance Analyzer SPA. Oracle Database 11g 引入了 SQL 性能分析器；使用该工具可以准确地评估更改对组成工作量的 SQL 语句的影响. SQL 性能分析器可帮助预测潜在的更改对 SQL 查询工作量的性能影响.
18 Command Line Tools to Monitor Linux Performance(转)
- - Linux - 操作系统 - ITeye博客This list of commands shown here are very enough for you to pick the one that is suitable for your monitoring scenario.. Top command is a performance monitoring program which is used frequently by many system administrators to monitor Linux performance and it is available under many.
[Java Performance] 缓冲I/O(Buffered I/O)
- - CSDN博客编程语言推荐文章缓冲I/O(Buffered I/O). InputStream.read()以及 OutputStream.write()操作的对象是单个字节. 根据它们访问的资源的不同，使用这些方法可能会相当慢. 比如在使用 FileInputStream.read()时，速度会慢的令人发指. 因为每次调用都会访问操作系统的内核去拿到1个字节的数据.