本篇主要介绍了一下performance Timing的一系列指标项,然后根据这些指标项如何检测页面的domready,load等消耗的时间。

参考文档:
一般来说,如果需要知道页面的domready消耗的时间或者load的时间,我们会需要在页面中的某些地方加入new Date()的代码来实现.例如下方:

  1. <html>
  2. <head>
  3. </head>
  4. <script type=“text/javascript”>
  5. var t1 = new Date();
  6. </script>
  7. <body>
  8. </body>
  9. <script type=“text/javascript”>
  10. $r(“domready”, function(){
  11. var t2 = new Date();
  12. });
  13. </script>
  14. </html>

这种方法最要命的是,我们要在页面中加上N个时间点,不改动页面就获取不到domready的时间。

好消息是:通过HTML5 Performance API,可以获取到页面的一些关键点的时间。

很遗憾的是,只能支持IE9+,Chrome11+,Firefox7+的浏览器~ 不过如果是用作内部检测或者页面的改版前后对比,那么还是有一定帮助的。

先把官网上面的一系列指标罗列出来,并且尝试翻译了一下。

prop description
unloadEventStart Gets a value that represents the time that the previously loaded document began to be removed from the window object so that the current document could be loaded.
前一个文档document卸载开始的时间
unloadEventEnd  Gets a value that represents the time when the previously loaded document was removed from the window object so that the current document could be loaded.
前一个文档document卸载结束的时间
redirectStart If the document loaded into the window object was served from a different server due to redirection requests from the server hosting the initial URL specified by the user, this property gets the time the redirection request was started.
redirection开始的时间(如果页面是跳转页面的话)
redirectEnd  If the document loaded into the window object was served from a different server due to redirection requests from the server hosting the initial URL specified by the user, this property gets the time the redirection request was completed.
redirection完成的时间(如果页面是跳转页面的话)
navigationStart  Gets the time of the initial navigation action for the document that is loaded by the window object.
文档document初始化开始导航的时间
connectStart  Gets the time when a connection was requested for the document that is loaded by the window object.
文档document开始发送请求的时间
domainLookupStart Gets the time when the domain name request was started for the document that is loaded by the window object.
域名解析请求开始的时间
domainLookupEnd  Gets the time when the domain name request was completed for the document that is loaded by the window object.
域名解析请求完成的时间
connectEnd Gets the time when a connection was established for the document that is loaded by the window object.
文档document请求已经建立的时间
fetchStart Gets the time when the document loaded by the window object is requested from the hosting server.
文档document开始向服务器请求的时间
requestStart Gets a value that represents the time when the document that was loaded by the window object was requested from the hosting server.
文档document开始向服务器请求的时间
responseStart Gets a value that represents the time when a response began to be received from the server hosting the document loaded by the window object.
文档document从服务器端得到响应的开始时间
domLoading  Gets the time when the DOM begins to load for the document that is loaded by the window object.
页面DOM结构准备载入的时间
responseEnd  Gets the time when a response is completed by the server that hosts the document that is loaded into the window object.
文档document服务器端响应结束的时间
domInteractive Gets the time when the DOM begins to process user events for the document that is loaded by the window object.
页面DOM结构开始处理用户自定义事件的时间
domContentLoadedEventStart Gets the time when the DOM content began to load into the document that is loaded by the window object.
页面DOM结构载入开始的时间
domContentLoadedEventEnd Gets the time when the DOM content finished loading into the document that is loaded by the window object.
页面DOM结构载入结束的时间
domComplete  Gets a value that represents the time when the Document Object Model (DOM) is initialized for the document that is loaded by the window object.
页面DOM结构已经初始化完毕的时间
loadEventStart Gets the time when the onload event for the IHTMLBodyElement element started.
针对documentonload事件开始的时间
loadEventEnd  Gets the time when the onload event for the body element completed.
针对documentonload事件完成的时间

当然,只有这些数据是没啥用的,我们需要知道的是通常意义下,我们所说的domready,load…的消耗时间是多少呢?

按照以上的数值解释,做了以下一套的算法:

指标值 指标算法
页面网络连接的耗费时间 requestStart – (connectStart+(redirectEnd-redirectStart)+(domainLookupEnd-domainLookupStart))
页面等待响应的耗费时间 responseEnd – requestStart
页面DOM渲染的耗费时间(domready) domContentLoadedEventEnd – requestStart
页面Load完成的耗费时间(onload) loadEventEnd  – requestStart
页面CSS渲染的时间 domComplete – domContentLoadedEventEnd

有两点需要注意一下:
1. domready和load的开始时间都是从requestStart的点开始算起的。
2. 发现domContentLoadedEventEnd之后有一个domComplete的时间,也就是DOM结构稳定之后到所谓的初始化完毕,中间仍然有一个过程。所以我们猜测是CSS的渲染时间(不包括图片下载)。

随后查看了一下Firebug的网络下的时间检测,数值和上述的这套计算方法基本一致。

最后附图一张,展示了这些Timing的流程(摘自http://www.cnblogs.com/_franky/archive/2011/11/07/2238980.html)

本文作者:admin 转载请注明来自:携程设计委员会