wwwoldi.ru

About Me

Dashy

Hello word I am dashy Guy

Разное

Событие загрузки страницы js: Страница: DOMContentLoaded, load, beforeunload, unload
alexxlab
No Comments

Содержание

Document: DOMContentLoaded event — Интерфейсы веб API

Событие DOMContentLoaded  запускается когда первоначальный HTML документ будет полностью загружен и разобран, без ожидания полной загрузки таблиц стилей, изображений и фреймов.

Всплытие да
Отменяемый Да (хотя указано как простое событие, которое не может быть отменено)
Интерфейс Event
Свойство обработчика событий нет

Разные события,load, должны быть использованы только для обнаружения полностью загруженной страницы. Это распространённая ошибка в использовании load, там где DOMContentLoaded было бы более уместным.

Синхронный JavaScript останавливает разбор DOM. Если вы хотите что бы DOM был разобран как можно быстрее после того как пользователь запросит страницу, вы должны сделать ваш JavaScript асинхронным and оптимизировать загрузку таблиц стилей. Если загружать как обычно, таблицы стилей  тормозят разбор DOM так как они загружаются параллельно, «крадя» трафик у основного HTML документа.

Основное применение

document.addEventListener('DOMContentLoaded', (event) => {
    console.log('DOM полностью загружен и разобран');
});

Отложенный DOMContentLoaded

<script>
  document.addEventListener('DOMContentLoaded', (event) => {
    console.log('DOM полностью загружен и разобран');
  });

for( let i = 0; i < 1000000000; i++)
{} 
   
</script>

Проверка того, завершена ли загрузка

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

function doSomething() {
  console.info('DOM загружен');
}

if (document.readyState === 'loading') {  
  document.addEventListener('DOMContentLoaded', doSomething);
} else {  
  doSomething();
}

Живые примеры

HTML
<div>
  <button type="button">Reload</button>
</div>

<div>
  <label>Event log:</label>
  <textarea readonly rows="8" cols="30"></textarea>
</div>
JS
const log = document.querySelector('.event-log-contents');
const reload = document.querySelector('#reload');

reload.addEventListener('click', () => {
  log.textContent ='';
  window.setTimeout(() => {
      window.location.reload(true);
  }, 200);
});

window.addEventListener('load', (event) => {
    log.textContent = log.textContent + 'load\n';
});

document.addEventListener('readystatechange', (event) => {
    log.textContent = log.textContent + `readystate: ${document.readyState}\n`;
});

document.addEventListener('DOMContentLoaded', (event) => {
    log.textContent = log.textContent + `DOMContentLoaded\n`;
});
Result

BCD tables only load in the browser

jQuery | полная загрузка страницы

  index.html  

<!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8" />
 <title>New Страница</title>
 <!-- подключаем библиотеку онлайн через Google CDN -->
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
 <script>
  /*в JavaScript это событие onload*/
  window.onload = function() {
   var a = document.getElementById('p1');
   a.style.color = '#F00';
   a.style.fontSize = '22px';
  }
 
  /*в jQuery это метод ready()*/
  $(document).ready(function () {
   $('#p2').css({ 'color': '#0F0', 'font-size': '22px' });
  });
 
  /*в jQuery это сокращенный метод*/
  $(function () {
   $('#p3').css({ 'color': '#00F', 'font-size': '22px' });
  });
 
 </script>
</head>
<body>
 <div>
  <p>Hello World!</p>
  <p>Hello World!</p>
  <p>Hello World!</p>
  <p>Hello World!</p>
 </div>
 <script>
  /*скрипт находится в конце файла*/
  $('#p4').css({ 'color': '#FF6600', 'font-size': '22px' });
 </script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8" />
 <title>New Страница</title>
 <!-- подключаем библиотеку онлайн через Google CDN -->
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
 <script>
  /*в JavaScript это событие onload*/
  window.onload = function() {
   var a = document.getElementById('p1');
   a.style.color = '#F00';
   a.style.fontSize = '22px';
  }
 
  /*в jQuery это метод ready()*/
  $(document).ready(function () {
   $('#p2').css({ 'color': '#0F0', 'font-size': '22px' });
  });
 
  /*в jQuery это сокращенный метод*/
  $(function () {
   $('#p3').css({ 'color': '#00F', 'font-size': '22px' });
  });
 
 </script>
</head>
<body>
 <div>
  <p>Hello World!</p>
  <p>Hello World!</p>
  <p>Hello World!</p>
  <p>Hello World!</p>
 </div>
 <script>
  /*скрипт находится в конце файла*/
  $('#p4').css({ 'color': '#FF6600', 'font-size': '22px' });
 </script>
</body>
</html>


Как запустить код VueJS только после полной загрузки и инициализации Vue?


используйте vue mounted()для запуска любого кода при загрузке страницы и updated()для выполнения после любых операций с компонентами, поэтому идеальным решением было бы объединить как Roy j, так и vue ловушки жизненного цикла


mounted() {
    window.addEventListener('load', () => {
         // run after everything is in-place
    })
},

