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

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

Windows 8之父Steven Sinofsky加盟风投机构A16Z SDCC 2013演讲议题抢先看 腾讯、阿里、支付宝、网易…… [开源推荐]Google开源基于Deep Learning的word2vec工具 【开源专访】DWZ团队:致力打造最简单的Web前端开发方式 Linux黑客车库创业:服务器操作系统CoreOS颠覆互联网 时间序列数据处理的角逐:MongoDB vs. Cassandra 移动周报:Sphinx游戏引擎的前世今生 联想K900评测:英特尔X86兼容性明显提升(组图) 小米手机-HAXLR8on硬件黑客马拉松:32小时的创客狂欢 鲍尔默宣布下台后,微软应该做好这几件事情 IGT张奇伟:从空间物理到博彩游戏研发 Bing即将推出新功能 用户可直接在搜索结果页购买商品 【开源专访】郑晔谈Moco框架的前世今生以及Java编程之道 CTO俱乐部第108期下午茶:电商在微信上的现状与未来 SDCC 2013讲师议题确定 门票即将售罄(图) 简化工作流程,10款必备的HTML5开发工具 六大领域考评鲍尔默微软掌舵能力,只一“C”尔? 剥离自雅虎的Hortonworks:低调发展,三年融资近1亿美元 Google的中国梦如何死于傲慢与不得力公关 [回顾]昨日黄花,那些被人们遗忘的11个操作系统 管理企业级API的7个最佳实践 Java 与 .NET 的平台发展之争 英特尔正在开发3D深度感知摄像头 可读出人类的情绪等 从数据平台到运营平台:国产开源移动统计Cobub Razor发布0.6版本 八月网络事故频现,CN域名遭最大规模网络攻击 Google云平台或将成为Amazon最大竞争对手 Camera360宣布完成1800万美元B轮融资 利用ZK Ajax框架 高效扩展Web App Web开发者需养成的8个好习惯 GitHub工程师专访:奶昔+海象+游泳池=开源 Paymill发布移动SDK,实现应用内直接支付 如何在服务器上创建目录???? 高手们请进来帮个忙吧!分数不够可以再加. 在DW中如何编辑文章的行距?用CSS吗? 对日期的处理问题 cout的问题(20分). 关于vector<string>的问题(40分). 有没有上海双杨的PB高手? 在pb中怎样写自动递加的序列号?? 我的visio 2000一旦启动以后,就会说遇到问题需要关闭 请问一个关于连接SQL SERVER2000的问题 两行数据重名,查询的时候只能显示其中一个,怎么处理? 在vbscript中的"%TEMPLATEDIR%\wvline.gif"的"%..%"是什么意思? 一个非常棘手的问题,求求各位了!是关于字符转换的!求求各位大侠! 找人 寻C语言编程高手!现有一IP地址和网页、搜索栏关键词拦截程序需要编写,付酬!!! 关于Dll里导出VCL控件的问题。。。高手请进。。。。。。 紧急求救!!! 如何制作浮动面板? 给分的问题! 如何获得 mod_webapp.so 紧急求救 想知道各位WINDOWS下用什么SNIFFER? 对于网络上的第三方控件的看法 简单问题?JTable中的数据如何居中对齐,有没有直接的函数(不用自定义CellRenderer) 有关析构函数 请问一个小问题 关于ADO中ltBatchOptimisticr的FilterGroup的问题 两个星要到多少分才能升到三个星呀 请问有谁知道北京的成人教育大致的情况如何? 是VC编译器不符合ANSI C++,还是?? 我现在在写个程序!是关于证券方面的!可是如下的一个小问题如何解决?? ★★如何让excel的某行的值等于另一行的值乘以一个固定值(急问,在线等待)★★ @@@开学了,散分! 怎样构建一个LDAP服务器和怎样使用 用VFW采集时进行压缩的问题。求解 C# 在DW MX中如何进行层定位? 回复:機會不要錯過! 華強科技有限公司幫你成就軟件工程師的夢想! How to access SMB/CIFS from Sun workstation? 谁来拿分啊。我有一个问题自己解决了,但没有给分的对象。 问一个message Bean的问题,up有分 [EJB]HelloWorldBean正确编译配置和执行,但"HelloWorld"却不见了 寻C语言编程高手!现有一IP地址和网页、搜索栏关键词拦截程序需要编写,付酬!!! 如何让主界面变成三维的那种 寻C语言编程高手!现有一IP地址和网页、搜索栏关键词拦截程序需要编写,付酬!!! 用什么组件能得到网站上的末知大小的文件? 问一个简单的问题 还是有问题关于获得选中安钮的当前行,请进>> 请教简单问题,如何将菜单的一个选项隐藏。就是类似cb的将Visible=false的做法!! 连接ACCESS数据库的问题? 寻C语言编程高手!现有一IP地址和网页、搜索栏关键词拦截程序需要编写,付酬!!! 用一根长2米的木料,锯成同样的四根,用来做凳腿,这个凳子的高太约是多少? 甲、乙二人在一条东西方向的公路上行走,甲在乙西300米,如果甲向东走,乙向西走,2分钟后两人相遇;甲、乙二人在一条东西方向的公路上行走,甲在乙西300米,如果甲向东走,乙向西走,2分 一个圆锥体积是12.56cm立方,比等底等高的圆柱体积少()立方cm 两米长木料,锯成同样长的4根做凳子腿,高大约是多少 甲乙两人在一条东西方向的公路方向的公路上行走,甲,在乙西300米甲向东走,乙向西走,2分钟后相遇.两人都向东走,半个小时甲追上乙,求两人的速度 一个圆柱体积18立方cm,高是10cm,把这个圆柱削成一个最大的圆锥体,削去部分体积是()写算式,写清楚,要写得数. 岩棉夹芯系列彩钢板房一平方米造价大约是多少? 动物都要经历哪四个阶段 小轿车上五人.大客车上的人数比小轿车多26人.问两辆汽车上一共有多少人? 造一个宽4.5米,长11.5米,高3米的彩钢板房造价大约是多少?中间2道隔墙. AB两点,甲乙两人相向而行.甲比乙的速度快.甲距离B点240米时与乙相遇.甲乙继续行走到达终点时原路返回.甲距离A点120米时再次与乙相遇.AB两点距离是多少? 去年小麦种植面积为"1",今年种植面积比去年增加20%.今年种植面积是去年的?% 在一条长1000米路的两旁做临时过渡房,每间房子宽5米.每间房子要用80平方米的彩钢板.这条路临时住房一共需要多少平方米彩钢板? 甲乙两人步行的速度比是9:7,若甲乙分别由AB两地沿同一公路同向而行,则甲追上乙需4时,若相向而行,则多少时间相遇? 小汽车每辆能坐4人,大客车能坐25人,有3辆小汽车和1辆大客车,问一共能坐多少人?求这道题的答案 有这种挖土方体积算量的计算公式吗?三分之一的高度*(上口边长的二次方+下底边长的二次方+上口长*下口长)这是什么公式啊,这是书上例题里给的答案,算的是一个柱基基础挖土方的量.不是应 ___mol的CO2中含有3g碳 刘庄村今年小麦播种面积比去年增加了10%.今年播种小麦39.6公顷,去年播种多少公顷? 一根木料长36分米,木工用30分钟锯了6段,平均每锯一次用几分钟?如果把它锯10段需多少分钟 如图,已知等腰三角形ABC的底边BC=10cm,顶角为120°,求它的外接圆的直径 一辆轿车可坐4人,一辆客车再多坐2人就是小轿车的10倍.一辆大客车可乘坐多少人 彩钢板盖顶阳光房有哪些优点 几摩尔的二氧化碳中含有三克碳 今年小麦播种面积比去年增加了5/12,是把【】看作单位1,关系式为【】 挖一个容积是1884立方米的圆柱形水池,底面半径10米,这个水池深多少米?如果在水池的地面和四周抹上水泥,抹水泥的面积是多少平方米? 等腰△ABC的底边BC的长为a,顶角为120°,求它的外接圆的直径 今年小麦的播种面积是去年播种面积的13/12,这里是把谁看作单位1? 用一根长2米的木料,锯成同样长的四根做凳子腿,这个凳子的高是多少? 已知等腰三角形ABC的底边BC=10cm,顶角为120°,求它的外接圆的直径 爱在细微处作文【600】字 我是新手,没多少积分, 用一根长2米的木料锯成同样长的4根做凳子腿,这个凳子的高大约是多少 等腰三角形ABC的顶角∠A=120° BC=12 求它的外接圆的直径w 东北平原比南方种植水稻有利的气候条件 怎么算挖土后的清槽工程量啊? 用一根长2米的木料,锯成同样长的4根做凳子腿.这个凳子的高大约是多少? 在等腰三角形ABC中,∠BC=120度,点P是底边AC上一个动点,M,N分别是AB,AC上上的中点,若PM+PN的最小值为2,则三角形ABC的周长是多少? 用一根长2米的木料,锯成同样长的4根做凳孓腿.这个凳子的高大约是多少? 用一根长2米的木料,锯成同样长的4根做凳子腿.这个凳子的高是多少? 排水管道,检查井有支管接入,上下游管道有跌水,支管该怎么接?支管与上下游管道的管底标高差有什么要求支管的埋深是不是不能低于与下游管道采取管顶平接时的埋深?如果这样,跌水水头大 两米的木料,锯成同样长的四根,用来做凳腿,这个凳子的高大约是多少?请问:凳面的厚度要算进去吗? 一张纸,一毫米厚,连对折10次,对折后的多厚?要过成和结果.急,很急,非常急,超急! 检查井管内底标高为什么标在圆圈中间?每个检查井都会画一个十字,然后标高就从十字的中心指出,就算没有画十字的检查井标高也都标在圆圈的最中心位置,这是为什么呢?为什么一定要标在 ·生长过程中发生变化的动物 有一张厚度是0.2毫米的纸,如果将它连续对折10次,那它会有多厚?急,具体方式 为什么1+3会等于4 城市道路挖土方一般属于“一般挖土方”,为什么? 一张1毫米厚的纸,对折1000次,厚度有多高?…… 有一个高24厘米,底面半径为10厘米的圆柱形容器,里面装了一半水,先有一根长30厘米,底面半径为2厘米的圆柱体木棒,将木棒竖直放入容器中,使木棒底面与容器底面接触,这时水面升高(D)厘米. 动物的生长过程 厚7.5cm彩钢板建造200㎡大约多少钱 北方是___农业~南方是___农业 修路时挖土的方量怎么算 房屋楼顶加层采用彩钢板房有哪些好处 南方以水田农业为主,北方以旱地农业为主,西北发展畜牧业,形成这种生产活动地域差异的主要因素是降水为什么是降水,而不是热量 或者是土壤呢? 动物细胞的生长过程 我想做一个长20.9米,宽7.2米的房子的房顶用彩钢板做五脊四坡,怎么算面积啊.我想做一个长20.9米,宽7.2米的房子的房顶用彩钢板做五脊四坡,脊高是1米,怎么算面积啊. 有甲 乙两个大小不同的圆柱形容器 甲容器的底面半径的24厘米 乙容器的底面半径是12CM 已知30厘米深的水乙容器无水 现将甲容器的一部分谁倒入乙容器 使两个容器中的水面高度相等,此时水 市政道路施工时,中桩坐标怎么算啊?市政道路施工时,坐标不知道如何计算,学什么书呢.有这方面的朋友会算的吗给支个招吧. 市政排水混凝土检查井,井顶标高是指井内顶标高,还是井结构外顶标高? 有一个高为24厘米,内底面半径为4厘米的圆柱形容器,里面装了一半的水,把一跟长L厘米,底面半径为2厘米的圆柱玻璃b棒,竖直放入容器中,使棒的地面与容积底面接触,根据L分别求出水面升高了
备案号:鲁ICP备13029499号-2 说三道四 www.s3d4.cn 说三道四技术文摘