测试Web应用或网站在IE11和其他浏览器中的实际使用性能

标签: IE Web IE11 web 性能 性能测试 | 发表时间:2013-12-17 13:19 | 作者:iefans
出处:http://www.iefans.net

W3C Web 性能工作小组与 Google、Mozilla 和其他社区领导者通力合作,制订了导航定时、资源定时、用户定时和性能时间线接口的标准化规范,可以帮助您了解在您的 Web 应用程序中导航、获取资源以及运行脚本的实际使用性能。您可以使用这些接口来捕获并分析您的客户实际使用您的 Web 应用程序的体验,而不是依靠那种在人工环境中测试您的应用程序性能的合成测试。利用此定时数据,您可以确定从哪些方面改进您的 Web 应用程序的实际使用表现。IE11 对所有这些接口均提供支持。请查看性能定时 Test Drive 来查看这些接口的动态演示。

相关链接:

性能定时 Test Drive 允许您试用定时 API。
性能定时 Test Drive 允许您试用定时 API。

性能时间线

性能时间线规范已经作为一项 W3C 推荐发布,受 IE11 和 Chrome 30 完全支持。利用此接口,您可以获得导航、获取资源以及执行应用中运行的脚本期间所花费时间的端到端视图。此规范定义了所有性能指标需要实施的最低属性,以及开发人员可以用来检索任意类型性能指标的接口。

所有性能指标必须支持以下四种属性:

  • name。该属性存储性能指标的唯一标识符。例如,对于某个资源,它将会是该资源的已解析 URL。
  • entryType。该属性存储性能指标的类型。例如,对于某个资源的指标,它将会存储为 “resource”。
  • startTime。该属性存储性能指标的第一个已记录的时间戳。
  • duration。该属性存储按指标记录的事件的端到端持续时间。

所有定时数据都使用类型为 DOMHighResTimeStamps 的高解析度时间进行记录,该类型在 高解析度时间规范中有所定义。与 DOMTimeStamps 不同,该类型从 UTC 时间 1970 年 1 月 1 日起始以毫秒度量时间值,而高解析度时间值是从文档导航开始时至少以微秒的精度来度量时间值。例如,如果我使用 performance.now() 查看当前时间,则高解析度时间类似于 Date.now(),将会获得当前时间的如下解释说明:

> performance.now();
 
4038.2319370044793
 
 
> Date.now()
 
1386797626201

此时间值还具有不受时钟时间偏差或调整所影响这一优势。您还可以查看 What Time Is It Test Drive 以了解高解析度时间的使用。

您可以使用以下接口来检索在调用时记录的一系列性能指标。使用 startTime 和 duration 以及该指标提供的任何其他属性,您可以获取一个页面性能(等同于客户实际使用过程的性能)的端到端时间线视图。

PerformanceEntryList getEntries();
 
PerformanceEntryList getEntriesByType(DOMString entryType);
 
PerformanceEntryList getEntriesByName(DOMString name, optional DOMString entryType);

getEntries 方法在页面上返回所有性能指标,而其他方法会基于名称或类型返回特定的项目。我们期望大部分开发人员在所有指标列表上仅使用 JSON stringify,并将结果发送到他们的服务器进行分析,而不是在客户端进行分析。

让我们来进一步了解各个不同的性能指标:导航、资源、标记和度量。

导航定时

导航定时接口为导航到您的 Web 应用程序的每个阶段提供精确的时间度量。 导航定时 L1 规范已经作为一项 W3C 推荐发布,受 IE9 以及后续版本、Chrome 28 和 Firefox 23 的完全支持。 导航定时 L2 规范是首份公开工作草案,受到 IE11 支持。

利用导航定时,开发人员不仅可以获取精确的端到端页面加载时间,包括从服务器获取页面所用时间,而且还可以获取在每个网络和 DOM 处理阶段所花费时间的明细:unload(卸载)、redirect(重定向)、app cache(应用缓存)、DNS、TCP、request(请求)、response(响应)、DOM processing(DOM 处理)以及 load event(加载事件)。下面的脚本使用导航定时 L2 来获取该详细信息。此指标的条目类型为 “navigation”,而名称为 “document”。请在 IE Test Drive 网站上查看 导航定时的演示