// 99% using "mounted()" with the code above is enough, 
// but incase its not, you can also hook into "updated()"
//
// keep in mind that any code in here will re-run on each time the DOM change
updated() {
    // run something after dom has changed by vue
}



обратите внимание, что вы можете опустить window.addEventListener()и он все равно будет работать, но он может пропустить +, если вы используете что-то вроде jquery, outerHeight(true)лучше использовать его внутри события окна, чтобы убедиться, что вы получаете правильные значения.


Обновление 1:


вместо этого window.addEventListener('load')есть и другой способ с помощью document.readyStateвышеупомянутого может быть


mounted() {
  document.onreadystatechange = () => { 
    if (document.readyState == "complete") { 
        // run code here
    } 
  }
},



Обновление 2:


самый надежный способ, который я нашел до сих пор, будет использовать debounceдальше $nextTick, поэтому использование становится


import debounce from 'lodash/debounce'

// bad
updated() {
    this.$nextTick(debounce(() => {
        console.log('test') // runs multiple times
    }, 250)) // increase to ur needs
}

// good
updated: debounce(function () {
    this.$nextTick(() => {
        console.log('test') // runs only once
    })
}, 250) // increase to ur needs



при использовании debounce с обновленным он становится сложным, поэтому не забудьте протестировать его на b4.


Обновление 3:


Вы также можете попробовать MutationObserver


                        Автор: ctf0

                        Размещён: 13.09.2017 12:49


Что означают gtm.js, gtm.dom, gtm.load в Google Tag Manager?


Что означают три события gtm.js, gtm.dom, gtm.load в dataLayer, которые срабатывают по умолчанию в Google Tag Manager и которые мы видим в режиме предварительного просмотра при загрузке любой страницы?


Каждый раз, когда загружается страница вашего сайта, в уровень данных передается информация о трех событиях: Container Loaded (gtm.js), DOM Ready (gtm.dom) и Window Loaded (gtm.load).


Режим отладки — 3 события по умолчанию


Если мы перейдем в консоль разработчика (клавиша F12 в Google Chrome) на вкладку Console, введем dataLayer и нажмем Enter, то увидим тот же самый результат:


dataLayer в консоли разработчики


Что же означают эти события?


Жизненный цикл HTML-страницы состоит из трех важных событий: DOMContentLoaded, load и beforeunload/unload. Первое отвечает за полную загрузку HTML и построение DOM-дерева, второе за окончательную прогрузку HTML и всех внешних ресурсов (включая картинки, стили и т.д.), а последнее срабатывает, когда пользователь покидает страницу сайта.


Подробнее об этом читайте в документации learn.javascript.ru. Важно отметить, что два из трех вышеперечисленных событий по умолчанию срабатывают и в Google Tag Manager.


1. Container Loaded (gtm.js)


Это первое событие, которое запускает триггер gtm.js, помещается в dataLayer и срабатывает тогда, когда контейнер GTM готов к работе.


Не так давно разработчики Google переименовали данное событие в Container Loaded. Раньше это событие называлось Page View (Просмотр страницы), что несколько вводило интернет-маркетологов в заблуждение, поскольку в Google Tag Manager по умолчанию существует триггер со схожим названием Page View (All Pages), который используется при настройке отслеживания тегов на всех страницах сайта. Да и Page View меньше охарактеризовало себя как событие, поскольку правильнее было бы говорить именно о загрузке самого контейнера Google Tag Manager, а не о просмотре страницы.


Примечательно, что данное событие содержит в себе отметку времени в gtm.start:


gtm.js с отметкой времени в gtm.start


В дальнейшем мы можем использовать переменную уровня данных gtm.start для своих целей, например, для определения времени начала пользовательской сессии.


Как вы уже знаете, события в режиме отладки отображаются в хронологическом порядке по мере их запуска. Каждое из них имеет свой порядковый номер. Container Loaded — первое событие на представленном примере.


Примечание: некоторые события могут срабатывать ДО загрузки контейнера GTM. В этом случае Container Loaded может иметь другой порядковый номер, отличный от единицы. Например:


Container Loaded загружается вторым по порядку


Здесь Container Loaded загружается вторым по порядку, до загрузки контейнера Google Tag Manager уже доступна информация по userId.


2. DOM Ready (gtm.dom)


Событие, которое запускает триггер gtm.dom, помещается в dataLayer и срабатывает как только браузер загрузит объектную модель документа (Document Object Model). Событие происходит когда весь HTML был полностью загружен и пройден парсером, не дожидаясь окончания загрузки таблиц стилей, изображений и фреймов.


3. Window Loaded (gtm.load)


Событие, которое запускает триггер gtm.load, помещается в dataLayer и срабатывает после завершения загрузки всей страницы и всех связанных ресурсов (загрузки таблиц стилей, изображений, фреймов), когда окно полностью загружено.


Разница в скорости загрузки


Для наглядности сравним время, через которое срабатывает каждое представленное событие. Воспользуемся расширением для браузера Adswerve — dataLayer Inspector+ и вкладкой Console. Обновив страницу, мы увидим переданные события с временной меткой:


