Лучше ли загружать много маленьких файлов JavaScript или один большой файл JavaScript?

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

Я также заметил, что когда я перехожу из вкладки с моим Javascript в нее, а затем вернусь к этой вкладке, она будет медленной в течение нескольких секунд, как если бы V8 перекомпилировал js.

Есть три варианта, о которых я могу думать, но я не знаю, что лучше:

сначала загрузите небольшую страницу загрузки и красноречиво обработайте следующую загрузку.
загрузите один огромный файл js или css со всем (jquery + мой код + и т.д.)
объединяйте определенные коды вместе (используйте jquery cdn, но вместе сгруппируйте мой код)

Каков наилучший способ загрузки ваших js как можно быстрее и красноречиво?

Ответ 1

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

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

Ответ 2

Есть слишком много maybes для этого, чтобы иметь какие-либо гарантированные решения, но здесь вы идете:

1) загрузите CSS вверху - загрузите все это там, если вы делаете сайт с несколькими страницами. Если вы создаете одностраничное приложение (там, где вы используете галереи и твиттер-каналы, статьи и т.д. На одной странице, и вы можете открывать и закрывать разные разделы), тогда вы можете рассмотреть возможность загрузки CSS-виджета в когда вы загружаете свой виджет (если он не нужен при запуске).

НЕ используйте @import в своем CSS, если вы хотите, чтобы он быстро загружался (вы делаете).

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

3) будьте осторожны с таймерами - особенно setInterval...... вы можете получить производительность страницы во множестве проблем с плохо управляемыми таймерами.

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

5) использование JS файлов - это компромисс: Компиляция JS занимает некоторое время. Поэтому, если вы загружаете 40 000 строк в один файл, ваш браузер будет немного приостановлен, так как он компилирует все это.
Если вы обслуживаете 18 отдельных файлов, вам нужно сделать 18 разных вызовов сервера.
Это тоже не круто.

Итак, хороший баланс состоит в том, чтобы объединить файлы вместе, что вы ЗНАЕТЕ, что вам понадобится для этой страницы, а затем lazy-load все, что является необязательным на странице (например, виджет для добавления комментария или виджет лайтбокса, и т.д.). И либо lazy-load их после запуска всех основных продуктов, либо загружайте их в последнюю возможную секунду (например, когда пользователь нажимает кнопку "добавить комментарий" ).

Если вам нужно, чтобы в вашем приложении было загружено 40 000 строк, как только оно начнется, затем сделайте снимок или решите, в каком порядке вы можете загрузить каждый из них, и укажите "загружающие" индикаторы (которые вы должны делать в lazy-load always) для каждого виджета, пока он не будет готов (загрузка JS по одному).

Это рекомендации для решения общих проблем с производительностью.
Специфику трудно ответить, даже если у вас есть сайт прямо перед вами. Используйте консоль Chrome dev для профилирования информации и производительности сети, а также производительности рендеринга и т.д.

Ответ 3

Хорошо существует очень популярная концепция, называемая конкатенацией. Идея состоит в том, чтобы как можно меньше HTTP-запросов на ваш сервер. Поскольку каждый запрос означает новое соединение, для которого происходит поиск DNS, согласование рукопожатия согласовывается, а затем после нескольких шагов на основе протокола сервер отправляет запрошенный файл в качестве ответа.

Вы можете проверить http-archive для списка наилучших методов работы.

Итак, вы должны объединить все JS файлы в один (есть определенные исключения, например js на голове и js в нижнем колонтитуле)

Это ответ на ваш вопрос-заголовок и пункты 2 и 3.

Что касается другой части, я не совсем понимаю, о каком сценарии вы говорите.

Ответ 4

Недавно у меня была такая же проблема, а затем я разработал и выпустил библиотеку JS (лицензию MIT) для этого. В принципе, вы можете поместить все ваши материалы (js, images, css...) в стандартный tar-архив (который вы можете создать на стороне сервера), а библиотека читает его и позволяет вам легко использовать файлы.

Вы найдете его здесь: https://github.com/sebcap26/FileLoader.js

Он работает со всеми браузерами-рецензентами и IE >= 10.

Ответ 5

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