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

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

对比MapReduce 流处理框架没有所谓的查询层 美国政府:修复漏洞仍有风险 应禁用Java插件 AppGlu应用辅助工具:帮助开发者处理善后工作 iOS!你这几个方面该向Android好好学习 小于1%,中国有真正自主的移动操作系统吗? 张小龙专访系列(下):不一样的产品思维 Gartner:截止到2016年公有云市场复合增长为17.7% Appcore:在企业内部部署IaaS平台 B轮融资600万美元 超现实主义!用脑电波控制你的计算机设备 搜狐否认“情理之中”的退市 上市仍是最优选择 六大BaaS产品推荐:移动开发必备的后端云服务 未遵守承诺 微软遭遇欧盟7.31亿美元巨额罚单 PaaS正能量:6人团队,仅1人全职后端 支撑6000万用户 三星:我不抽成,收益100%让开发者拿去! 腾讯开放平台推“送红利计划” 承诺半年内不参与分成 JavaEE快速开发框架Wabacus 4.0发布,开发效率提高五倍以上 市盈率创新高 谷歌为什么会在苹果博弈中暂时胜出 从Rovio遇到危机,看现在应用市场的演变 Windows Azure支持Android应用 面向东亚推广云服务 抛弃DRAM、拥抱闪存,Facebook重做Memcached 夏普三星联姻 电子行业或将多元化发展 从下拉菜单设计细节看Amazon对用户体验的把握 Chartboost美女CEO:40人团队服务3亿移动玩家 Distimo:新晋开发者想让产品得到关注越来越难 OpenFeint绝迹后,开源项目OpenKit继续前进 美FDA通过搜索引擎和社交平台预警药品副作用 挖坟三星“眼球追踪技术”背后的技术团队 为什么开发者热衷在Stack Overflow上查阅API文档? Facebook推新News Feed 欲造就“个性化报纸” 女神程序员的一天:暴力测试social爬虫代码 2013IBM云存储路线图:更快,更简单,更安全 各位大侠请问Jeffrey Richter的windows核心程序设计是不是就是andvanced windows程序设计的第四版? 谁会做软件狗?有钱赚了!!! 为什么我用QuickRep作的报表只能显示一条记录,而且columnHeaderBand上内容也显示不出来 请问在税务局开发数据库的同行么?? 大家好各位大侠请问Jeffrey Richter的windows核心程序设计是不是就是andvanced windows程序设计的第四版? 谁做过软件狗,马上来拿钱!!! 江苏省的成绩什么时候可以出来啊,我是徐州的 shockwaveflash没有hwnd,怎么办? chechy(chechy) 你在吗? 一个关于用excel做的日报的问题 谁会做软件狗,马上来拿钱!!! 给你下跪了,给你磕头了,给你鞠躬了。很简单的问题。谢谢 那位大哥能告诉我在VC中我要创建类的话应该做哪些工作步骤(要详细的,呵呵) 紧急求救,asp连接mysql问题 在使用twebbrowser的时候,怎样制止网页的自动刷新和跳转? vc编译器错了怎么办???突然死机,然后就不好好干了!!谢谢 ?如何将二进制的 值写如注册表? Delphi紧急求助! 我想问的是,返回的 ResultSet 中的某个字段(int 型),如何放到一个 int[]数组里去。因为 ResultSet 不知道怎样取 size,我又不想用 vector, ResultSet的getArray()方法也是莫名其妙。 c盘格式化后,怎样找到linux系统? 有意思 过来研究一下!!!!insert 的!!!!难道 25 不是 long integer 吗 我的程序debug版,一直调试好好的,我rebuid all 一下就出错了,错误如下:怎么回事? 位图问题? 怎样使用自定义的光标??? 我想找Hopen SDK的开发包。 为什么我的iis总是报500内部服务器错误。我先装的framework,后来升级了ie5.5,最后在w2kprofessional上装了iis,手动添加了aspx解析:指向aspnet_isapi.dll,为什么还报错? 那里有关于用组件上传图片并且显示上传图片的介绍 NT 上已安装好mysql服务器,WIN98 client连接不上,求救 程序员梦难圆,请大家给我这个非计算机专业的兄弟出出主意。 小弟是delphi初学者,师兄师姐们给我介绍一下object pascal自带的函数好么? 你知道如何禁止后退按钮吗? 请各位高高手!解决启动时ctrl+alt+del可结束任务的问题。 哪位大侠指点一下ActiveSkin怎么用的? 引用ado后,打包程序为什么如此之大 为什么我的iis总是报500内部服务器错误。我先装的framework,后来升级了ie5.5,最后在w2kprofessional上装了iis,手动添加了aspx解析:指向aspnet_isapi.dll,为什么还报错?? 散源代码(1)- 货郎担问题(TSP)分枝限界算法 (急)哪位大侠有关于power designer的书,中文的,谢谢 ■■在线等待,找到立刻送分,决不失言。CSDN兄弟在帮忙,PB7安装盘不能安装POWERJ,是吗?在那里可以找到POWERJ安装盘?■■ 哪个虚拟光驱的软件在XP下可以用,虚拟光驱和光驱魔术师都不行呀 有谁知道那里有可以放ASP代码网页的免费空间 请问在VC中如何使静态框中的字体变色? 若想在BDE-Administrator中使用*.mdb,必须将*.mdb注册到文件DSN或者系统DSN中吗? 请教,如何在其他的应用程序的title上(最小化按钮旁边)添加按钮? 为什么我的iis在运行.aspx(asp.net)文件总是报500内部服务器错误。我先装的framework,后来升级了ie5.5,最后在w2kprofessional上装了iis,手动添加了aspx解析:指向aspnet_isapi.dll ::SetDlgItemText(hDlg,IDC_EDIT1,(LPCTSTR)lby);???????? DatagramSocket和DatagramPacket??? delphi的ftp,pop3,http控件是否支持进行多线程连接? 大型调查 急急急!!!上海地区有没有12月份的java培训? 显示桌面有快捷键吗 应该有的 是什么 呀 为什么我的yamaha740声卡 win2000不认,驱动程序怎么也装不上呢? 金属丝利用了金属的什么物理性质 刚买的房子,为冬季装修成什么样的取暖方式犯了愁,发热电缆、电热膜、碳晶地暖哪个好?家住河南,刚刚买了房子,准备开始装修,由于小区没有集中供暖,装修前考虑冬季取暖就成了大问题.比 测量标准大气压的工具有哪些 古代计算时间方式除了生物钟,书钟和太阳种以外,还有什么计算时间方式吗?我有急用, 电焊于气保焊区别是什么拜托了各位 水地暖高度,发热电缆高度,电热膜高度分别是多少 电焊怎样区分焊水焊渣 《己亥杂诗》全诗 电焊技术:怎样立焊?电焊技术.怎样立焊 电焊的焊角怎么计算 这段材料的意蕴是什么?一只章鱼的体重可以达到70磅.但是,如此庞大的家伙,身体却非常柔软,柔软到几乎可以将自己塞进任何一个想去的地方.章鱼没有脊椎,这使它可以穿过一个银币大小的洞. 电焊立焊怎么焊啊 电焊的焊接,怎么焊才可以焊得又平又好看呢?我焊的是219的管 求帮我解释一下这段公务员中资料分析的意思.1估算法(选项大小差距大且复杂,可粗略估值)这个我可以理解.2直除(选项首位不同,或首两位不同时)3插值法(如果选项首位都是3,与1/3比,首 45钢表示什么材料 你知道怎么样能焊出又平又宽的焊缝么就跟电焊条一样 这段材料给我们的启示是什么 45是什么材料 有机食品什么意思啊 电采暖-用发热电缆好还是电热膜好? 材料牌号45是什么 古诗《己亥杂诗》的作者是谁 发热电缆和电热膜哪个比较好 S20C是什么材料?可以用45#代替吗? 有机食品是什么意思? 计量器具的A、B、C如何分类?如何确定计量器具是一次性检定的? 45#圆棒是什么材料 《已亥杂诗》意思,有诗九州生气恃风雷,万马齐喑究可哀.我劝天公重抖擞,不拘一格降人才. 己亥杂诗是谁的诗作者和诗全要 计量标准装置里的重复性和稳定性应该怎样做呀?因为外审时一个专家一种解释, 求已亥杂诗全诗 测量工具的种类 计量标准,标准器,检定装置的区别 有机食品什么意思 怎么用电焊焊立缝 变压器的设备容量和计算容量的区别图里的设备容量和计算容量是什么意思? 碳晶地暖的优缺点?碳晶地暖的系统组成?碳晶地暖价格?碳晶地暖品牌? 电焊立焊的手法是怎么焊 样本标准偏差和总体标准偏差有什么区别?就是计算器上的统计计算.样本标准偏差和总体标准偏差有什么区别? 碳纤维地暖和碳晶地暖到底有什么区别?哪个好?好在哪里? windows xp下ttf和ttc有什么不同 有缝不锈钢管与无缝不锈钢焊接有什么区别?我们现在设计的给水是有缝不锈钢管道,可是施工方采用的管件是无缝的,它们采用焊接有什么特殊要求吗?可以焊接再一起吗?需要采取什么样的保 什么是下行焊,垂直气电焊? TTC雾森是什么? 钢制对焊无缝弯头和钢板制对焊弯头的区别 已亥杂诗 全诗 六年级下册的己亥杂诗表达了作者怎样的思想感情?表达作者愿望的诗句是哪句?表达了什么愿望? 无缝等径三通 T(S)-DN250-SCH30-A1 SH/T3408-1996都是什么意思啊,能区分是焊接三通还是无缝三通么 由不锈钢焊条和结构钢焊条组合焊的焊缝结构特点 材料意思是什么 己亥杂诗中哪一句抒发了作者渴求天降人才、报效祖国的心愿? .以下自然现象中,包含两种或两种以上物理现象的是() A 弯折金属丝,金属丝发热 B 夏天午后,暴风骤雨伴1.以下自然现象中,包含两种或两种以上物理现象的是()A 弯折金属丝,金属丝发热 B 这是什么材料的?里面写着18K是什么意思? 已亥杂诗》中表达作者愿望的诗句是哪句?表达了什么愿望? 电经过金属丝发热电经过金属丝会使金属丝发热,地球上有人知道为什么吗? 炭晶地暖好 还是电热膜好 有什么区别 《己亥杂诗》中表达作者愿望的诗句是哪句?表达了什么愿望? 一从中间弯曲成直角的金属丝一从中间弯曲成直角的金属丝,一端悬挂,总长为L.则金属丝静止时,一直角边和竖直方向夹角为多少? 碳晶地暖与电热膜地暖的优劣比较多谢各位,请问他们对人的身体的影响是否有差别,以及其他方面! 《已亥杂诗》中表达作者愿望的诗句是那句?表达了什么愿望?
备案号:鲁ICP备13029499号-2 说三道四 www.s3d4.cn