Хронология с событиями и таймингом (расширение dataLayer Inspector+)


Примечание: временная метка включается в Google Chrome через Настройки — раздел Console — галочка Show timestamps.


На примере выше у нас событие gtm.js произошло в 11:37:53.901, событие gtm.dom в 11:37:54.198, а последнее событие gtm.load в 11:37:57.690, то есть через 0,790 секунды позже, чем загрузился контейнер GTM, и на 0,492 секунды позже, чем загрузилась объектная модель документа (DOM).


Аналогично можно увидеть различия, если мы перейдем на вкладку Network и обновим страницу:


Консоль разработчика — вкладка Network


Если сайт тяжелый, имеет большое количество неоптимизированных картинок, долго загружаются скрипты, вы зашли на него впервые (страница не закэширована), то разница между DOMContentLoaded и Load может быть существенной. И вот как раз здесь возможна ситуация, при которой вы будете пытаться прикрепить слушатель к элементу, которого еще не существует. Триггер GTM сработает, но информация через тег в инструменты веб-аналитики не попадет, поскольку не будет еще определена.


Какое из трех событий выбрать в качестве триггера?


Триггеры «Просмотр страницы»


Зависит от конкретной задачи и от момента, когда ваши данные будут готовы к отправке в инструменты аналитики:


    

  • если информация доступна до загрузки контейнера Google Tag Manager, и вы хотите, чтобы ваши теги срабатывали в самый ранний момент, вы можете отправлять данные сразу же, используя триггеры Пользовательское событие с именем gtm.js или Просмотр страницы (Page View).
    • 

  • если  вы хотите, чтобы ваши теги запускались после загрузки объектной модели документа, вы можете использовать триггеры Пользовательское событие с именем gtm.dom или Модель DOM готова (DOM Ready).
    • 

  • если вы не знаете, когда точно точно появляется доступ к элементу на странице, вы можете использовать триггеры Пользовательское событие с именем gtm.load или Window Loaded (Окно загружено).
    • 



События для одностраничных сайтов (SPA)


Одностраничное приложение (SPA, Single Page Application) — это веб-сайт / веб-приложение, основанное на JavaScript-фреймворках, которое загружает весь контент, необходимый для навигации по сайту, при загрузке первой страницы. А когда пользователь взаимодействует со страницей, контент динамически подается через JavaScript вместо отправки запроса на сервер.


Поэтому, когда вы устанавливаете Google Tag Manager на своем SPA-сайте, первая загрузка запустит все три события gtm.js, gtm.dom, gtm.load. Но вы не увидите других таких событий, поскольку страница не перезагружается. Чтобы отслеживать последующие страницы в одностраничных приложениях, вам нужно использовать виртуальные страницы, а само отслеживание можно на основе триггера типа Изменение в истории (gtm.historyChange).


Web-разработка • JavaScript и jQuery




Lazy Load — это jQuery плагин, который позволяет осуществить отложенную загрузку изображений, что актуально для страниц с большим количеством изображений. Изображения загружаются по мере пролистывания страницы пользователем. Использование Lazy Load позволяет увеличить скорость загрузки страницы и уменьшить нагрузку на сервер.



Как использовать?




Поскольку Lazy Load — плагин jQuery, сперва подключаем библиотеку jQuery, а потом сам плагин:



<script src="jquery.js" type="text/javascript"></script>
<script src="jquery.lazyload.js" type="text/javascript"></script>




Далее необходимо изменить HTML код. В качестве значения атрибута src изображения указываем заглушку — gif серого цвета размером 1px на 1px. В качестве значения атрибута data-original указываем URL настоящего изображения.





Также необходимо указать размеры изображения width и height как атрибуты тега <img>, или в стилях CSS. Иначе плагин может работать некорректно.



<img src="img/grey.gif" data-original="img/example.jpg">




И после этого:



$("img.lazy").lazyload();




Теперь все изображения с классом lazy будут загружаться по мере пролистывания страницы.



Для бразеров без поддержки JavaScript




В случае если у пользователя не поддерживается или отключен JavaScript, имеется возможность отобразить изображение поместив его в тег <noscript>.



<img src="img/grey.gif" data-original="img/example.jpg">
<noscript><img src="img/example.jpg"></noscript>




Для предотвращения одновременного отображения заглушки и изображения рекомендуется спрятать заглушку с помощью CSS.



.lazy {
    display: none;
}




Для браузеров с поддержкой JavaScript необходимо отобразить заглушку во время загрузки страницы. Это можно сделать вместе с инициализацией плагина.



$("img.lazy").show().lazyload();




Всё это опционально и нужно лишь в случае если вы хотите поддерживать браузеры без JavaScript.



Порог срабатывания




По умолчанию изображения загружаются в момент появления на экране. Если вы хотите чтобы они загружались раньше — установите параметр threshold. Для того, чтоб изображения загружались за 200 пикселей до того, как они отобразятся на экране, установите значение threshold равным 200.



$("img.lazy").lazyload({
    threshold: 200
});


События




Вы можете обработать любое jQuery-событие, например click или mouseover. По-умолчанию изображения загружаются во время отображения на экране. Ниже приведен пример позволяющий загружать изображение после клика по заглушке:



