Как уменьшить время загрузки сайта в 5 раз, тремя строчками кода.

Есть 4 относительно простых способа, с помощью которых вы можете уменьшить время загрузки страницы:

• делать меньше HTTP запросов
• выставлять expires на далекое будущее
• сжимать компоненты вашей страницы gzip’ом
• обфускачивать ваши JavaScript и CSS файлы, а так же сам HTML-код

После моего поста об объединении CSS и JavaScript файлов, я написал PHP-скрипт, который будет автоматически применять все вышеперечисленные способы. Все, что вам нужно сделать, это поместить следующий код в начало своего PHP-файла:

require_once ( 'class.compressor.php' ) ;
$compressor = new compressor ( 'css,javascript,page' ) ;

А этот код в конец:

$compressor -> finish ( ) ;

Сравните:

Библиотека довольно интересная. Особенно для небольших сайтов, где еще можно отдавать весь js и css сразу. Да и в плане выставления правильных заголовков для заgzipенных данных есть чему поучиться.

Примеры с использованием gzip, без него.

Скачать можно тут.

Доступ к DOM-элементам

Доступ к DOM-элементам теперь стал похож на JQuery. Поддерживаются три типа операций:

Выборка (query)

var links = YAHOO.util.Selector.query('ul[class^=list] li:first-child a:not([href=#])');

Вернет все ссылки, у которых хреф не #, из первого элемента списка, класс которого начинается с “list”.

Фильтр (filter)

var nodes = document.getElementsByTagName('li');
nodes = YAHOO.util.Selector.filter(nodes, '.selected');

Вернет все элементы с классом “selected”, из nodes.

Проверка (test)

var nodes = document.getElementsByTagName('li');
var is_selected_list_items_exist = YAHOO.util.Selector.test(nodes, '.selected');

Вернет true, если есть li-элементы с классом selected, ну и false в противном случае.

Подкачка скриптов и CSS-файлов

Теперь YAHOO.util.Get умеет подкачивать скрипты (YAHOO.util.Get.script()) и CSS-файлы(YAHOO.util.Get.css()) после загрузки страницы. Соответственно если вам скрипты нужны не каждый раз, то можно их грузить по обстановке, за что вам пользователь и сервер спасибо скажут.

Профайлер

Ура! Даешь много данных хороших и разных!
*шепотом: А мы все равно будем использовать firebug…*

JSON-компонент

Главная фича – умеет парсить json, и соответственно контролировать его правильность:

try {
var prod = YAHOO.lang.JSON.parse(jsonString);
} catch (e) {
alert("Invalid product data");
}

Самое вкусное – напоследок…

Графики и диаграммы

Вроде бы эта штука существовала отдельно и раньше, хотя с mootools путать. Теперь же есть в самом YUI, и очень даже ничего. Работает на Flash’е( версия 9.0.45), поэтому гладка и анимирована.

• виды нграфиков: обычные координатные графики(точками и линиями), бары, пироги, а так же их группы (серии)
• формат данных – объект YAHOO.util.DataSource, который можно получать откуда душе угодно. По ним, кстати, и таблицы строить удобно и легко, следовательно смена вида таблица/график по кнопке, делается за несколько минут
  
• умеет перерисовываться по времени
• умеет рисовать легенду

Из остального – как обычно потрясающая документация. За одни только cheatsheet’ы на каждый раздел хочется пожать руку и угостить компотом.

Группировка строк в гридах

Скроллинг списка табов

Тип столбца – дерево

Помимо этого обновлена документация, добавлено несколько примеров.

Новость на блоге Ext JS

• умеет генерировать HTML (вот такой), XML и XMI (например для Umbrello).
• резок, как понос, ибо на Perl’е написан
• поддерживает следующие Doc-кострукции:
  • @param
  • @argument
  • @return
  • @returns
  • @author
  • @deprecated
  • @see (связи с с методами, классами обрабатываются)
  • @version
  • @requires
  • @throws
  • @exception
  • @link
  • @fileoverview
  • @class
  • @constructor
  • @type
  • @extends
  • @private
  • @final
  • @member
  • @ignore
  • @base
  • @addon
  • @exec

Даешь документацию всего JS-кода!

UPDATE: Как оказалось JSDoc’и прекрасно понимает JSEclipse.

ThickBox не устроил своей жесткостью, ибо рысканье по коду обнаружило нехватку настроек, а именно, невозможность навесить свой callback для AJAX-запросов.

Поискал немного, и наткнулся на jqModal, маленький и гибкый. Его хоть ковырять проще, ибо меньше он.