Вопрос о подключении js файлов

[LONGMAN]

Вопрос о подключении js файлов

На работе с коллегой часто спорю о методе подключения js файлов. Дело в том, что я подключаю необходимые файлы только на том странице, на котором это нужна, а он сразу всех объединяет в одном файле и подключает везде этот один файл. Говорит что мой метод плох и делает лишные запросы на сервер. так как можно объединить весь контент js в одном файле, браузер один раз закеширует этот файл и лишных запросов на сервер не будет. Как вы делаете? Что лучше для производительности?

 

[dimagolov]

нужно понимать, что:
1. броузер закеширует как один большой так и много маленьких файлов и влиять это будет только в первый раз
2. если в подключаемы скрипты нужно будет вносить изменения, то их нужно будет ПЕРЕИМЕНОВЫВАТЬ, чтобы новая версия была запрошена с сервера, а не старая из кеша

исходя из п.2 мелкие (без фанатизма) предпочтительнее в долгосрочной перспективе

 

[c0dex]

А как же чудесный заголовок If-Modified-Since?
http://www.w3.org/Protocols/rfc2616/rfc2616-sec14.html

Переименовывать вроде бы ничего не надо =)

 

[LONGMAN]

dimagolov
А js функции которые не используется на других страницах, на пример валидация форм и т.д. зачем отдавать пользователю? Может он и не доидёт до форм, а функций (и размер этого кода может дойти до 100кб) будет загружаться всёравно. Это не снизит производительность?

-~{}~ 06.08.10 23:06:

c0dex
Для таких чудесных заголовках нужен какой нибудь дополнительный модуль apache?

 

[dimagolov]

c0dex, так это браузер должен запросить, если получил для скрипта Last-Modified. Но как показывает практика, браузеры этого не делают.

-~{}~ 06.08.10 15:27:

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

 

[c0dex]

dimagolov
при чем тут Last-Modified для скрипта, мы обсуждаем статику) Или я не понял о чем ты.

L-M идет в ответе, давая понять когда контент последний раз менялся. Если после даты I-M-S, то он сгрузится еще раз, дав код 200, иначе он вернет 304 (без тела ответа) и загрузка прервется.

Все нормальные браузеры шлют сей хедер в запросе (I-M-S). По RFC должны по идее это делать.

LONGMAN
как там на апачах дела обстоят я не знаю. Возьми Firebug и посмотри что идет в заголовках. Может у вас кеширование вообще кривое и там банально нет 304. У меня все сервера настроены на nginx

 

[LONGMAN]

От использования сжатых js файлов есть реальная польза? И каким софтом лучше сжать js скрипты?

 

[weregod]

LONGMAN
для сервера с хорошим покрытием JS-ф-ла клиентами лучше один JS-файл.
> От использования сжатых js файлов есть реальная польза?
меньший обьём, более короткие переменные, польза есть
открытым софтом хорошо жать

 

[c0dex]

Есть библиотеки.

Гуглить по JS minify

 

[dimagolov]

weregod, c0dex
куда полезнее жать .js gzip-ом при отдаче, чем какими-то компрессорам JS кода. жмет хорошо, никаких боков с некорректным сжатием быть не может.

 

[c0dex]

dimagolov
Ну мне ты можешь про гзип не рассказывать, у меня он подключен и хорошо работает. Однако самый выигрыш получается при использовании одного + другого.

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

 

[dimagolov]

Однако самый выигрыш получается при использовании одного + другого.

c0dex, ну вот и скажи, у тебя в реале, какой размер исходного js, зажатого gzip-ом и зажатого minify+gzip. Интересно какой прирост сжатия получается из-за minify.

 

[c0dex]

Сразу прошу простить, если будут погрешности, пишу под виски со льдом...

Ну в общем берем оригинальную библиотеку jquery и будем тестить на ней.

Размер файла:
jq.js - оригинальный - 170 095 байт

Пакуем наиболее известными упаковщиками (JSMin и Packer от Эдвардса)
Получаем соответственно:
jq.jsmin.js - от JSMin - размер 100 283 байт
jq.dean.js - от Дина Эдвардса - размер 54 878 байт

Создаем тестовый index.php, куда линкуем файлы через тэг < script >

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

На хостинге nginx с максимальной компрессией, если память моя не изменяет. Временем загрузки можно пренебречь (данные по page onload из firebug никому не сдались, я об этом), так как хост очень быстрый и инет у меня 100 мегабит.

Исходники для теста firebug: http://oweb.ru/gzip/
Верстать полностью страницу валидно XHTML не стал, так как на тесты это не влияет.

Итак, первая загрузка:
http://img831.imageshack.us/img831/4703/testo.gif

Вторая:
http://img815.imageshack.us/img815/7562/test2.gif

Соответствующие размеры после гзипа:
jq.js - оригинальный - 45 870 байт
jq.jsmin.js - 28 271 байт
jq.dean.js - 26 109 байт

Имхо выигрыш есть.

 

[Adelf]

just for comment: packer от dean - неудачный выбор. Там еще на клиенте он разворачивается через eval и т.д. Это в итоге тормознее выходит.

 

[dimagolov]

итого, gzip сжатие -73%
gzip + jsmin сжатие -84%
лишние -9% это, не плохо, хотя, конечно, это не -41%, которые дает jsmin от оригинального кода, но ведь голый gzip дает сразу -73%

вывод: gzip примерно вдвое полезнее сжатия JS кода jsmin, но если предварительно юзать jsmin, то gzip таки ужмет код слегка сильнее

 

[c0dex]

Adelf
ну на современный процах жаловаться на тормоза, это минимум странно)

dimagolov
Я бы сказал, что это два совершенно независимых метода оптимизации, один клиент-серверный, другой чисто клиентский. И тут уж выбирать не нам. Автору. Гзип ему еще надо настроить, что тоже не все могут, а скопипастить пару раз текст думаю, что все))

 

[LONGMAN]

Спасибо всем Поэкспериментирую

 

[Adelf]

ну на современный процах жаловаться на тормоза, это минимум странно)

Килобайты экономить при современных интернетах тоже странно

 

[c0dex]

ну при высоких то нагрузках - совсем не странно, клиентской то тачке будет фиолетово, за 0.5 секунды развернется оно или за 1.5)

 

[dimagolov]

c0dex, ты не понял. файл закачается ОДИН РАЗ, потом будет браться из кеша браузера, а вот страшно тормозливо распаковываться средствами JS будет каждый раз. gzip же встроен в браузер и реализован не на языке анимации веб-страниц для домохозяек, коим является JS.