Измерение производительности JS с использованием производительности и производительности HTML5.

Я измеряю производительность своего сайта на основе объекта производительности, предоставляемого 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 на моей веб-странице, и я думаю о том, чтобы использовать 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

Причина, по которой я хочу это сделать, состоит в том, что иногда мы получаем жалоба на то, что наша заявка немного медленная, поэтому в этих случаях мы можем прочитать этот объект производительности пользователя, а также прочитать в целом высокопроизводительный объект. мы также можем читать различные объекты производительности, пока пиковое использование нашего приложения и другие времена, а также измерение что часть приложения занимает больше времени для загрузки. в в то же время это продукт, который будет развиваться со временем, поэтому для будущей ссылки я также могу использовать эти данные в качестве эталона. поэтому мой единственный фокус полностью понимает этот объект.

Также, дайте мне знать, есть ли другие способы (если я беру длинный маршрут)...

Ответы

Ответ 1

Я также хочу зарегистрировать эти объекты производительности других конечных пользователей в моей локальной базе данных

Давайте начнем с этого аспекта. Вам не нужно изобретать все это самостоятельно. Ваше время намного лучше потрачено на улучшение вашего сайта, а не на создание собственного решения для мониторинга.

Google Analytics фактически отслеживает объект синхронизации для вас, поэтому вы можете просто проверить его там. Новая реликвия также делает это и больше ориентирована на разработчиков, отслеживая серверные вещи. Есть, вероятно, 100 других, которые вы могли бы выбрать.

но я не совсем понимаю, что означает каждое свойство

Каноническое определение для них - рекомендация W3C: https://www.w3.org/TR/navigation-timing/

Я создал карту в соответствии с моими знаниями, но мне нужен вход из сообщества для этого

Я предлагаю не создание такой карты, по крайней мере, так, как вы ее определили. Каждое событие означает что-то конкретное. Предполагая, что перенаправление имеет какое-либо отношение к сетевой проблеме или занятому серверу, нет смысла. Конечно, медленное перенаправление может быть связано с этими элементами... но это может быть связано с 100 другими вещами или, возможно, даже намеченными. Также учитывайте, что сетевые условия широко варьируются во всем мире. Короче говоря, определения as-is являются лучшими.

Если у вас есть конкретный вопрос о значении, и если спецификация W3C недостаточно ясна для вас, я рекомендую задать конкретный вопрос об определенном элементе, который вы путаете.