Комментарии 27
Спасибо! Отличная статья.
НЛО прилетело и опубликовало эту надпись здесь
Не согласен. Как и с теми кто говорит что скорость выполнения скрипта уже не так критична так как мощности серверов растут. На больших проектах где например 5000 человек в онлайне каждый КБ не только оперативной памяти, но и статичного контента на счету, так солидно нагружает сервер. Просто не надо лениться и делать всё от и до хорошо. Мелочей не бывает =)
Если страница 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…
Я использую 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…
Отличная информативная статья. Спасибо!
Прекрасный перевод и оформление статьи, очень много полезных ссылок, но лично для меня материал оказался малополезным.
За работу вклад в общую работу переводчиков — огромное спасибо )
За работу вклад в общую работу переводчиков — огромное спасибо )
Также если вы используете смарти, можно заюзать свой плагинчик, который автоматом читает все js файлы указанные в шаблоне, объединяет их в один файл и записывает куда-то для будущего использования. Нагора получается что-то типа "04239b29000818b2fde052b4b11544f9.js"
А вот про ExpiresDefault не знал. Спасибо
А вот про ExpiresDefault не знал. Спасибо
а я к нему еще прикрутил Dean Edwards packer, и получилось вообще чудесно :) 10 запросов превратились в 1, суммарный вес уменьшился в ~3 раза. И все это абсолютно прозрачно для отладки.
Поделитесь реализацией с "народом"?
я ж вроде уже все объяснил. В скрипте 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-файлик общий для всех страниц.
В итоге имеем массив по категориям. Имеем смарти-плагин перед самим </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-файлик общий для всех страниц.
Кстати да, я тоже его прикрутил :). Забыл отметить
$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");А так статья хорошая, вполне! ;-)
Весьма полезненько.
Только одно замечание:
> Остальные, например, визуальные эффекты для меню, разнообразная анимация и т.д.
при условии, что скрипты для отображения меню адекватно отреагируют на отсуствие кода для визуальных эффектов. А том может получится как раз нехорошая бяка с ошибками.
Только одно замечание:
> Остальные, например, визуальные эффекты для меню, разнообразная анимация и т.д.
при условии, что скрипты для отображения меню адекватно отреагируют на отсуствие кода для визуальных эффектов. А том может получится как раз нехорошая бяка с ошибками.
Я использую программу JS Builder. Удобный интерфейс, открытые исходники (я убрал от туда минификацию ибо валилось на прототайпе). Она комбинирует все джс файлы в один. Потом я все пакую архиватором http://www.julienlecomte.net/yuicompress…
Все это делается одним кликом с помощью батника. Отличная билд комбинация.
Все это делается одним кликом с помощью батника. Отличная билд комбинация.
Прочитал с интересом, теперь не знаю где применить. :)
спасибо! сохранил в делюшес
YUI Compressor + gZip = miracle ;)
спасибо. в мемори.
Не кэшируйте файлы Апачем+PHP - это ОЧЕНЬ ресурсоёмко !
nginx или lighttpd гораздо эффективнее справляются с этой задачей.
nginx или lighttpd гораздо эффективнее справляются с этой задачей.
Используя описаную ф-цию $import нужно понимать что подгрузка скриптов происходит асинхронно.
Тоесть написать:
$import('someClass.js');
var obj = new SomeClass();
Нельзя, ибо вторая строчка выполнится быстрее чем загрузятся скрипты.
Я использую более навороченую версию которая создает очередь подгрузки скриптов и выполнения вспомогательного кода. Но это нужно только для мегааяксовых приложений в которые не реально все сразу загружать. Если обычная страница то лучше всего на сервере обьединять все в один js файл как было написано выше с помошью смарти или типа того.
Тоесть написать:
$import('someClass.js');
var obj = new SomeClass();
Нельзя, ибо вторая строчка выполнится быстрее чем загрузятся скрипты.
Я использую более навороченую версию которая создает очередь подгрузки скриптов и выполнения вспомогательного кода. Но это нужно только для мегааяксовых приложений в которые не реально все сразу загружать. Если обычная страница то лучше всего на сервере обьединять все в один js файл как было написано выше с помошью смарти или типа того.
Спасибо за статью!
Возникает вопрос - будут ли проблемы с отладкой при использовании конкретно этой реализации функции $import (как, например, при загрузке скриптов и выполнения eval() )?
Возникает вопрос - будут ли проблемы с отладкой при использовании конкретно этой реализации функции $import (как, например, при загрузке скриптов и выполнения eval() )?
спасибо, хорошая статья.
от себя добавлю, что вместо того, чтобы делать 2-е функции $import() и $importNoCache() — сделайте одну, второй входной параметр которой будет отвечать за кеширование.
от себя добавлю, что вместо того, чтобы делать 2-е функции $import() и $importNoCache() — сделайте одну, второй входной параметр которой будет отвечать за кеширование.
строку
header('Content-type: text/javascript; charset: UTF-8');
заметить на
header('Content-Type: text/javascript; charset=UTF-8');
// кавычки заменил на одинарные, над двойными хабр надругался.
// rfc 2068 (14.18 Content-Type)
спасибо за статью ))
header('Content-type: text/javascript; charset: UTF-8');
заметить на
header('Content-Type: text/javascript; charset=UTF-8');
// кавычки заменил на одинарные, над двойными хабр надругался.
// rfc 2068 (14.18 Content-Type)
спасибо за статью ))
Зарегистрируйтесь на Хабре, чтобы оставить комментарий
Практический JS: разгоняем все, что движется