Включение Javascript-файла в HTML-страницы - что происходит в браузере?

Question

Я думаю, что это может быть вопрос, зависящий от браузера. Предположим, у меня есть 10 файлов Javascript и несколько страниц HTML. Предположим, HTML-странице A нужны только JS1.js и JS3.js, аналогично HTML-странице B нужны JS4.js и JS1.js. Я хочу знать, каков будет эффект включения всех 10 файлов javascript во все HTML-страницы? Будет ли это напрямую связано с потреблением памяти браузером?

Я сталкиваюсь с этой проблемой, особенно с библиотекой JavaScript YUI. Есть несколько компонентов, таких как datatable, событие, контейнер, календарь, dom-событие и т. Д. Порядок, в котором они включены, также имеет большое значение. Например, dom-событие js должно быть включено до того, как остальные будут работать , Поэтому, чтобы избежать этой путаницы, я подумал о включении всех этих js-файлов в заголовочный файл, который включается во все HTML-страницы.

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

Спасибо, -Keshav

Answer 1

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

Однако в случае добросовестно спроектированной библиотеки, такой как YUI, я бы ожидал, что время анализа будет минимизировано.

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

Я бы предложил исследовать панель Firebug Net и расширение YSlow , чтобы получить конкретную статистику производительности для вашего веб-сайта.

Answer 2

Внешние ресурсы HTML-страницы обычно кэшируются браузером. Внешние ресурсы - это все, что требуется от HTML, например изображения, CSS, JavaScript и все остальное. Таким образом, если вы загрузите все 10 файлов сценариев заранее, вы принудительно вызовете одноразовую загрузку для своего пользователя. После этого пользователю не нужно снова загружать сценарии, если не изменяется временная метка изменения файлов.

Ваша страница будет использовать только то, что требуется. Если конкретная страница запрашивает js4.js и js5.js, то все функции в этих файлах будут загружены в интерпретатор в том порядке, в котором они сначала запрашиваются из HTML, а затем в порядке, в котором они указаны в каждом из эти файлы. Если есть какие-либо конфликты пространства имен, то то, что когда-либо загружается в интерпретатор, побеждает последним. Интерпретатор очистит функции после того, как страница выгружена из браузера.

Для эффективности я бы предложил использовать процесс включения на стороне сервера, чтобы прочитать каждый из файлов js и включить содержимое каждого файла в новый отдельный файл js. Это уменьшит количество HTTP-запросов к серверу и сэкономит вашим пользователям чрезмерное количество ресурсов полосы пропускания в отношении HTTP-заголовков и GET-запросов. Кроме того, поместите запрос этого нового файла сценария непосредственно перед закрывающим тегом body вашего HTML. Загрузка скриптов блокирует параллельные загрузки в IE, поэтому вы хотите загружать скрипты в самой низкой точке страницы.

Answer 3

Используйте YUI Configurator, чтобы определить необходимые файлы и порядок их размещения, а также способы использования Yahoo! Комбинированный сервис CDN для объединения всех файлов YUI в один тег сценария.

http://developer.yahoo.com/yui/articles/hosting/

Answer 4

Потребление памяти:

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

Вы можете сами оценить влияние, используя простые инструменты, такие как диспетчер задач / процессы в Windows, для мониторинга использования памяти / процессора, или плагины, такие как Firebug для FireFox .

Вы также можете посмотреть на то, что называется minification , чтобы сделать ваши файлы сценариев как можно меньше.

Зависимости:

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

Answer 5

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

Советы:

1) Загрузите скрипт внизу страницы (непосредственно перед закрывающим тегом BODY).

2) Используйте неблокирующий способ загрузки скриптов. Это тот, который я использую.

<script type="text/javascript">

function AttachScript(src) {
    var script = document.createElement("script");
    script.type = "text/javascript";
    document.getElementsByTagName("body")[0].appendChild(script);
    script.src = src;
}
AttachScript("/js/jquery.min.js");
AttachScript("/js/ndr.js");
AttachScript("/js/shadowbox.js");
AttachScript("/js/libraries/sizzle/sizzle.js");
AttachScript("/js/languages/shadowbox-es.js");
AttachScript("/js/players/shadowbox-img.js");
AttachScript("/js/adapters/shadowbox-jquery.js");

Не могу найти исходную веб-страницу, хотя: - (

Answer 6

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

Answer 7

Вы можете прочитать о методах кэширования, использующих PHP для передачи нескольких файлов javascript как одного большого файла JS, который включает в себя все, что вам нужно. Для дополнительного прироста производительности вы можете сделать так, чтобы браузер кэшировал файл локально в дополнение к отправке gzipped (если браузер поддерживает кодировку, используя что-то вроде ob_start ("ob_gzhandler");). Используя кодировку gzip, вы можете значительно уменьшить размер файла основного JS-файла, который вы отправляете, включая весь ваш JS-код (поскольку обычный текст хорошо сжимается). Недавно мне пришлось сделать это на моем собственном веб-сайте, и это сработало как шарм для файлов JS и CSS.

http://www.ejeliot.com/blog/72

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

Кроме того, рассмотрите возможность поиска в Google «Minify», которая должна быть размещена в Google Code.

Answer 8

Scriptaculous реализует хороший способ обработки JS-зависимостей. Думаю, вы могли бы проверить это и «заново реализовать». ; D

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