$("img.lazy").lazyload({ 
    event: "click"
});


Использование эффектов




По-умолчанию плагин ждет полной загрузки изображения и тогда вызывает show() для его отображения. При этом можно использовать любой эффект. Пример использования fadeIn-эффекта:



$("img.lazy").lazyload({ 
    effect: "fadeIn"
});


Изображения внутри контейнера




Так же вы можете использовать изображения внутри контейнера, например div с прокруткой. Смотрите пример с горизонтальной и вертикальной прокруткой.



#container {
    height: 600px;
    overflow: scroll;
}


$("img.lazy").lazyload({         
    container: $("#container")
});


Когда изображения не последовательны




После прокрутки страницы Lazy Load беспрерывно ищет незагруженные изображения. В этом цикле он проверяет, появилось ли изображение в видимой части окна браузера. По умолчанию цикл останавливается после того, как во время прокрутки в видимой части экрана появится первое изображение (которое ранее было за пределами видимости). Это базируется на предположении, что порядок изображений на странице такой же, как и в HTML коде. В некоторых случаях это может быть не так. Вы можете контролировать поведение загрузки, задав параметр failure_limit.



$("img.lazy").lazyload({ 
    failure_limit: 10
});




Установка значения failure_limit в 10 означает, что плагин должен остановить поиск изображений для загрузки после того, как будет найдено 10 изображений в невидимой части окна.



Загрузка изображений через заданный промежуток времени




Нижеприведенный код ожидает полной загрузки страницы (не только HTML, но и всех видимых изображений). Через 5 секунд после загрузки страницы, будут загружены изображения находящиеся в невидимой части окна браузера.



$(function() {          
    $("img:below-the-fold").lazyload({
        event: "sporty"
    });
});
$(window).bind("load", function() { 
    var timeout = setTimeout(function() { $("img.lazy").trigger("sporty") }, 5000);
});


Загрузка скрытых изображений




Бывают случаи, когда у вас на странице есть скрытые изображения. Например во время динамического изменения видимости некоторых объектов. Для ускорения работы Lazy Load игнорирует скрытые изображения. Если вы хотите загружать скрытые изображения, установите значение skip_invisible в false.



$("img.lazy").lazyload({ 
    skip_invisible: false
});



            Поиск:

            CSS • HTML • JavaScript • Web-разработка • jQuery        


    Окно 


: событие загрузки — веб-API 


 Событие   load   запускается, когда загружается вся страница, включая все зависимые ресурсы, такие как таблицы стилей и изображения. Это отличается от  DOMContentLoaded , который запускается, как только страница DOM загружена, не дожидаясь завершения загрузки ресурсов. 






 Пузырьки 
 Нет 




 Отмена 
 Нет 




 Интерфейс 
  Событие  




 Свойство обработчика событий 
  загрузка  






 Записывать сообщение, когда страница полностью загружена: 


  окно.addEventListener ('загрузка', (событие) => {
  console.log ('страница полностью загружена');
});  


 То же, но с использованием свойства обработчика событий  onload : 


  window.onload = (событие) => {
  console.log ('страница полностью загружена');
};
  


 Живой пример 


 HTML 


  

  





  
  

  


 JS 


  const log = документ.querySelector ('. содержимое журнала событий');
const reload = document.querySelector ('# reload');

reload.addEventListener ('клик', () => {
  log.textContent = '';
  window.setTimeout (() => {
      window.location.reload (правда);
  }, 200);
});

window.addEventListener ('load', (event) => {
    log.textContent = log.textContent + 'load \ n';
});

document.addEventListener ('readystatechange', (событие) => {
    log.textContent = log.textContent + `readystate: $ {document.readyState} \ n`;
});

