Хочу поделиться решением, которое я использую для оптимизации загрузки админки, разработанной с использованием библиотеки ExtJS. Это решение применимо не только непосредственно к ExtJS, но и для этой библиотеки оно очень актуально.
Заранее предупреждаю, что решение работает очень плохо, если почти не работает, с семьей 60- и 70-летних интернет-исследователей.
Проблема:
Чуть ли не первое, что сразу отпугивает большинство разработчиков и заказчиков перед началом разработки на extjs, это «блин, это же почти мегабайт Javascript!?!» На самом деле так оно и есть, и если включить в список загрузки файлы стилей css и изображения, то можно получить полтора-два.Приправим блюдо плагинами, что неизбежно, ведь в этом преимущество extjs — мощных плагинов, тогда для начала прилагается множество скриптов, каждый из которых требует запроса к серверу.
В результате при каждом посещении админки клиент (получивший бесплатные четки) скачивает все скрипты и дизайн.
Это пагубно влияет на скорость загрузки страниц в браузере.
И это требует от пользователя дополнительного терпения, что не добавляет никаких плюсов в карму разработчика.
Если вы думали, что я опишу метод загрузки скриптов «по требованию», который существует и для ExtJS, то нет. Моё решение хоть и сырое, но позволяет получить всё сразу, хотя и накладывает определённые ограничения.
Так…
Решение:
1. Объедините множество файлов в один.
Создаем список файлов, необходимых для полноценной работы, и объединяем файлы библиотек, плагинов и помощников в один большой JavaScript-файл.
То же самое делаем со стилями и тоже формируем из них один файл.
Это уменьшит количество запросов от клиента к серверу, но недостаточно.
В комплект разработчика уже входят готовые файлы «все-в-одном», но часто бывает, что в базовую библиотеку вносятся изменения, в основном в стилях, иногда меняются шрифты, иногда меняются изображения.
А если есть изменения в коде JavaScript, то рекомендую описывать их как плагин для ExtJS.
2. Вставка картинок в файл стилей.
Использование URI SRC данных ( http://en.wikipedia.org/wiki/Data_URI_scheme ), позволяет вставлять содержимое изображения непосредственно в файл стилей.
Это хорошо работает практически во всех браузерах, за исключением 6/7 Internet Explorer, а в 8 Explorers есть ограничение на размер данных.
Мне повезло, я не такой как все, мой клиент отказался от IE. Преимущество такого решения в том, что клиент получает все изображения стиля сразу и в процессе рендеринга не наблюдает, как постепенно та или иная часть визуальных компонентов «обрастает» дизайном.
А также никаких лишних запросов к серверу.
Вот как выглядят данные uri в css (взято из вики): ul.checklist > li.complete { margin-left: 20px; background:
url('data:image/png;base64,
iVBORw0KGgoAAAANSUhEUgAAABAAAAAQAQMAAAAlPW0iAAAABlBMVEUAAAD/
//+l2Z/dAAAAM0lEQVR4nGP4/5/h/1+G/58ZDrAz3D/McH8yw83NDDeNGe4U
g9C9zwz3gVLMDA/A6P9/AFGGFyjOXZtQAAAAAElFTkSuQmCC')
top left no-repeat; }
Это тоже хорошая тема для холивара, заменяющая css спрайты, в том смысле, что она тоже все-в-одном, но при этом нет никаких ограничений как у спрайта по цветам (если это гифка) или по использованию изображение с повторяющимся стилем в качестве фона.
Например, в ExtJS (2.0) изображение флажка представляет собой спрайт со всеми состояниями флажка.
Если вы попытаетесь сделать в сетке столбец с галочками, у которого в шапке будет чекбокс, и при этом в шапке будет надпись, то спрайт покажет свою истинную природу, заполняя фон по этой надписи .
Когда я разделил картинку из спрайта на составляющие, эта проблема исчезла.
3. Сжатие.
Полученные файлы теперь необходимо сжать.
Для этого я лично использую Юикомпрессор .
Вы можете использовать любую другую программу сжатия.
Пример использования с yuicompressor
java -jar yuicompressor.jar --type js extjs.js
java -jar yuicompressor.jar --type css extjs.css
Сжатие хорошее, но недостаточное.
Использование Apache mod_deflate дает потрясающий эффект. Мои результаты примерно такие: После склейки: js — 1000кб, css — 1000кб (да-да, много изображений в base64).
После сжатия: js — 800кб, css — 700кб.
После mod_deflate клиент скачивает вот что: js — 170кб, css — 200кб.
Как видите, размер файла по-прежнему большой, но есть уверенность, что клиент получит всю среду extjs в два запроса: один на яваскрипт, второй на стили.
4. Кэширование и срок действия.
Самое тривиальное решение — настроить apache mod_expires для этих двух файлов, чтобы клиент, скачав их один раз, не скачивал повторно, тогда размер 500кб для скачивания будет не так заметен.
А для принудительной аннулирования мы будем использовать в имени файла метку времени (тип ext.1249090480.js).
При новом развертывании номер файла просто меняется и клиент скачивает новую версию при следующем входе в админку.
link rel="stylesheet" type="text/css" href="extjs.1245678910.css"
script type="text/javascript" src="extjs.1245678910.js"
Для автоматизации я написал скрипт, выполняющий шаги с 1 по 3. Опубликовано на форуме ExtJS и на Пастебин .
Теги: #extjs #JavaScript #CSS #оптимизация #Чулан
-
Парашют
19 Oct, 24 -
Тестирование
19 Oct, 24 -
Голливуд И It
19 Oct, 24
