Браузер тратит время между загрузкой ресурсов?

Question

Браузер тратит время между загрузкой ресурсов?

1

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

Протестировано на локальном (не требуется поиск DNS)

Почему кажется, что браузер тратит много времени на то, чтобы ничего не делать?

Моя страница пуста. Он содержит только скелет HTML, HEAD и BODY и необходимый код Javascript для вызова jQuery после загрузки страницы:

<!DOCTYPE html>
<html>
<head>
</head>
<body>
  Demo

  <script type="text/javascript">
    function downloadJSAtOnload(){
      var b = document.getElementsByTagName('body')[0];
      var s = document.createElement("script"); s.async = true;
      s.src = "jquery.min.js"
      b.appendChild(s);
    }

    if (window.addEventListener){
      window.addEventListener("load", downloadJSAtOnload, false);
    }else if (window.attachEvent){
      window.attachEvent("onload", downloadJSAtOnload);
    }else{
      window.onload = downloadJSAtOnload;
    }
  </script>
</body>
</html>

Это связано с тем, что для события onload требуется некоторое время для запуска?

Alvaro 06 янв. 2018, в 20:46

Источник

0

Я не мог повторить это, он был остановлен только на 2 мс, а не на 200+, используя Chrome 63.0.3239.132 Win10 64-bit Pro, это локальный веб-сервер, или вы просто используете html-файл в своем браузере напрямую?
Nick A 06 янв. 2018, в 19:46
0

В моем браузере. Я не всегда получаю такую большую разницу между ними, но всегда есть какая-то разница с пустым пространством.
Alvaro 06 янв. 2018, в 20:02
1

IIRC - красная линия, которую вы видите, это событие onload , так что да, это заняло около 250 мс после запроса html-страницы. Почему это заняло так много времени, я не могу сказать.
Bergi 06 янв. 2018, в 20:09

Показать ещё 1 комментарий

Теги:

javascript

performance

google-chrome-devtools

dom

page-load-time

1 ответ

Ещё вопросы

Я не мог повторить это, он был остановлен только на 2 мс, а не на 200+, используя Chrome 63.0.3239.132 Win10 64-bit Pro, это локальный веб-сервер, или вы просто используете html-файл в своем браузере напрямую?
В моем браузере. Я не всегда получаю такую большую разницу между ними, но всегда есть какая-то разница с пустым пространством.
IIRC - красная линия, которую вы видите, это событие onload , так что да, это заняло около 250 мс после запроса html-страницы. Почему это заняло так много времени, я не могу сказать.

Kayce Basques · Answer 1 · 2018-01-07T16-06-00.000Z

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

Запись нагрузки

Запись производительности загрузки страницы. Выстройте таблицу сети с помощью Главного графика, чтобы отобразить сетевые запросы на активность основного потока. Возможно, CPU максимизирован, выполняя некоторую работу (возможно, расширение Chrome), что задерживает событие load. См. Анализ производительности выполнения для ознакомления с пользовательским интерфейсом (этот учебник охватывает исполняемый файл, но пользовательский интерфейс загрузки является таким же).

Показатели реального пользователя

Прикрепите код, используя атрибуты User Timing API или Navigating Timing, чтобы дополнительно измерить, когда скрипт начинает работать, когда запускается прослушиватель событий загрузки и т.д.

Дайте мне знать, если они помогут!