<!DOCTYPE html>
 
<html> 
 
<head></head>
 
<body>
 
<script>
 
 function sendNavigationTiming() {
 
   var nt = performance.getEntriesByType('navigation')[0];
 
   var navigation = ' Start Time: ' + nt.startTime + 'ms';
 
   navigation += ' Duration: ' + nt.duration + 'ms';
 
   navigation += ' Unload: ' + (nt.unloadEventEnd - nt.unloadEventStart) + 'ms';
 
   navigation += ' Redirect: ' + (nt.redirectEnd - nt.redirectStart) + 'ms';
 
   navigation += ' App Cache: ' + (nt. domainLookupStart - nt.fetchStart) + 'ms';
 
   navigation += ' DNS: ' + (nt.domainLookupEnd - nt.domainLookupStart) + 'ms';
 
   navigation += ' TCP: ' + (nt.connectEnd - nt.connectStart) + 'ms';
 
   navigation += ' Request: ' + (nt.responseStart - nt.requestStart) + 'ms';
 
   navigation += ' Response: ' + (nt.responseEnd - nt.responseStart) + 'ms';
 
   navigation += ' Processing: ' + (nt.domComplete - nt.domLoading) + 'ms';
 
   navigation += ' Load Event: ' + (nt.loadEventEnd - nt.loadEventStart) + 'ms';
 
   sendAnalytics(navigation);
 
 }
 
</script>
 
</body>
 
</html>

通过查看每个网络阶段所用的详细时间,您可以更好地诊断并修复您的性能问题。例如,如果您发现重定向时间很长,则可以考虑不使用重定向,如果 DNS 时间很长,则使用 DNS 缓存服务,如果请求时间过长,则可以使用距离您的用户更近的 CDN,或者如果响应时间过长,则可以使用 GZip 压缩您的内容。请观看 视频了解改进网络性能的提示和窍门。

两个导航定时规范版本的主要区别在于访问定时数据的方式以及度量时间的方式。L1 接口定义了 performance.timing 对象下的这些属性,从 1970 年 1 月 1 日开始以毫秒讲。L2 接口允许使用性能时间线方法检索相同的属性,使得这些属性可以更易于放置到时间线视图中,并利用高解析度的计时器记录这些属性。

在导航定时前,开发者通常会通过在文档的头部编写 JavaScript(如下面的代码示例所示),来尝试度量页面加载性能。请在 IE Test Drive 网址查看此方法的 演示

<!DOCTYPE html>
 
<html>
 
<head>
 
<script>
 
    var start = Date.now();
 
 
 
    function sendPageLoad() {
 
        var now = Date.now();
 
        var latency = now - start;
 
        sendAnalytics('Page Load Time: ' + latency);
 
    }
 
 
 
</script>
 
</head>
 
<body onload='sendPageLoad()'>
 
</body>
 
</html>

不过,此方法不会准确度量页面加载性能,因为它不会包括从服务器获取页面的时间。另外,在文档的头部运行 JavaScript 通常是比较差的性能模式。

资源定时

资源定时提供在页面中获取资源的精确定时信息。与导航定时相似,资源定时提供有关重定向、DNS、TCP、请求和已获取资源的响应阶段的详细定时信息。资源定时规范已经作为 W3C 备选推荐发布,IE10 和 Chrome 30 及其后续版本均提供支持。

以下的示例代码使用 getEntriesByType 方法获取以 <img> 元素开头的所有资源。资源的输入类型为 “resource”,名称则为该资源的已解析 URL。请在 IE Test Drive 网址查看 资源定时的演示

<!DOCTYPE html>
 
<html>
 
  <head>
 
  </head>
 
  <body onload='sendResourceTiming()'>
 
    <img src='http://some-server/image1.png'>
 
    <img src='http://some-server/image2.png'>
 
 
 
    <script>
 
        function sendResourceTiming() 
 
        {
 
            var resourceList = window.performance.getEntriesByType('resource');
 
            for (i = 0; i < resourceList.length; i++)
 
            {
 
                if (resourceList[i].initiatorType == 'img') 
 
                {
 
                    sendAnalytics('Image Fetch Time: ' + resourceList[i].duration);
 
                }
 
            }
 
        }
 
    </script>
 
  </body>
 
