Как (в каком порядке, параллельно и т. Д.) Браузер загружает скрипты по сравнению с другими ресурсами?
Гивенс:
- CSS-файлы должны быть связаны в элементе head. Помимо того, что имеет смысл включать связанные элементы в элемент head, это также помогает предотвратить флэш-содержимое нестандартного содержимого. Их загрузка будет блокировать рендеринг, но не анализ DOM.
- Теги сценария также могут быть включены в элемент head (с или без атрибутов defer или async) или рядом с закрывающими тегами тела. Ради аргумента предположим, что мы обычно не размещаем их где-либо еще, например в середине документа.
- Браузеры будут одновременно загружать только ограниченное количество удаленных ресурсов (например, шесть одновременно или даже всего два!) С одного хоста. Существуют ограничения для предотвращения перегрузок серверов, поэтому на сайтах часто размещаются разные части содержимого страницы на разных хостах и почему вы должны позволить Google размещать ваш jQuery: уменьшенная задержка, увеличенный параллелизм и лучшее кэширование.
Unknowns:
Самый интересный общий вопрос заключается в следующем. Что происходит, когда браузер сталкивается с тегом "script" в элементе head в отношении операций загрузки?
Приоритет загрузки скрипта
Прежде всего, мы знаем, что он немедленно заблокирует анализ DOM не только во время загрузки, но и во время выполнения, хотя современные браузеры могут продолжить анализ и "смотреть вперед" для других сценариев или ресурсов, которые могут нуждаться в загрузке, чтобы начать их. так скоро, как возможно. К счастью, такую блокировку можно обойти с помощью атрибутов defer и async тега script, и defer даже сохранит порядок выполнения сценария (по крайней мере, теоретически, но вот и все... IE9).
Предполагая, что рассматриваемый скрипт имеет атрибут "defer", как, если он вообще повлияет на загрузку любых CSS-файлов, если они связаны до или после тега script?
Например, предположим, что есть 10 связанных таблиц стилей, за которыми следует тег сценария, все в заголовке и все нацелены на один и тот же хост. Будет ли загрузка этого сценария иметь приоритет над загрузкой таблиц стилей каким-либо образом (при условии, что по крайней мере один из них находится в очереди на загрузку), или их порядок загрузки строго зависит от того, когда они встречаются? В целом, имеют ли приоритетные значения загрузки скриптов над другими типами контента (CSS, изображения и т. Д.) В любом браузере по какой-либо причине? Как продолжение, их загрузка блокирует любые другие загрузки, даже на других хостах? Я читал, что они могут.
Последствия любой такой расстановки приоритетов бесчисленные. Я задал этот вопрос, потому что я думал, что размещение тегов сценария в голове с помощью "defer" может привести к их загрузке как можно скорее, но если браузер в любом случае отдает приоритет их загрузке, тогда на самом деле нет никакого преимущества по сравнению с простым размещением их в конце, что заставляет их функционировать как "откладывать" в любом случае. Если бы это было правдой, это было бы хорошей новостью, учитывая, что в любом случае мы не должны ставить их в тупик с отсрочкой благодаря неудачной реализации IE9.