document.addEventListener ('DOMContentLoaded', (событие) => {
    бревно.textContent = log.textContent + `DOMContentLoaded \ n`;
});

  


 Результат 


 Таблицы BCD загружаются только в браузере 


 Процесс загрузки страницы | Документация New Relic 


 В этом документе объясняется: 


    

  •  Как загружается веб-страница 
    • 

  •  Как мониторинг браузера измеряет время загрузки страницы, также известный как мониторинг реального пользователя (RUM) 
    • 



 Процесс загрузки страницы 


 Вот основные шаги в загрузка большинства веб-страниц. Цифры 1-6 на схеме соответствуют пронумерованным шагам ниже.




  График загрузки страницы:  Шаги загрузки веб-страницы. Диаграммы мониторинга браузера отображают следующие сегменты этого процесса:  Сеть ,  Веб-приложение ,  Обработка DOM  и  Отрисовка страницы . 


    

  1.  Загрузка страницы начинается, когда пользователь выбирает гиперссылку, отправляет форму или вводит URL-адрес в браузере. Это также называется начальным запросом   или запуском навигации  .Действие пользователя отправляет запрос   по сети на сервер веб-приложений. 
    2. 

  2.  Запрос поступает в приложение для обработки. (Для начала обработки запроса может потребоваться некоторое время. Это может быть результатом  очереди запросов  или других факторов.) 
    3. 

  3.  Приложение завершает обработку и отправляет ответ HTML   обратно по сети пользователю браузер. Иногда это называется , начало ответа  или , первый байт .
    4. 

  4.  Браузер пользователя получает ответ HTML и начинает обрабатывать объектную модель документа или  DOM . 
    5. 

  5.  DOM завершает загрузку; эта точка известна как  DOM ready . Используя DOM, браузер пользователя начинает отображать страницу. 
    6. 

  6.  Страница завершает рендеринг в браузере пользователя, и возникает событие загрузки окна  . (Для страниц, использующих асинхронную загрузку, некоторые элементы могут продолжать загружаться после возникновения события загрузки окна.) 
    7. 



 Диаграммы времени загрузки страницы в мониторинге браузера 


 Мониторинг браузера фиксирует основные сегменты времени загрузки страницы на странице обзора  Сводка  и странице  просмотров страницы . Если у вас включен мониторинг SPA, у вас будет доступ как к этой диаграмме, так и к диаграммам, связанным с SPA. Диаграммы показывают: 


    

  •  Сеть 
    • 

  •  Время веб-приложения 
    • 

  •  Обработка DOM 
    • 

  •  Отрисовка страницы 
    • 

  •  Другие применимые сегменты, например, очередь запросов 
    • 



 Цвета диаграммы соответствуют цветам на временной диаграмме загрузки страницы.




  one.newrelic.com> Браузер> (выберите приложение)> Сводка : диаграмма времени загрузки отображается на странице  Сводка  и  с просмотром страниц . 


 Способ, которым браузер собирает это время, зависит от способности браузера использовать API спецификации времени навигации. Вы можете добавить пользовательские события времени загрузки страницы с помощью API агента браузера. 


 Вот описания действий, включенных в сегменты диаграммы времени загрузки браузера: 


 Веб-приложение 


 Время веб-приложения включает время, проведенное на сервере приложений.Это можно определить только в том случае, если инструментарий браузера для времени загрузки страницы был предоставлен агентом APM. 


 Сеть 


 Сетевой уровень включает время, затрачиваемое на перенаправления, а также на запрос и получение HTML. Он не включает время на сервере или статические активы. 


 Измерение сетевого времени начинается с первого щелчка по ссылке. Сетевое время включает DNS и может включать более одного поиска, если у вас есть перенаправления на вашем сайте, TCP (включая брандмауэр, если вы не настроили мониторинг времени очереди запросов) и время соединения SSL.


    

  • 

     Если у вас  настроен мониторинг времени очереди запросов , то сетевое время  не включает в себя  время очереди запросов, которое происходит после заголовка X-Request. 
    

    • 

  • 

     Если у вас  не настроен  мониторинг времени очереди запросов, то сетевое время  включает ли  все время очереди запросов. 
    

     API спецификации времени навигации предоставляет подробную разбивку сетевого времени. (Для старых браузеров таймер запускается по событию «перед выгрузкой».») 
    

     Для приложений, которые были развернуты с использованием метода копирования / вставки, браузер включает веб-приложение и время очереди в сетевое время. Это связано с тем, что браузер полагается на серверного агента для передачи значений приложения агенту браузера через автоматическое -injection. 
    

     Для получения дополнительной информации о том, как это внутреннее время разбивается с точки зрения браузера, используйте страницу  Session Traces . Трассировка сеанса сообщает обо всех доступных сетевых событиях, поэтому вы можете увидеть в индивидуальном порядке, как браузер тратит время на поиск DNS и другие сетевые события.
    

     Важно 
    

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

    • 



 Обработка DOM 


 Обработка DOM — это время, необходимое для синтаксического анализа HTML в DOM и извлечения или выполнения синхронных сценариев. Если браузер начинает загружать изображения на этом этапе, время загрузки страницы будет фиксировать время загрузки изображения. 


 Слои обработки DOM и отрисовки страницы включают сетевое время для статических ресурсов (ресурсов, которые не извлекаются явно после загрузки страницы).Однако, если сценарий на странице динамически вставляет теги изображений и загружает изображения после завершения работы сервера или системы доставки контента (CDN), время загрузки страницы не может фиксировать время загрузки изображения. 


 Отрисовка страницы 


 Фаза отрисовки страницы — это время между завершением DOM и событием загрузки окна. На этом этапе измеряется обработка содержимого страницы на стороне браузера и часто включается время загрузки скриптов и статических ресурсов. 


 Очередь запросов 


  Очередь запросов  будет отображаться на графике времени загрузки, если к вашей учетной записи привязаны браузер и APM.В New Relic под очередью запросов понимается время между запросом, поступающим в ваши производственные системы, и его достижением в вашем приложении. В зависимости от специфики вашей производственной инфраструктуры это время может включать фактическую очередь, в которую входят запросы, или может представлять другие функции, требующие времени (например, балансировка нагрузки или задержка внутренней сети). 


 Запросы сервера приложений и транзакции браузера 


 Часто количество транзакций сервера приложений (запросов в минуту или  об / мин ) превышает количество транзакций браузера (страниц в минуту или  ppm ) для одного и того же приложения.Для получения дополнительной информации см. Процедуры устранения неполадок. 


 Выбросы 


 Независимо от того, насколько хорошо работает ваше приложение, будут медленные браузеры, платформы и сети, из-за которых общее время отклика будет казаться медленнее. Чтобы свести к минимуму перекос, вызванный выбросами, время загрузки страницы ограничивает и масштабирует время ответа конечного пользователя, которое больше, чем в 4,5 раза, установленное в вашем приложении Browser Apdex T, до 4,5-кратного значения Apdex T или до 13,5 секунд, в зависимости от того, что больше.(Выбросы гистограммы отсекаются на 95%.) 


 Например, если пороговое значение Apdex T для конечного пользователя вашего приложения составляет 8 секунд, то время отклика будет ограничено 36 секундами. Это сводит к минимуму влияние времени отклика на ваше приложение в целом, но по-прежнему обеспечивает учет «неудовлетворительных» оценок Apdex. 


 Для мониторинга SPA выбросы обрабатываются по-другому. Когда продолжительность начальной загрузки страницы или изменения маршрута достигает 30 минут, это событие обрабатывается как недопустимые данные и отбрасывается.


 Для получения дополнительной помощи 


 Дополнительные ресурсы документации включают: 


 Показатели скорости страницы — Поддержка FullStory 


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


 Какие показатели скорости страницы фиксирует FullStory? 


 В потоке событий для воспроизведения любого сеанса FullStory покажет три ключевых показателя для каждой посещенной страницы: 




 Первая насыщенная краска (FCP) 


 Событие First Contentful Paint относится к моменту, когда первый элемент из DOM появляется в браузере пользователя.


 Здесь, в FullStory, мы считаем, что этот показатель наиболее тесно связан с опытом пользователя с точки зрения восприятия страницы, которая будет «загружена», и мы используем FCP в качестве нашего собственного эталона для скорости страницы. 


 В частности, это событие возникает, когда браузер визуализирует любой текст, изображение (включая фоновые изображения), небелую основу или SVG, и отмечает момент, когда пользователи могут начать использовать контент на странице. 


 Примечание. FCP исключает содержимое с iframe. 


 Улучшите FCP, оптимизируя критический путь рендеринга.Это означает, что нужно обдумать, как, когда и в каком порядке загружается контент страниц. Поскольку FCP является одним из самых ранних событий в общей загрузке страницы, время сервера и сети может иметь большое влияние на время FCP. Например, высокое время до первого байта также приведет к высокому FCP. 


 Подробнее об этой метрике читайте в документации для разработчиков Lighthouse. 


 DOMContentLoaded (DCL) 


 На высоком уровне DOMContentLoaded дает вам представление о том, сколько времени потребовалось для загрузки HTML, чтобы страница могла начать рендеринг содержимого.


 В частности, DOMContentLoaded срабатывает, когда исходный документ HTML загружен и проанализирован. Часто этот этап происходит до завершения загрузки таблиц стилей, изображений и подфреймов, поэтому событие DOMContentLoaded возникает за  до того, как страница  будет отрисована. 


 Таблицы стилей, шрифты и JavaScript 


 могут блокировать интерактивность и загрузку модели DOM, поэтому оптимизируйте таблицы стилей и используйте асинхронный JavaScript, чтобы ускорить этот показатель скорости страницы. 


 Подробнее об этой метрике читайте в документации для разработчиков Mozilla.


 Загрузка страницы 


 Событие onload или «Загрузка страницы» срабатывает, когда вся страница и все зависимые от нее ресурсы завершили загрузку. 


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


 Хотя показатель «Загрузка страницы» не так тесно связан с воспринимаемой клиентом производительностью страницы, может быть полезно следить за временем загрузки страницы, чтобы понять, сколько ресурсов загружается на вашу страницу после первой отрисовки содержимого.


 Примечание. В случаях, когда FullStory не может получить данные о производительности и не может записать событие загрузки — что иногда может случиться с отскоком посетителей — FullStory по умолчанию устанавливает время загрузки страницы на 1 мс. 


 Дополнительные сведения о загрузке страницы см. В документации разработчика Mozilla. 


 Просмотр сети и файла HAR 


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




 Сетевое представление позволяет анализировать, что произошло во время загрузки страницы. Узнайте больше об использовании представления сети в FullStory. 


 Файл HAR может быть очень полезен при сохранении в качестве записи сведений о загрузке страницы для любой данной страницы в рамках сеанса. 


 Файл HAR — это стандартный формат для просмотра ресурсов, которые способствуют загрузке страницы, в представлении «водопадная диаграмма». Файл HAR загружается в формате .json / .har и включает подробные сведения о времени запроса, информацию о DNS, размеры активов и сведения о подключении к серверу.Помимо FullStory, вы можете визуализировать файлы .har с помощью инструментов разработчика Chrome (просто перетащите файл на пустую вкладку «Сеть» в своем браузере!) Или инструмента HAR Analyzer от Google. 




 Как искать сеансы с медленными страницами? 


 Помимо возможности просмотра показателей скорости страницы в потоке событий во время воспроизведения сеанса, FullStory также позволяет искать сеансы с медленными страницами в OmniSearch. 


 Есть два способа поиска сеансов с медленными страницами.Вы можете либо: 


 Поиск медленных страниц с помощью OmniSearch 


 Чтобы начать новый поиск, щелкните панель OmniSearch и найдите критерий «Загрузка страницы» в разделе «Производительность». 




 Щелкните «Загрузка страницы», чтобы начать новый поиск с критериями загрузки страницы. 


 Затем используйте раскрывающееся меню, чтобы выбрать метрику для поиска: First Contentful Paint, DOMContentLoaded или Page Load. 




 Затем обновите критерии для поиска сеансов, когда страница была не менее определенного количества секунд.




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




 Начальная загрузка для поиска медленной загрузки страницы на основе показателей скорости страницы 


 На любой странице в рамках любого сеанса вы можете щелкнуть любой показатель скорости страницы, чтобы открыть параметры «Добавить в поиск» и «Создать новый поиск». 




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


 Этот метод запуска поиска особенно полезен, если вы видите что-то подозрительное во время сеанса и хотите быстро понять: «Как другие клиенты видели сеансы, в которых страницы загружались аналогично загрузке этой страницы?» 


 FullStory Page Speed ​​Metrics и профилировщик производительности Chrome 


 Если вы использовали профилировщик производительности Google Chrome, вы могли заметить, что данные в профилировщике производительности не соответствуют числам, которые вы видите в FullStory. Это связано с тем, что когда вы выбираете «начать профилирование и перезагрузить страницу» в профилировщике производительности Chrome, показатели скорости страницы в Chrome берутся с момента нажатия кнопки, включая e.грамм. выгрузить обработчики с предыдущей страницы. Напротив, показатели скорости страницы FullStory, которые основаны на API производительности браузера (например), относятся к «navigationStart». 


 Для иллюстрации, если вы запускаете профилировщик производительности Chrome на странице и первая отрисовка содержимого (FCP) отображается как 851,8 мс при начальном значении навигации 299,31, вы заметите, что значение FCP в FullStory будет 552,49. Значение 552,49, полученное из API производительности браузера, как раз и представляет собой разницу между тем, что профилировщик производительности Chrome сообщил для FCP и начала навигации.


 Порядок загрузки для правил 


 Порядок загрузки динамического управления тегами по отношению к порядку загрузки JavaScript. 


 На следующей диаграмме показан общий порядок загрузки страниц. 




 ПРИМЕЧАНИЕ 


 Красный текст на диаграмме выше означает непоследовательную активность. Зеленый текст обозначает последовательную деятельность. 


 В следующем разделе обсуждается, как различные параметры сценария JavaScript / сторонних тегов используются на четырех этапах загрузки страницы: 


    

  • 

      Начало страницы  
    

      

    •   Последовательный HTML:  Встраивается в    под библиотекой DTM, включая сценарий, если используются теги

