使用HTML5的性能和performance.timing对象来测量JS性能

Question

使用HTML5的性能和performance.timing对象来测量JS性能

15

我正在使用HTML5提供的性能对象来衡量我的网站性能，并想知道我的应用程序出了什么问题，我还想记录其他终端用户的性能对象以便将信息存储在本地数据库中，但我不太熟悉每个属性的含义，例如connectStart和connectEnd延迟的原因可能是什么...我已经按照自己的知识创建了一个映射，但我需要社区的意见...这对其他人也非常有帮助。

var issueList = {
    'connectStart':         'Network issue',
    'connectEnd':           'Server is not responding fast with SSL handshake',
    'domainLookupStart':    'Network issue',
    'domainLookupEnd':      'Network issue',
    'fetchStart':           'Slow browser',
    'redirectStart':        'Network issue',
    'redirectEnd':          'Busy server',
    'requestStart':         'Network issue',
    'responseStart':        'Server is slow',
    'domLoading':           'Low internet bandwidth',
    'unloadEventStart':     'Slow browser',
    'unloadEventEnd':       'Slow browser, browser processes are too heavy',
    'navigationStart':      'Slow browser',
    'responseEnd':          'Network issue',
    'domInteractive':       'Browser issue',
    'domContentLoadedEventStart':   'Network issue',
    'domContentLoadedEventEnd':     'Network issue',
    'domComplete':          'Too much DOM manipulation',
    'loadEventStart':       'Unknown',
    'loadEventEnd':         'Low JS performance, either not optimized JS or browser is slow'
};

下图展示了过程的顺序，供参考 Perfromance Timing Overview

我还为此创建了JSFiddle

同样地，我也想要在我的网页中测量AJAX请求的性能，并且考虑使用AJAX请求的readyState。我希望知道每个状态更改之间需要花费时间的原因是什么。

State  Description                     Reason
0      The request is not initialized  Slow JS execution
1      The request has been set up     Slow JS execution
2      The request has been sent       Slow Netowkr Connection
3      The request is in process       Slow Server response
4      The request is complete         Slow server processing

我之所以想这么做，是因为有时候我们会收到用户投诉说我们的应用程序有点慢。在这种情况下，我们可以读取该用户的性能对象和整体性能对象。我们还可以在应用程序高峰使用期间和其他时间读取各种性能对象，并且想要测量哪个部分加载时间较长。同时，这是一个随着时间演变而发展的产品，因此我也可以将这些数据用作未来的参考基准。所以我的重点是完全理解这个对象。

另外，如果有其他方法（如我正在走弯路），也请告诉我...

- Parag Bhayani

1

请查看以下网址：http://www.html5rocks.com/en/tutorials/webperformance/basics/ - Vishal Sharma

1

http://kaaes.github.io/timing - Vishal Sharma

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Brad · Accepted Answer

我也希望在本地数据库中记录其他终端用户的这些性能数据对象。让我们从这个方面开始。您不需要自己重新发明轮子。您最好将时间花在实际改善您的网站上，而不是创建自己的监视解决方案。Google Analytics 实际上为您跟踪了计时对象，所以您可以在那里进行检查。New Relic 也会这样做，并且更加关注开发人员，还跟踪服务器端的事情。你可能会从100多种工具中选择一种。但是，我并不太熟悉每个属性的含义。这些的权威定义是 W3C 推荐：https://www.w3.org/TR/navigation-timing/ 我已经按照我的知识创建了一个映射，但我需要社区的意见。

我建议不要创建这样一张地图，至少不要按照你目前定义的方式。每个事件都有特定的含义。假设重定向与网络问题或繁忙的服务器有任何关系是没有意义的。当然，慢速重定向可能是由于这些原因...但它可能是由于其他100种原因甚至是有意为之的。此外，请考虑全球范围内的网络条件大相径庭。简而言之，目前的定义是最好的。

如果您对含义有具体问题，并且如果W3C规范不够清晰，我建议您就您感到困惑的具体项目提出具体问题。