</html>

出于安全考虑,跨域资源仅显示他们的开始时间和持续时间;详细的定时属性将设置为零。这有助于避免统计指纹的问题,这种情况下,有人可能会通过查看详细的网络时间来确认某个资源是否在您的缓存中,通过这种方法来尝试确定您在某个组织中的成员身份。跨域服务器如果希望与您共享定时数据,则它将会发送 timing-allow-origin HTTP 头。

用户定时

用户定时提供有关在应用程序中执行脚本、完成导航定时以及资源定时的详细定时信息,将提供详细的网络定时信息。用户定时允许您在与您的网络定时数据相同的时间线视图中显示脚本定时信息,从而全面而充分了解您的应用性能。 用户定时规范已经作为 W3C 备选推荐发布,IE10 和 Chrome 30 及其后续版本均提供支持。

用户定时接口定义了两个用于度量脚本定时的指标:标记和度量。标记代表在您的脚本执行期间在某个指定时间点的高解析度时间戳。度量表示两个标记之间的差别。

以下方法可以用于创建标记和度量:

void mark(DOMString markName);

void measure(DOMString measureName, optional DOMString startMark, optional DOMString endMark);

您一经向您的脚本添加了标记和度量,则您可以使用 getEntrygetEntryByTypegetEntryByName 方法来检索定时数据。标记输入类型为 “mark”,度量输入类型为 “measure”。

下面的示例代码使用标记和度量方法,来度量执行 doTask1() 和 doTask2() 方法所花费的时间量。请在 IE Test Drive 网址查看 用户定时演示

<!DOCTYPE html>
 
<html>
 
  <head>
 
  </head>
 
  <body onload='doWork()'>
 
    <script>
 
        function doWork() 
 
        {
 
            performance.mark('markStartTask1');
 
            doTask1();
 
            performance.mark('markEndTask1');
 
 
 
            performance.mark('markStartTask2');
 
            doTask2();
 
            performance.mark('markEndTask2');
 
 
 
            performance.measure('measureTask1', 'markStartTask1', 'markEndTask1');
 
            performance.measure('measureTask2', 'markStartTask2', 'markEndTask2');
 
 
 
            sendUserTiming(performance.getEntries());
 
        }
 
    </script>
 
  </body>
 
</html>

感谢 W3C Web 性能工作小组中的每一位成员为设计这些接口所提供的帮助,同时也感谢浏览器供应商迅速实施这一接口,并认真观察该接口的互操作性。利用这些接口,Web 开发者可以真正开始评测并了解可以从哪些方面着手来改进他们的应用的性能。

请在 IE11 中试用您的 Web 应用的性能度量接口,我们一如既往地期待通过 Connect 收到您的反馈。

谢谢!

Internet Explorer 项目经理 Jatinder Mann

This article addresses: http://www.iefans.net/ceshi-web-yingyong-wangzhan-ie11-liulanqi-shiji-shiyong-xingneng/

Here is no comments yet by the time your rss reader get this, Do you want to be the first commentor? Hurry up

相关 [测试 web 应用] 推荐:

maven 自动化web应用集成测试

- - BlogJava-首页技术区
        web应用集成测试的时候,各位还需要启动web容器,然后打开浏览器,输入ulr,然后看到浏览器的输出吗. 下面我们用maven做到自动化. 我们利用maven的生命周期和jetty插件来实现. 下面描述下做的自动化web集成测试实现的原理. 1,在生命周期pre-integration-test启动jetty容器.

如何手工渗透测试Web应用程序(一):入门

- - FreeBuf.COM | 关注黑客与极客
在这个系列文章中,我们将演示如何手工渗透测试web应用程序而不使用自动化工具. 世界上大多数公司都非常关注对web应用程序的手工测试,而不是运行web应用程序扫描器——因为它会限制你的知识和技能,影响在测试中寻找漏洞的视野. 在整个系列文章中,我将使用下面的程序:. NOWASP Mutiliadae是一个包含了40多个漏洞的web应用程序.