Вам также следует подумать о настройке вашей системы упаковки ресурсов для отпечатка каждого скрипта, чтобы он имел новый URL-адрес при изменении его содержимого.Затем вы можете использовать атрибут data-turbo-track для принудительной перезагрузки полной страницы при развертывании нового пакета JavaScript. См. Дополнительную информацию в разделе «Перезагрузка при изменении активов».

﹟ Общие сведения о кэшировании

Turbo Drive поддерживает кэш недавно посещенных страниц. Этот кеш служит двум целям: для отображения страниц без доступа к сети во время посещений для восстановления и для улучшения воспринимаемой производительности путем отображения временных превью во время посещений приложений.

При навигации по истории (через посещения для восстановления) Turbo Drive восстановит страницу из кеша, не загружая новую копию из сети, если это возможно.

В противном случае, во время стандартной навигации (через посещения приложений) Turbo Drive немедленно восстановит страницу из кеша и отобразит ее как предварительный просмотр, одновременно загружая новую копию из сети. Это создает иллюзию мгновенной загрузки страниц для часто используемых мест.

Turbo Drive сохраняет копию текущей страницы в кэш непосредственно перед рендерингом новой страницы. Обратите внимание, что Turbo Drive копирует страницу с использованием cloneNode (true) , что означает, что все подключенные прослушиватели событий и связанные данные отбрасываются.

