说三道四技术文摘-感悟人生的经典句子
说三道四 > 文档快照

Web应用在IE11里的实际使用性能

HTML文档下载 WORD文档下载 PDF文档下载
W3C Web性能工作小组与Google、Mozilla和其他社区领导者合作,制订了导航定时、 资源定时、 用户定时和 性能时间线接口的标准化规范,可以帮助开发者了解在Web应用程序中导航、获取资源以及运行脚本的实际使用性能。

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


性能定时 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);

您一经向您的脚本添加了标记和度量,则您可以用 getEntrygetEntryByType 或 getEntryByName 方法来检索定时数据。标记输入类型为 “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 开发者可以真正开始评测并了解可以从哪些方面着手来改进他们的应用的性能。

来自:MSDN IEBlogs

黑客怒了:政府花930万美金仅做一款App Email服务迎来“第二春” 未来将更加个性化 贯穿应用开发始终的八大陷阱 微评微软也推智能手表:是追求未来,还只是跟随? Firefox OS今年6月在5国首发 不含美国市场 8086/8088汇编指令手册 下一个被黑客攻击的对象—无线路由器 Windows Blue开始按钮或将回归,你怎么看? Evernote推孵化器 不占股权 基于C++和Lua的移动游戏引擎Leadwerks 3发布 苹果秘密测试iOS 7与iPhone 6 或将6月发布 酷6 CTO 陆坚:请先信任你的程序员 从电信联手i-Free,看运营商渠道的加速整合 “Animory”开发者分享HTML5游戏开发经验 Appflood SDK:连接中国与海外App流量交互平台 Apache Subversion 1.7.9正式发布! 微软IE浏览器5大动向 加速吸引开发者 开源的简繁转换库OpenCC支持Node.js 继Opera之后,Adobe表示将支持Google Blink 提高大型软件项目质量的一些实用型技术分享 谷歌推出Mirror API,开发者可为Google Glass开发应用 无需999,也不要499,99美元Linux超级计算机带回家 微软反击AWS:推出EC2并大幅降价,“价格战”正酣 Operation InVersion:拯救了LinkedIn的大修项目 五步走战略——Avocado在最初几周内迅速扩大30倍 NoSQL产品测评:Cassandra、MongoDB、Couchbase和Aerospike 谷歌眼镜开箱评测:比想象更精致 Pinterest谈实战经验:如何在两年内实现零到数百亿的月访问 初创公司Instart Logic:专为电子出版商和网站站长解决“痛点” 未来即卖芯片又卖服务!Intel收购软件厂商Mashery 继MSN之后,微软又开始整合Skype与Lync服务 介绍几个考中级的网址来噶 CNET网站重新架构,我们的链接也要改了~~ 急,真的急 各位,有谁能告诉我怎样使得程序中每个Show的窗体都以新窗体出现在任务栏。(答对了一定加分!!!!) 能不能获得来访者的计算机名 help me!高手请看! 11号帖子,救命呀,很急,很重要! 怎样在恢复一个被删除的文件时恢复文件全名? 我急!深夜提问!大家看一看 有谁告诉我Microsoft Visual InterDev 6.0如何使用其中的站点管理 如何在Word工具条上加一个按钮 请问系统和上网的速度有关系吗 急需foxpro for win版,哪有??? 请教一下,ado.net里如何返回表里的行数? 如何在HTML页面中使用 Acrobat 的 PDF 阅读器控件 关于一个遗传算法得问题!! 请问一个TSR问题! 关于跨数据库查询的问题 请问在ListBox中可不可以将每一行字符串设置成不同的颜色? vb6.0中如何将dbgrid里的内容添加到数据库里? 请问怎样才能将窗体上的最大化按钮设置成无用,而保留最小化按钮? 各位专家:请问win2000 PRO 下的config.msi目录中的好多以rbf为扩展名的文件是什么文件?有什么用?可以删除吗? ASP.NET中DATAGRILD的烦人处 新手问两个简单的问题??? 想知道如何才能看见前页纸油笔写过后留下的字迹?(散分) 为什么用odbc连接的paradox表不能编辑? 哪位大侠帮看一下代码(关于链表),为何出"invalid type argument of `->'"的错 一个非常非常想从事计算机软件开发的愿望 关于Hook的一个小问题 文档视图结构中无法显示编辑框,怎么办啊??用什么代替啊 十万火急! 通过网络,进行语音聊天的程序。 你了解人工受精吗? 有关“无纸化考试系统”bow api中的常量 关于addslashes的问题 有关“无纸化考试系统”的问题??thanks all,bow 如何删除windowsXP?紧急!!! 【数据结构】考试用的是类pascal还是c语言 我想往服务器中传文件。请问,需要组件吗? 如何写naked function的prolog 和 epilog? LoadIcon(NULL,IDR_QQ) 关于用c写聊天室 帮忙看看是不是session_start()惹的祸 请问谁知道那里有php源码下载的好站,贴几个出来看看 一妹妹姐姐程序员求职,找深圳的工作 初级问题:RichEdit控件的ScrollBy方法自动滚动 推荐一个毕业设计题目,不要太难,我学的流体,用VC来做一个什么东西,推荐一个,谢谢. 今天中午饭后练习时台球斯诺克单杠52分~~~ 二个问题,第二个问题比较难! Windows.Net 3607 简体中文版下载,要的话赶快,不然链接要被删除了. From left to right: Jini, Mini, and Umji 一块含30度角 直角三角形(如图)它的斜边AB=8cm,里面空心三角形DEF的各边与三角形ABC的对应边平行,且各对应边的距离都为1cm,那么三角形DEF的周长为?如图 已知:在三角形ABC中,AB=AC,D为BC的中点,DE垂直于AC于E,F为DE的中点,BE交AD于N,AF交BE于M,求证:A已知:在三角形ABC中,AB=AC,D为BC的中点,DE垂直于AC于E,F为DE的中点,BE交AD于N,AF交BE于M,求证 二元一次方程组怎么转化为一次函数式 把两个含有30°角的直角三角形如图放置,点D在BC上,连接BE、AD,AD的延长线交BE于点F,证明AF⊥BE 在三角形ABC中,sinA:sinB:sinC=2:√6:(√3+1),则三角形最小的内角是 一次函数与二元一次方程组的题已知直线L1,L2的解析式分别y1=k1x+3,y2=k2x-2,其中L1与X轴的交点为A(3/2,0)L1与L2的交点为B(1,a)求L1,L2与X轴围成的三角形面积. 已知:在三角形ABC中,AB=AC,AD为中线,CF∥AB 求证:BP的平方=PE×PF (a-b)(b-a)等于多少,为什么 两条直角边分别为3和4的直角三角形的斜边与斜边上的中线的比为 p为三角形ABC内任意一点,连接AP,BP,CP后存在这一结论PA+PB+PC>1/2(AB+BC+AC),为什么 三角行的一条中线是否将这个三角形分成面积相等的两个三角形?为什么?快啊,我赶时间啊,为什么呢?准 初中快开学日记 三角形abc中 已知sinA*sinB=cos^2 (C/2) 则此三角形的形状是 利用三角形的中线,把三角形分成面积相等的四部分 初中开学周五的日记200字 如图,在三角形ABC中,AB=AC,P是BC上任意一点,连接AP,求证:BP×CP=AB²—AP² 三角形的一条中线能将三角形分成面积相等的两部分吗? 已知直角三角形两直角边上的中线长分别是4和3,求斜边的长(有解题过程) 三角形ABC中,SinA乘SinB=Cos(A/2)的平方,则三角形为何类三角形 命题"三角形一边的中线将这三角形分成面积相等的两部分"的逆命题是? 已知直角三角形两直角边上的中线长分别为4和3,球斜边长 修一条路,每天修五分之十二千米,5天正好修了全长的三分之二,这条路全长多少米? 分别以X2+3X-2=0的两根和两根积为根的一元二次方程昰( ). 已知直角三角形两条直角边上的中线长分别是12和5,求斜边的长 .中线 修一条路,每天修五分之十二千米5天正好修了全长的三分之二,这条路全长多少米 求20篇日记300字 初二数学一次函数与二元一次方程组的关系 二元一次方程组的解是2个一次函数的焦点,有时候题目给你2个一次函数叫你求他的交点,老师说是列方程组,我不知道是列成2个二元一次方程组在解 如图,在△ABC中,AB=AC,AD是边BC上的高,P是AD的中点,延长BP交AC于点F,求证:PB=3PF 给我讲解讲解初二数学的那个一次函数与二元一次方程组好吗?Thank you. 直角三角形的两条直边分别是3和4.斜边为5.求角度 如图,在三角形ABC中,角ACB等于90度p是AC的中点过点A作AD垂直于BP交于点E,交BC的延长线于点D求PE,PB长且角DBE等于30度BE的10 已知在Rt△ABC中,∠C=90°,sinA=3/5,则tanB的值为( ) A、3/4 B、4/3 C、4/5 D、5/4 已知,直角三角形除斜边外的另两条直边长,分别为3和4,求短直边相对的角度是多少? 修一条路,已修的米数占全长的40%,接着再修70米,那么没修的米数是已修的80%,这条路长多少米?算数解 在△ABC中,∠C=90°,sinA=5分之4,则 tanB= 已知一个直角三角形的两条直角边分别为3和4,以它的斜边边所在的直线为轴旋转一周,所得圆锥的体积是请讲一下斜边上的高怎么求, A,B,C,D分别表示3个整数,已知A/B/C=5,A/B-C=12,A-B=84,求A乘B乘C的积是多少? 一条路已修900米,是末修的4/3少300米.这条路总长多少米? 如图在三角形ABC中,AB大于AC,P是AD上一点且AD平分角BAC,求证BP大于CP回答得我懂的话,我回追分的. 一个直角三角形中有一个角是45度,这个三角形一定是等腰直角三角形对吗 一条路,已经修好了3/4,还剩900米,这条路全长多少米? 如图,在三角形ABC中,AD是角BAC的平分线,BP垂直AD,垂足是P,已知AC减AB等于2BP,求证:角ABC等于3角C. 一个两位数,个位数字是十位数字的4倍,把个位数字与十位数字对调,得到的两位数比原来大54,求原数 怎样总结“直角三角形” 在三角形ABC中,AD是角BAC的平分线,BP垂直于AD,垂足是P已知AC-AB=2BP,求证:角ABC=3角C 一个直角梯形 底角是45度,上底是8厘米 下底是14厘米,求面积 谁能帮我总结一些关于直角三角形的知识 如图,在三角形abc中,ad是∠bac的平分线,bp垂直于ad,垂足是p.已知ac-ab等于2bp,求证:∠abc等于3∠c. 一个直角三角形的面积是28平方厘米,一条直角边是8厘米,求另一个直角边 如图,AD是△ABC的中线,P是AD的中点,延长BP交AC于点F.(1)试说明PB=3PF(2)若AC的长为12,求AF的长 已知一个三位数个位上的数字是a,十位上的数字是b百位上的数字为c将这个三位数的个位数字和百位数字对调后得到一个新三位数,则原三位数与新三位数的差为( )求详解好的有分加 一个直角三角形,它的两条边分别是6厘米和8厘米,它的面积是( ). 修路队修一条路,已修了全长的40%,距离中点还有270米,这个修路队修了多少米? 一次函数与二元一次方程组(有题目)一次越野赛跑中,当小明跑了1600米时,小刚跑了1450米,此后两人分别以a米/秒和b米/秒匀速跑,又过100秒时小刚追上小明,200秒时小刚到达终点,300秒时小明到达 在三角形ABC 中“cosA+sinA=cos+sinB”是“C=90°”的__条件过程 甲乙两个修路队同时从两端修一条路,在距离中点20米处相遇.已知乙队修的是全长的40%,求这条路的全长 如图所示,AD是BC边上的中线,如果BC=10厘米,AC=4厘米,AD=3厘米,求三角形ABC的面积 甲乙两人分别从A,B两地同时出发,相向而行,相遇时甲比乙多走了20千米,已知甲的速度为10km/时,5km/是,则A,B两地相距多少KM? 如图,在△ABC中,P是中线AD的中点,连结BP并延长交AC与E,F为BE的中点,求证:AF‖DE 在三角形ABC中,AD为BC边上的高,AB=15厘米,AC=13厘米,AD=12厘米,求三角形的面积
备案号:鲁ICP备13029499号-2 说三道四 www.s3d4.cn 说三道四技术文摘