JavaScript загружается асинхронно в Firefox 3 (согласно Firebug)?

Question

Я пытаюсь профилировать производительность веб-сайта, который, я уверен, замедляется загрузкой файлов JavaScript на странице.

Одни и те же файлы JavaScript включаются несколько раз на странице, и теги <script /> разбросаны по всей странице, вместо того, чтобы быть включенными в нижней части .

Как я и подозревал, при просмотре вкладки "Net" в FireBug большую часть времени (не все) при загрузке JavaScript другие файлы не запрашиваются. Браузер ожидает завершения загрузки JavaScript.

Однако есть несколько исключений. В некоторых случаях загружается JavaScript, но в то же время загружаются другие ресурсы, такие как другие файлы JavaScript и изображения.

Я всегда думал, что JavaScript блокирует загрузку других ресурсов на странице. Я ошибаюсь, думая об этом, или это поведение зависит от версии браузера или браузера?

UPDATE
Тем, кто объяснил, как загрузка скрипта блокирует загрузку других ресурсов, я уже знаю об этом. У меня вопрос, почему скрипт не будет блокировать загрузку других ресурсов. Firebug показывает, что некоторые файлы JavaScript не блокируют загрузку других ресурсов. Я хочу знать, почему это произошло.

Answer 1

Запросы ресурсов Javascript действительно блокируют, но есть способы обойти это (например: теги DOM, внедренные в заголовок и запросы AJAX), которые, вероятно, не видят страницу сами по себе.

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

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

Довольно приличное обсуждение неблокирующей JS здесь .

Answer 2

Я не совсем уверен, что Firebug предлагает истинное отражение того, что происходит в браузере. Время загрузки ресурсов, похоже, хорошее, но я не уверен, что оно служит точным отражением того, что происходит. Мне больше повезло, используя HTTP-снифферы / прокси-приложения для мониторинга реальных HTTP-запросов, поступающих из браузера. Я использую Fiddler, но я знаю, что есть и другие инструменты.

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

Answer 3

Полагаю, вы используете Firefox 3.0.10 и Firebug 1.3.3, поскольку это последние версии.

Бета-версия Firebug 1.4 сделала много улучшений на вкладке net, но для нее требуется Firefox 3.5. Если вы хотите протестировать его в Firefox 3.0, используйте одну из предыдущих 1.4 альфа-версий . Но даже с улучшениями мне все еще трудно понять результат. Я бы хотел, чтобы разработчики Firebug более точно документировали, что означает каждая часть загрузки. Мне не имеет смысла, почему стоит очередь после подключения.

Мой вывод не состоял в том, чтобы доверять результатам в Firebug, и в итоге я использовал WebPageTest . Который был на удивление хорош из AOL; -)

Кроме того, какие ресурсы загружаются одновременно с javascript? Попробуйте отследить ресурсы, которые загружены одновременно, и посмотрите, есть ли ссылки на них в css / iframe / html-ajax. Я предполагаю, что причина, по которой ничего не загружается, заключается в том, что браузер перестает анализировать текущий HTML-код, когда видит тег скрипта (без задержки). Поскольку он не может продолжить анализ HTML, ему больше нечего запрашивать.

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

Answer 4

Firefox 3 представил функцию параллелизма подключений для повышения производительности при загрузке веб-страницы, я уверен, что это источник вашей проблемы;)

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

Вот пост в блоге ZDNET об этом.

Answer 5

Как уже говорили другие, одним из неблокирующих способов является добавление <script> тегов на страницу head.

Но Firefox также может выполнять загруженные <script> с параллельно: Скопируйте две строки ниже:

http://streetpc.free.fr/tmp/test.js
http://streetpc.free.fr/tmp/test2.js

Затем перейдите на эту страницу , вставьте в текстовое поле ввода, нажмите «JavaScript», затем «Загрузить сценарии» (который создает и добавляет дочерний элемент <script> в head).

Попробуйте это в FF: вы увидите «test2 ok», переместите диалоговое окно, чтобы увидеть «test ok». В других браузерах вы должны увидеть «test ok» (без других диалогов), затем «test2 ok» (за исключением Safari 4, показывающего мне tes2 перед тестом).

Answer 6

Как уже говорили другие, скрипт, вероятно, загружает другие ресурсы с помощью DOM-инъекции.

Script.aculo.us фактически загружает свои дочерние компоненты / сценарии, выполняя это - вставляя для них другие теги <script> в DOM.

Если вы хотите узнать, так ли это, используйте профилировщик Firebug и посмотрите, что делают сценарии.

Answer 7

Причина, по которой браузер блокирует загрузку JavaScript, заключается в том, что браузер подозревает, что внутри скрипта будут созданы узлы DOM.

Например, внутри скрипта могут быть вызовы "dcoument.write ()".

Способ подсказки браузеру о том, что скрипт не содержит генерации DOM, - с помощью атрибута defer. Таким образом,

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

должен позволить браузеру продолжить распараллеливание запросов.

Ссылки:

http://www.w3.org/TR/REC-html40/interact/scripts.html#adef-defer

http://www.websiteoptimization.com/speed/tweak/defer/

Answer 8

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

Answer 9

Если вы думаете об этом, тег должен завершить обработку, прежде чем вы сможете продолжить визуализацию контента. Что, если в теге используется document.write или какая-то еще удивительно глупая вещь? Пока что-либо в теге скрипта не завершит работу страницы, не может быть уверена, что она будет отображаться.

Answer 10

Я считаю, что содержимое загружено, но не отображается до завершения загрузки JavaScript.

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