Практический JS: разгоняем все, что движется

[@peroon2]

Спасибо! Отличная статья.

[@brook]

Не согласен. Как и с теми кто говорит что скорость выполнения скрипта уже не так критична так как мощности серверов растут. На больших проектах где например 5000 человек в онлайне каждый КБ не только оперативной памяти, но и статичного контента на счету, так солидно нагружает сервер. Просто не надо лениться и делать всё от и до хорошо. Мелочей не бывает =)

[@iAndrej]

Если страница 40 кб, то действительно не стоит этими делами заниматься. Если же проект содержит только 300 кб только своих яваскриптов не включая стороних framework'ов: prototype, sriptacuolous и иже с ними, то техники описаные выше очень даже актуальны.
Я использую YUI Compressor встроеный в maven скрипт. Кроме javasript сжимается также css. Html тоже можно освободить от ненужных комментариев. Что-бы избежать гемороя с дебагингом, генерируется html'ка куда подгружаются оригинальные яваскрипты. Её можно назвать index-for-debug.html и положить рядом, прикрыв .htaccess'ом. В httpd.conf должно стоять: AddOutputFilterByType DEFLATE и соотвествующие типы файлов.
Это всё может сделать админ проекта.
То, о чём говорите вы это уже другая область оптимизации, что не умаляет её значения.
Хотел бы добавить на обсуждение также плагин для firefox - YSlow. Загружаете страницу, нажимаете на yslow и получаете подробные советы, где чего стоило бы оптимизировать, а так же рейтинг оптимизации: https://addons.mozilla.org/de/firefox/ad…

[@iBear]

Отличная информативная статья. Спасибо!

[@BAHO]

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

За работу вклад в общую работу переводчиков — огромное спасибо )

[@mente]

Также если вы используете смарти, можно заюзать свой плагинчик, который автоматом читает все js файлы указанные в шаблоне, объединяет их в один файл и записывает куда-то для будущего использования. Нагора получается что-то типа "04239b29000818b2fde052b4b11544f9.js"
А вот про ExpiresDefault не знал. Спасибо

[@restyler]

а я к нему еще прикрутил Dean Edwards packer, и получилось вообще чудесно :) 10 запросов превратились в 1, суммарный вес уменьшился в ~3 раза. И все это абсолютно прозрачно для отладки.

[@Mastyf]

Поделитесь реализацией с "народом"?

[@mente]

я ж вроде уже все объяснил. В скрипте js файлы я добавляю строчками $this->Smarty->IncludeJS($category, $script_name), предварительно написав саму функцию конечно.
В итоге имеем массив по категориям. Имеем смарти-плагин перед самим </body>, который запускается при генерации страницы. Плагин изначально проверяет, есть ли уже сгенеренный файлик md5(serialize($js_array)).js. Если да, ничего не делает. Если нет - читает содержимое всех этих файлов в переменную.
Идем дальше. Качаем php-скрипт от Dean Edwards. Сам packer представляет собой класс, которому передаешь скрипт, а он возвращает строку уже в запакованном виде.
Далее сохраняем сгенеренные js-файлы куда-то на сервер. Имя файла - 'md5(serialize($js_array)).js' .
Еще захардкодил что на 127.0.0.1 скрипт будет генериться всегда :).
P.S. Зачем категории? На всем сайте есть какие-то общие js-файлы (например тот же jQuery). И получается на новой странице они будут тянуться снова, т.к. файлик то каждый раз новый по названию и по размеру. А так каждая категория - один итоговый js-файлик. jQuery и общие плагины к нему вынесены в категорию general и получается один js-файлик общий для всех страниц.

[@plr]

Сила. а где в действии посмотреть можно это все реализованное?

[@mente]

Нигде :). В моей cms, которая только пишется. Ссылка в профиле. Но в последнее время некогда :(

[@mente]

Кстати да, я тоже его прикрутил :). Забыл отметить

[@Gunger]

$offset = 60 * 60 * 24 * 3;
$ExpStr = "Expires: " .
gmdate("D, d M Y H:i:s",
time() + $offset) . " GMT";
header($ExpStr);

лучше будет смотреться (да и работать быстрее) в виде

header("Expired: " . gmdate("D, d M Y H:i:s", (time() + (60 * 60 * 24 * 3))) . " GMT");

А так статья хорошая, вполне! ;-)

[@romy4]

Весьма полезненько.

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

[@Kigorw]

Я использую программу JS Builder. Удобный интерфейс, открытые исходники (я убрал от туда минификацию ибо валилось на прототайпе). Она комбинирует все джс файлы в один. Потом я все пакую архиватором http://www.julienlecomte.net/yuicompress…
Все это делается одним кликом с помощью батника. Отличная билд комбинация.

[@passshok]

Прочитал с интересом, теперь не знаю где применить. :)

[@ignatov]

Ох, это уж точно получше, чем наоборот :)

[@hannimed]

спасибо! сохранил в делюшес

[@quark]

YUI Compressor + gZip = miracle ;)

[@zloy_alu]

спасибо. в мемори.

[@Covex]

Не кэшируйте файлы Апачем+PHP - это ОЧЕНЬ ресурсоёмко !
nginx или lighttpd гораздо эффективнее справляются с этой задачей.

[@Mastyf]

С этим согласен на все 100%. Как перешел на связку nginx + php (fcgi) нагрузка на процессор упала с 70% до 20%.

[@DnKrozz]

Используя описаную ф-цию $import нужно понимать что подгрузка скриптов происходит асинхронно.
Тоесть написать:
$import('someClass.js');
var obj = new SomeClass();
Нельзя, ибо вторая строчка выполнится быстрее чем загрузятся скрипты.
Я использую более навороченую версию которая создает очередь подгрузки скриптов и выполнения вспомогательного кода. Но это нужно только для мегааяксовых приложений в которые не реально все сразу загружать. Если обычная страница то лучше всего на сервере обьединять все в один js файл как было написано выше с помошью смарти или типа того.

[@prop]

Спасибо за статью!
Возникает вопрос - будут ли проблемы с отладкой при использовании конкретно этой реализации функции $import (как, например, при загрузке скриптов и выполнения eval() )?

[@alexbig]

спасибо, хорошая статья.
от себя добавлю, что вместо того, чтобы делать 2-е функции $import() и $importNoCache() — сделайте одну, второй входной параметр которой будет отвечать за кеширование.

[@DenVdmj]

строку
header('Content-type: text/javascript; charset: UTF-8');
заметить на
header('Content-Type: text/javascript; charset=UTF-8');

// кавычки заменил на одинарные, над двойными хабр надругался.
// rfc 2068 (14.18 Content-Type)

спасибо за статью ))