﹟ Подготовка страницы к кэшированию

Прослушайте событие turbo: before-cache , если вам нужно подготовить документ до того, как Turbo Drive его кэширует. Это событие можно использовать для сброса форм, свертывания развернутых элементов пользовательского интерфейса или удаления любых сторонних виджетов, чтобы страница была готова к повторному отображению. 

  document.addEventListener ("turbo: before-cache", function () {
})

﹟ Обнаружение, когда предварительный просмотр виден

Turbo Drive добавляет атрибут data-turbo-preview к элементу , когда он отображает предварительный просмотр из кеша.Вы можете проверить наличие этого атрибута, чтобы выборочно включать или отключать поведение при предварительном просмотре. 

  if (document.documentElement.hasAttribute ("данные-турбо-предварительный просмотр")) {
}

﹟ Отказ от кеширования

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

Используйте директиву no-preview , чтобы указать, что кэшированная версия страницы не должна отображаться в качестве предварительного просмотра во время посещения приложения.Страницы, отмеченные как запрещенные для предварительного просмотра, будут использоваться только для посещений для восстановления.

Чтобы указать, что страницу вообще не следует кэшировать, используйте директиву no-cache . Страницы, помеченные как не кэшируемые, всегда будут загружаться по сети, в том числе во время посещений для восстановления. 

   
 ...

