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

Может кто-нибудь объяснить мне, почему эти места (отмечены?) Есть? Они задерживают загрузку страницы. Я думал, что это может быть время разбора страницы / скрипта, но ~350 мс выглядит слишком много для простой страницы; Хорошо, есть много сценариев, но это все еще выглядит много.

Что это может быть?

Скриншот скорости страницы Chrome

2 ответа

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

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

См. http://www.hunlock.com/blogs/Deferred_Javascript и http://blog.fedecarg.com/2011/07/12/javascript-asynchronous-script-loading-and-lazy-loading/

Ваш CSS находится в разделе заголовка?

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

Вторым предположением будет то, что ваш JavaScript блокирует загрузку страницы по любой причине. Есть ли манипуляции с DOM сразу после загрузки? Кроме того, ваш JavaScript расположен внизу вашей страницы, загружен последним? В противном случае это может потенциально заблокировать загрузку.

Другие вопросы по тегам