Пустое время между загрузкой ресурса под сетевым инспектором

Question

Я работаю над новым сайтом и практикую свои навыки JS / jQuery / AJaxy.Прошлой ночью я хотел посмотреть, сколько времени занимает рендеринг страницы, и посмотреть, есть ли области, которые я могу очистить, чтобы увеличить скорость.В то время как страница загружается примерно 200 - 300 мс каждый раз, я вижу большое количество пустого пространства между загрузками ресурсов под инспектором сети.

http://i.imgur.com/7ng6m.jpg

Кто-нибудь еще видел это или знает, что я могу сделать, чтобы минимизировать это время (говоря о пробеле между html и первым файлом css)?

Answer 1

Вполне возможно, это связано с установленными вами расширениями.Быстрая прокрутка AdBlock, LastPass и Google заняла у меня около 200 мсек.

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

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

Answer 2

Задержка между начальной загрузкой страницы и запросом первых ресурсов почти наверняка вызвана расширениями Chrome. Чтобы найти виновника: запишите временную шкалу на вкладке «Хронология» в Chrome Developer Tools; Определите сценарии, которые выполняются на этапе анализа HTML; Определите, из каких они расширений.

Для записи временной шкалы:

1. Откройте вкладку временной шкалы и нажмите «Запись».
2. Перезагрузите страницу и остановите запись. (Пару секунд должно быть достаточно.)

Чтобы найти виновного:

1. Найдите первый основной блок Parse HTML на временной шкале. В строке ниже вы, вероятно, увидите один или несколько блоков Evaluate Script . Это виновники.
2. Нажмите на один из блоков Evaluate Script и найдите имя сценария в нижней панели. Наведите курсор мыши на название скрипта. У всплывающей подсказки будет URL-адрес скрипта, который должен иметь вид chrome-extension://{long_identifier}/{path}
3. Запомните первые несколько букв идентификатора и найдите его на странице chrome: // extensions / . Это говорит вам, какое расширение вызывает проблему. Попробуйте отключить его - вы должны увидеть разницу.
4. Повторите для других Оценить сценарий блоков.

В моем случае у меня установлено 20 расширений, но только два вызывали задержку: LastPass и Fauxbar. Я решил оставить их включенными, потому что для меня выигрыш в производительности от этих расширений перевешивает недостаток дополнительной задержки.

Answer 3

У вас есть куча изображений, загруженных сразу после загрузки страницы (сработали события load и DOMContentLoaded - синие и красные вертикальные линии на временной шкале ).Я вижу, что изображения загружаются библиотекой JQuery (столбец Initiator ), возможно, для создания галереи или чего-то еще.

Итак, дело в том, что JQuery загружает изображения послезагрузка страницы, предположительно в обработчике onload (это может выглядеть как $(document).ready(handler) в вашем коде, но возможны и другие варианты).