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

1 - Верно, 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 веб-хронометража, а также поддерживает старые браузеры. На этой конференции есть доклад со слайдами и примерами кода текущего сопровождающего. Жаль нет прямой ссылки.

Теперь вы можете использовать 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();

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

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

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

На мой взгляд, Navigation Timing API не очень полезен, когда речь идет об измерении производительности одностраничного приложения.

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

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

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

1. API синхронизации ресурсов
2. Обтекание XMLHTTPRequest

Давайте посмотрим на различия между ними.

1. API синхронизации ресурсов

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

  performance.getEntriesByType('resource');

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

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

2. Обертка XMLHTTPRequest

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

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