Могу ли я использовать API-интерфейс навигации навигации для событий Ajax в приложениях с одной страницей? Если нет, то какой хороший инструмент?

Ответ 1

1 - True, window.performance привязан к загрузке страницы. См. Пример ниже, который показывает это:

    <button id='searchButton'>Look up Cities</button>
    <br>
    Timing info is same? <span id='results'></span>
    <script type="text/javascript" src="//code.jquery.com/jquery-1.9.1.min.js"></script>
    <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/underscore.js/1.4.4/underscore-min.js"></script>
    <script type="text/javascript">
        jQuery('#searchButton').on('click', function(e){
            // deep copy the timing info
            var perf1 = jQuery.extend(true, {}, performance.timing);             
            // do something async
            jQuery.getJSON('http://ws.geonames.org/searchJSON?featureClass=P&style=full&maxRows=10&name_startsWith=Denv', function() {
                // get another copy of timing info
                var perf2 = jQuery.extend(true, {}, performance.timing);
                // show if timing information has changed
                jQuery('#results').text( _.isEqual( perf1, perf2 ) );
            });
            return false;
        });
    </script>

Кроме того, даже если вы его заработали, у вас не будет данных из старых браузеров, которые не поддерживают этот объект.

2 - Проект Boomerang, похоже, выходит за рамки API веб-синхронизации, а также поддерживает более старые браузеры. Существует беседа с слайдами и образцом кода текущего сопровождающего, перечисленных в этой конференции. Нет прямой ссылки.

Ответ 2

Кажется, что существует некоторая поддержка window.performance.getEntries(), которая даст вам подробную информацию о всех ресурсах, загруженных на страницу вместе с их URL-адресами. Я использую этот API для запросов jsonp (не XMLHttpRequest) в AzurePing.info для браузеров, которые его поддерживают, возвращается к new Date().getTime() для тех, кто нет.

В момент написания IE 10 и Chrome поддерживают getEntries, но Firefox этого не делает. К сожалению, не все временные свойства установлены - даже в Chrome и IE. Все, на что я мог положиться, это fetchStart, responseEnd и duration.

Источник примера находится на GitHub.

Ответ 3

Теперь вы можете использовать User Timing API (Рекомендация W3C от 12 декабря 2013 года), которая обеспечивает способ, с помощью которого вы можете вставлять вызовы API на разных части вашего Javascript, а затем извлекать подробные данные синхронизации.

Вы используете это с помощью mark(), это позволяет вам определить, сколько времени вам понадобилось, чтобы вы отметили эту метку в своем веб-приложении, а затем measure(), чтобы вычислить время, прошедшее между вашими отметками.

В вашем конкретном случае вы можете иметь что-то вроде этого:

app.render = function(content){
  myEl.innerHTML = content;
  window.performance.mark('end_render');
  window.performance.measure('measure_render', 'start_xhr', 'end_render');
};


var req = new XMLHttpRequest();
req.open('GET', url, true);
req.onload = function(e) {
  window.performance.mark('end_xhr');
  window.performance.measure('measure_xhr', 'start_xhr', 'end_xhr');
  app.render(e.responseText);
}
window.performance.mark('start_xhr');
myReq.send();

Ответ 4

API синхронизации навигации, на мой взгляд, не очень полезен, когда дело касается измерения производительности одного веб-сайта.

Наряду с уже упомянутым API-интерфейсом пользовательского времени API Resource Timing API гораздо полезнее. Этот API предоставляет функциональные возможности для получения таймингов для всех запросов, сделанных в пользовательском сеансе (фактически все, что вы видите на вкладках сети инструментов разработчика в большинстве браузеров). Эти тайминги включают время разворота, а также время поиска DNS и т.д.

К сожалению, это относительно новая спецификация и пока не реализована во всех браузерах. Chrome и IE > 10 обеспечивают реализацию (хотя еще не завершена). Удивительно, но IE, похоже, сейчас реализовал большинство unitl...

Ответ 5

Есть два способа сделать это

• API синхронизации времени
• Обтекание XMLHTTPRequest

Позволяет увидеть различия между ними.

1. API-интерфейс ресурса

Браузеры недавно добавили опоры для API синхронизации ресурсов. API-интерфейс ресурса имеет в основном временную информацию о каждом ресурсе, загруженном из приложения. Это могут быть запросы css, javascript или AJAX. Вы можете получить список сведений о ресурсах как

  performance.getEntriesByType('resource');

Он вернет массив объекта, где вы можете найти запросы AJAX initiatorType, который равен xmlhttprequest. Но есть некоторые ограничения.

• По умолчанию максимальный размер ресурса - 150. В приведенном выше массиве должно быть не более 150 ресурсов. Если вы хотите больше, вы можете увеличить размер буфера как performance.setResourceTimingBufferSize(500).
• Вы не получите информацию о том, успешно ли выполняются запросы AJAX или не удались.

2. Обтекание XMLHTTPRequest

Если вы можете обернуть свой XMLHTTPRequest API, вы получите всю необходимую информацию по времени, статусу и размеру байта. Но вы должны написать много тестов кода и теста, теста и теста.

[Отказ от ответственности] Я работаю для atatus.com, где мы помогаем вам измерять время загрузки страницы, AJAX времени и пользовательских транзакций. Также вы можете увидеть следы сеансов о том, как работают каждый ресурс.