Web应用手工渗透测试——用SQLMap进行SQL盲注测试

- - FreeBuf.COM
本文主要关注SQL注入,假设读者已经了解一般的 SQL注入技术,在我之前的文章中有过介绍,即通过输入不同的参数,等待服务器的反应,之后通过不同的前缀和后缀(suffix and prefix )注入到数据库. 本文将更进一步,讨论SQL盲注,如果读者没有任何相关知识储备,建议先去wikipedia学习一下.

Web 前端测试

- - Web前端 - ITeye博客
Web 网站测试流程和方法(转载). 进行正式测试之前,应先确定如何开展测试,不可盲目的测试. 一般网站的测试,应按以下流程来进行:. 1)使用HTML Link Validator将网站中的错误链接找出来;. 2)测试的顺序为:自顶向下、从左到右;. 3)查看页面title是否正确. (不只首页,所有页面都要查看);.

Web应用单点压力测试调优-第6季-阶段性总结

- - ITeye博客
1)  应用的测试用例类型其实是简单的随机get几条json信息. 并没有复杂的业务逻辑处理(权限验证等等),所以在业务上基本没有可优化的余地,转成异步的队列请求操作也是得不偿失. 像注册用户、提交评论、上传图片等等这些耗时、与下一个操作无关联的、又是POST的HTTP请求就可以使用生产者与消费者模式进行(story待改变).

Web 页面测试点

- - Web前端 - ITeye博客
(1) 页面清单是否完整(是否已经将所需要的页面全部都列出来了). (2) 页面是否显示(在不同分辨率下页面是否存在,在不同浏览器版本中页面是是否显示). (3) 页面在窗口中的显示是否正确、美观(在调整浏览器窗口大小时,屏幕刷新是否正确). (4) 页面特殊效果(如特殊字体效果、动画效果)是否显示.

web性能测试指标

- - 研发管理 - ITeye博客
Web性能测试的部分概况一般来说,一个Web请求的处理包括以下步骤:. (2)web server接受到请求,进行处理;. (3)web server向DB获取数据;. (4)webserver生成用户的object(页面),返回给用户. 给客户发送请求开始到最后一个字节的时间称为响应时间(第三步不包括在每次请求处理中).

测试Web应用或网站在IE11和其他浏览器中的实际使用性能

- - IE浏览器中文网站
W3C Web 性能工作小组与 Google、Mozilla 和其他社区领导者通力合作,制订了导航定时、资源定时、用户定时和性能时间线接口的标准化规范,可以帮助您了解在您的 Web 应用程序中导航、获取资源以及运行脚本的实际使用性能. 您可以使用这些接口来捕获并分析您的客户实际使用您的 Web 应用程序的体验,而不是依靠那种在人工环境中测试您的应用程序性能的合成测试.

从 Newsstand 到 Web 应用

- - 爱范儿 · Beats of Bits
本地应用和 HTML5 谁将主导的争论持续了好几年,目前本地应用依然是绝对主流. 因此英国《金融时报》上周宣布将在 6 月 撤下 iPad 应用,完全依赖 HTML5 Web 应用的消息引来不少关注. 早在去年苹果宣布订阅政策时,《金融时报》就开始着手准备 Web 应用以绕开苹果 30% 的大刀.

从 Web 站点到 Web 应用程序,第 1 部分: Web 站点还是 Web 应用程序?

- iworm - IBM developerWorks 中国 : 文档库
您构造的是 Web 站点还是 Web 应用程序. 一般来说,Web 站点主要提供信息,而 Web 应用程序互动性更强,但二者的界限已越来越模糊. 构造好的站点的最佳实践与构造好的应用程序的最佳实践不尽相同. 通过本文了解 Web 站点与 Web 应用程序之间真实确切的差异,然后分析您自己的站点. 以一种能帮助您改进设计和可用性的方式探索您正在管理、设计、编码的站点.