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'
};

该过程的顺序显示在此图像中以供参考 性能时序概述

我还为此创建了一个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

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

另外，如果有其他方法，请告诉我（如果我要走很长的路）...

4

1 回答 1

4

I also want to log these performance object of other end users in my local database

Let's start with this aspect. You don't need to reinvent this all yourself. Your time is much better spent actually improving your site, rather than creating your own monitoring solution.

Google Analytics actually tracks the timing object for you, so you can just check it there. New Relic also does this, and is more developer focused, tracking server-side things as well. There are probably 100 others you could pick from.

but I am not quite familiar with what every property means

The canonical definition for these is the W3C recommendation: https://www.w3.org/TR/navigation-timing/

I have created a map as per my knowledge but I need input from community for this

I suggest not creating such a map, at least in the way you've defined it so far. Each event means something specific. Assuming that a redirect has anything to do with a network issue or busy server makes no sense. Sure, a slow redirect could be due to these items... but it could be due to 100 other things or maybe even intended. Also consider that network conditions widely vary around the world. In short, the definitions as-is are the best.

If you have a specific question about the meaning, and if the W3C spec isn't clear enough for you, I recommend asking a specific question about a specific item you are confused by.

于 2016-07-10T06:07:39.610 回答