Что мне делать с этим 800-килобайтным файлом JavaScript?

Question

Я прочитал, что объединение и, возможно, сжатие файла javascript заставит приложение работать быстрее, поэтому я решил попробовать.

Я полагал, что большинство моих страниц (хотя и не все) загружали как минимум 1 МБ javascript, так почему бы не сжать и не агрегировать его?

Ну, я думаю, что производительность хуже, чем раньше. Firebug сообщает, что «DomContentLoaded» занял 1,17 с на любой случайной странице приложения. Это нормально? Как, воу.

По сути, мой javascript для приложения теперь собирает все файлы для сайта. Каждый файл ищет основной идентификатор, и если он там есть, он запускает некоторый код. Если нет, то просто идет следующий функциональный блок.

Я также добавил несколько библиотек вместе с кодом своего приложения. Вот библиотеки, которые я использую. Должен ли я их объединить или нет?

<include>**/font/font.js</include>
<include>**/json/json2.js</include>
<include>**/jwplayer/jwplayer.js</include>
<include>**/underscore/underscore.js</include>
<include>**/jquery/jquery-1.7.1.js</include>
<include>**/jquery/jquery-ui-1.8.16.custom.min.js</include>
<include>**/jquery/jquery.cookie.js</include>
<include>**/jquery/jquery.jcrop.js</include>
<include>**/jquery/jquery.tmpl.js</include>
<include>**/jquery/farbtastic.js</include>
<include>**/simpleyui/simpleyui.js</include>
<include>**/audio-player/audio-player.js</include>
<include>**/tiny_mce/tiny_mce.js</include>
<include>**/jscharts/jscharts.js</include>

Я думаю, что мой большой след составляет jquery-1.7.1.js (100k), jquery-ui-1.8.16.custom.min.js (206k), jwplayer.js (83k), simpleyui.js (103k), jscharts.js (100k) и tiny_mce.js (186k ). Эти суммы в кб удивлены.

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

РЕДАКТИРОВАТЬ: Я могу подтвердить, что размещение JavaScript в нижней части страницы не имеет никакого значения. Я могу подтвердить, что удаление всех библиотек, таких как jquery, audio-player, jwplayer и т. Д., Само по себе занимает всего 1 секунду.

Код моего приложения (который содержит гораздо больше файлов, но, возможно, меньше кода в целом), занимает от 0,2 до 0,3 секунды.

Я на 99% уверен, что проблема не имеет ничего общего с загрузкой сейчас и намного больше со скоростью выполнения.

Что бы вы порекомендовали мне сделать, чтобы улучшить производительность моих страниц?

Answer 1

Вы можете загружать только те библиотеки javascript, которые вам нужны на каждой странице .

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

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

Максимально уменьшите зависимость от внешних библиотек.

Кроме того, мы приняли меры по снижению зависимости даже от jQuery путем преобразования нашего кода для непосредственного использования DOM.вместо этого, например, используя document.getElementByID() и getElementsByTagName() вместо jQuery('#myId') или jQuery('table.myTableClass').Это помогло сократить некоторые страницы, так что они вообще не используют никаких зависимостей, что значительно увеличило время их загрузки.

Другой пример: если вам нужны только CSS-селекторы вместо всей гаммы функциональности jQuery, вы можете использовать Sizzle , который является автономным механизмом выбора CSS, таким образом сокращая ваши 80+ КБ jQueryтолько для 4KB, необходимых для Sizzle.Я уверен, что тот же самый подход можно использовать с другими вашими библиотеками, чтобы избавиться от большого количества ненужных ошибок в приложении.

Answer 2

Я всегда загружаю библиотеки из надежного CDN, например, Google CDN.Это поможет вам их кешировать.Это также помогает параллельную загрузку, поскольку она не из вашего домена

Answer 3

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

Итак, в основном процесс выглядит так:

• Читать все файлы
• Сложите все содержимое вместе
• JSMin (я использовал это: https://github.com/rgrove/jsmin-php/)
• Gzip, если хотите (я не видел, не видел прироста производительности, поскольку PHP обычно настроен на gzip-контент автоматически)
• Кэшируйте файл на диске, чтобы вам больше не приходилось делать все это

-EDIT- Нашел статью, которую использовал: http://www.cforcoding.com/2009/05/supercharging-javascript-part-1-make-as.html

Answer 4

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

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

Что касается того, как указать вашему серверу, чтобы он обслуживал GZIP-версию, когда это необходимо, я не уверен, как Backspace это делает, но в моей среде хостинга я использую суффикс "html.en" для не-GZIP-файлов и суффикс "html.en.gz." Сервер Apache может использовать соответствующий файл в зависимости от заголовков.