Оптимизация javascript скриптов

Сжатие скриптов

Два сервиса, позволяющие сжать ваши скрипты.
• Bananascript.com - наилучшее сжатие до 72%.
• Dean Edwards - более известный, но жмет хуже.

Одно важное замечание - при подключении скриптов, созданных этим инструментом, обязательно указывать кодировку для скриптов ISO-8859-1:

<script src=\"banana.js\" charset=\"ISO-8859-1\" type=\"text/javascript\"></script>

Статья на webo.in на тему жать или не жать. Для форматирования Javascript можно воспользоваться JSLint или через локальную версию.

Анализ скорости загрузки страницы

Для анализа вы можете воспользоваться одним из следующих сервисов:

• The Firefox web-developer toolbar позволяет проанализировать размеры всех загруженных на странице файлов (клик правой кнопкой мыши > Web Developer > Information > View Document Size).
• Расширение к Firebug позволяет посмотреть на список файлов: на вкладке "Net"
• OctaGate SiteTimer, который предоставляет online-диаграмму загрузки всех файлов на странице

Сначала HTML, потом Скрипты

Размещаете по возможности JavaScript в конце HTML-файлов. Это позволит всему остальному содержанию страниц (картинкам, таблицам, тексту) загрузиться и отобразиться в первую очередь. Пользователь увидит, что страница загрузилась. После этого большие JavaScript-файлы могут начать загрузку.

Используйте отложенную загрузку JavaScript.

Кеширование

После отладки ваших скриптов обязательно включите возможность кеширования их на всех этапах (ваш сервер, промежуточные прокси сервера, браузер пользователя).

• Кеширование с помощью .htaccess
• Кеширование на PHP

Циклы

Оптимизация логического сравнения при итерациях цикла. Рассмотрим обычный цикл for:

for (var i = 0; i < aList.length; i++) {
	// тело цикла
}

Оптимизируем его за счет присвоения размера массива в переменную и инициализация счетчика объединены в одном выражении:

// переменная len будет хранить длину массива
for (var i = 0, len = aList.length; i < len; i++) {
	// тело цикла
}

Дальнейшая оптимизация такого цикла возможна путем прохода его в обратном порядке (если это допустимо). В этом случае, при каждой итерации мы будем сравнивать счетчик с константой, а не переменной, и объединеним выражения сравнения и декремента:

for (var i = aList.length; --i >= 0;) {
	// тело цикла
}