Navigation Timing API — средство для выявления источников тормозов на проекте.
Как это работает?
Время загрузки страницы складывается из 3-х составляющих:
1. Время запроса от клиента к серверу (проблемы со связью?) 2. Возврат результатов обработки клиенту (сервак тупит?) 3. Рендеринг страницы (слабый клиент или много плагинов и прочего js?)
Внятного механизма получения значений времени, которое тратится на каждый из шагов раньше не было. Navigation Timing API как раз даёт возможность без труда определить это время на клиенте. В действительности, оно позволяет узнать даже больше (подробные описания таймингов есть у авторитетныхпарней):
Получить тайминги (timestamps) из браузера можно, используя interface PerformanceTiming { readonly attribute unsigned long longnavigationStart; readonly attribute unsigned long longunloadEventStart; readonly attribute unsigned long longunloadEventEnd; readonly attribute unsigned long longredirectStart; readonly attribute unsigned long longredirectEnd; readonly attribute unsigned long longfetchStart; readonly attribute unsigned long longdomainLookupStart; readonly attribute unsigned long longdomainLookupEnd; readonly attribute unsigned long longconnectStart; readonly attribute unsigned long longconnectEnd; readonly attribute unsigned long longsecureConnectionStart; readonly attribute unsigned long longrequestStart; readonly attribute unsigned long longresponseStart; readonly attribute unsigned long longresponseEnd; readonly attribute unsigned long longdomLoading; readonly attribute unsigned long longdomInteractive; readonly attribute unsigned long longdomContentLoadedEventStart; readonly attribute unsigned long longdomContentLoadedEventEnd; readonly attribute unsigned long longdomComplete; readonly attribute unsigned long longloadEventStart; readonly attribute unsigned long longloadEventEnd; };
Зачем это нужно? Пример: пользователи стали жаловаться, что страницы грузятся долго. Добиться чего-то более внятного, чем просто “долго”, невозможно, поэтому появилось такое решение:
Добавляем в шапку код, который сдирает данные из структуры выше + добавляем к ним время, когда страница окончательно собрана.
По вкусу добавляем к структуре имя пользователя, браузер, имя проекта.
Пакуем всё это дело, шлём на сервер. Примерно так:
tempOnLoad = window.onload; //сохраним битриксовые обработчики window.onload = function(){ checkTimings(); if (tempOnLoad){ tempOnLoad(); //возвращаем битриксовые обработчики } } function checkTimings(){
var temp = new Object(); for (var o in performance.timing){ /*костыль из-за различий между FF,IE и Chrome в понимании того, что же есть performance.timing*/ if (o == 'msFirstPaint') { //исключим специфику IE continue; } temp[o] = performance.timing[o]; } temp['secureConnectionStart'] = (temp['secureConnectionStart']) ? temp['secureConnectionStart'] : 0; // фикс для FF
var target = 'http://targetfile.php?time='+encodeURIComponent(JSON.stringify(temp)); var request = createCORSRequest('POST', target); request.send(); }
Что делать там с данными — уж кто как хочет. Наш вариант — график зависимости время загрузки от времени, когда данные были сняты с возможностью детального просмотра таймингов по каждому событию.
Александр Сербул , вот так можно померять задержки на клиент-сайде. Если внедрите на Bitrix24, то уже никаких «а у нас тормозило вчера» от недовольных клиентов.
Группы на сайте создаются не только сотрудниками «1С-Битрикс», но и партнерами компании. Поэтому мнения участников групп могут не совпадать с позицией компании «1С-Битрикс».