Производительность Javascript: несколько блоков сценариев против одного большего блока

Question

Я наблюдал странное поведение на IE8 (не замечено на FF 3.5).Я создал 2 примера веб-страниц с небольшим количеством JS.Страница 1: 3 блока JS (теги) с очень маленьким встроенным JS в них.Страница 2: тот же JS, что и выше, но все 3 сценария объединены в один блок.

Я открыл страницу, используя dynatrace, и заметил, что для страницы 1 каждый сценарий занимал ~ 27-30 мс для анализа / выполнения.Общее время ~ 80 мс.Для Page2 объединенный JS занял ~ 30 мс.Может кто-нибудь объяснить, пожалуйста, причину этого?Лучше ли объединить меньшие куски JS в один?

PS: Для всех сценариев время инструментирования, добавляемое Dynatrace, незначительно.Firefox 3.5 не показывал это поведение.Также время выполнения на FF составляло ~ 1 мс для каждого меньшего блока JS и ~ 3 мс для объединенного JS.

Answer 1

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

Я не уверен, почему это так распространено для IE8 по сравнению с FF. Может случиться так, что переключение контекста особенно дорого в IE8, или что FF может сделать некоторую работу за кулисами, чтобы объединить ваши блоки, если он определит, что может (я только догадываюсь здесь)

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

В общем, я бы сказал, что лучше всего объединять ваши блоки скриптов. Лично я бы порекомендовал вам перенести их в отдельный файл.

Кстати, что происходит с вашими показателями, когда вы перемещаете его в другой файл?

См. Рекомендации по ускорению работы вашего веб-сайта в Yahoo Developer.