使用HTML5的性能和性能测量JS性能.定义对象

Question

我根据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'
};

有关信息,此图像中显示了该过程的顺序

我也为此创建了一个JSFiddle

同样,我也想在我的网页中测量AJAX请求的性能,我正在考虑使用readyState的AJAX请求所以我想知道在每个状态更改之间花费时间的原因是什么

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

我想要这样做的原因是因为,有时我们抱怨我们的应用程序有点慢,所以在这些情况下我们可以读取该用户的性能对象并读取整体性能对象.我们还可以在使用应用程序的高峰期以及其他时间读取各种性能对象,并且想要测量应用程序的哪个部分需要更长的时间来加载.同时它是一个随着时间发展的产品,所以为了将来参考,我也可以使用这些数据作为基准.所以我唯一的重点是完全理解这个对象

另外,如果还有其他办法,请告诉我(如果我走很长的路)...

Answer 1

我还想将其他最终用户的这些性能对象记录在我的本地数据库中

我们先从这方面说起。您不需要自己重新发明这一切。您的时间最好花在实际改进您的站点上，而不是创建您自己的监控解决方案。

Google Analytics 实际上会为您跟踪计时对象，因此您可以在那里检查它。 New Relic也做到了这一点，并且更加注重开发人员，还跟踪服务器端的事情。可能还有其他 100 个可供您选择。

但我不太熟悉每个属性的含义

这些的规范定义是 W3C 建议： https://www.w3.org/TR/navigation-timing/

我根据我的知识创建了一张地图，但我需要社区的意见

我建议不要创建这样的地图，至少按照您迄今为止定义的方式。每个事件都意味着特定的事情。假设重定向与网络问题或繁忙的服务器有关是没有意义的。当然，缓慢的重定向可能是由于这些原因造成的……但也可能是由于 100 个其他原因，甚至可能是有意为之。还要考虑到世界各地的网络状况差异很大。简而言之，原样的定义是最好的。

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