Чтобы полностью отключить кеширование в вашем приложении, убедитесь, что каждая страница содержит директиву no-cache.

﹟ Установка поведения JavaScript

Вы можете использовать для установки поведения JavaScript в ответ на события window.onload , DOMContentLoaded или jQuery ready . В Turbo эти события будут срабатывать только в ответ на загрузку начальной страницы, а не после любых последующих изменений страницы. Мы сравниваем две стратегии для подключения поведения JavaScript к DOM ниже.

﹟ Наблюдение за навигационными событиями

Turbo Drive запускает серию событий во время навигации.Наиболее важным из них является событие turbo: load , которое срабатывает один раз при начальной загрузке страницы и еще раз после каждого посещения Turbo Drive.

Вы можете наблюдать событие turbo: load вместо DOMContentLoaded , чтобы настроить поведение JavaScript после каждого изменения страницы: 

  document.addEventListener ("turbo: load", function () {
})

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

Также обратите внимание, что навигация Turbo Drive может быть не единственным источником обновлений страниц в вашем приложении, поэтому вы можете переместить код инициализации в отдельную функцию, которую вы можете вызывать из turbo: load и в любом другом месте, где вы можете изменить ДОМ.

По возможности избегайте использования события turbo: load для добавления других прослушивателей событий непосредственно к элементам в теле страницы. Вместо этого рассмотрите возможность использования делегирования событий для однократной регистрации слушателей событий в документе или окне .

См. Полный список событий для получения дополнительной информации.

﹟ Поведение прикрепления со стимулом

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

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

Stimulus позволяет аннотировать ваш HTML-код с помощью атрибутов контроллера, действия и цели:

Установите совместимый контроллер, и Stimulus подключит его автоматически: 

  
 import {Controller} из "стимула" 
 export default class расширяет Controller {
 greet () {
 console.log (`Привет, $ {this.name}!`) 
} 
 
 get name () {
 return this.targets.find ("name"). value 
} 
}

Stimulus подключает и отключает эти контроллеры и связанные с ними обработчики событий всякий раз, когда документ изменяется с помощью MutationObserver API. В результате он обрабатывает изменения страницы Turbo Drive, навигацию Turbo Frames и сообщения Turbo Streams так же, как и любые другие типы обновления DOM.

﹟ Создание идемпотентных преобразований

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

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

Подумайте, что произойдет, если вы настроили эту функцию для работы на turbo: load .Когда вы переходите на страницу, ваша функция вставляет заголовки даты. Уйдите, и Turbo Drive сохранит копию преобразованной страницы в свой кеш. Теперь нажмите кнопку «Назад» - Turbo Drive восстанавливает страницу, запускает turbo: снова загружает , и ваша функция вставляет второй набор заголовков даты.

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

Один из способов сделать идемпотент преобразования - отслеживать, выполнили ли вы его уже, установив атрибут data для каждого обработанного элемента. Когда Turbo Drive восстанавливает вашу страницу из кеша, эти атрибуты все равно будут присутствовать. Обнаружьте эти атрибуты в своей функции преобразования, чтобы определить, какие элементы уже были обработаны.

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

﹟ Сохранение элементов при загрузке страницы

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

Рассмотрим приложение Turbo Drive с тележкой для покупок. Вверху каждой страницы есть значок с количеством товаров, которые в данный момент находятся в корзине.Этот счетчик динамически обновляется с помощью JavaScript по мере добавления и удаления элементов.

Теперь представьте пользователя, который перешел на несколько страниц в этом приложении. Она добавляет товар в корзину, затем нажимает кнопку «Назад» в браузере. Во время навигации Turbo Drive восстанавливает состояние предыдущей страницы из кеша, и количество товаров в корзине ошибочно изменяется с 1 на 0.

Этой проблемы можно избежать, пометив счетчик как постоянный. Обозначьте постоянные элементы, присвоив им HTML id и аннотируя их с помощью data-turbo-constant .

  
 1 шт.

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

Далее: установка Turbo в вашем приложении

Эффективная загрузка стороннего JavaScript

Избегайте распространенных ошибок использования сторонних скриптов для улучшения времени загрузки и удобства работы пользователей.

Появляется в: Быстрое время загрузки

Если сторонний сценарий замедляет загрузку вашей страницы, у вас есть два варианта повышения производительности:

В этом сообщении объясняется, как оптимизировать процесс загрузки третьего -party со следующими методами:

  1. Использование атрибута async или defer в тегах