Javascript и оптимизация веб приложения

Часто веб разработчик пишет javascript код не обращая особого внимания на производительность (особенно при использовании какого-либо framework’а). Но когда javascript становится основной частью приложения следует занятся оптимизацией. Хочу поделиться некоторыми советами из личной практики.
Одной из главных характеристик веб приложения является скорость загрузки. Уже на этом этапе можна оптимизировать следующие вещи:

  • количество подключаемых javascript (и css) файлов
  • размер загружаемых файлов

Для того чтобы получить javascript или css файл браузер отсылает GET запрос на сервер. При чем время загрузки примерно одинаково для файлов с разным размером (10 – 100 Kb). Из этого следует, что чем больше файлов мы подключаем, тем больше времени необходимо браузеру, чтобы их загрузить (даже не смотря на их размер). Поэтому, желательно минимизировать количество подключаемых скриптов.

Размер загружаемых файлов – тоже важный момент. Рекомендуется минимизировать размер файлов путем удаления комментариев, лишних пробелов и т.д. Это можно сделать при помощи данного ресурса: http://dean.edwards.name/packer/. Я написал свой codeMinifier на php – и вам советую тоже, потому что инструмент Дэна Эдвардса не корректно минимизирует javascript файлы с регулярными выражениями. Также можно воспользоваться Java приложением YUI Compressor.

После минимизации javascript файла его можно запаковать в архив gzip. Большинство современных браузеров поддерживают Content-Encoding:  gzip (кроме Safari). Такое сжатие практически не снижает производительности скриптов, но отлично сказывается на времени загрузки страницы.

Вторая сторона оптимизации javascript – это оптимизация самого кода. Данная тема заслуживает отдельной статьи, но я хотел бы отметить, что при использовании jQuery остерегайтесь использования метода html() – лучше используйте “родной” для javascript способ – свойство innerHTML. А в прочем, можете сами поэкспериментировать, замеряя скорость работы своих javascript функций:

function doSomething()
{
  var  st = new Date();

  // код функции

  alert(“Время выполнения doSomething = “ + parseInt(new Date() – st ,10));
}

Оптимизируйте, и да будет вам щастье ;-)))

  • Для меня стало откровением отсутствие поддержки gzip-сжатия в Safari

  • admin

    Что есть, то есть…

  • А вообще навороченные фреймворки типа prototipe и т.п. сильно снижают скорость ?

  • admin

    @Зайцев (prototYpe):

    Если разумно использовать – то скорости никак не помешают

  • Судя по акценту авторов на существенном увелечинии скорости работы их фреймоврка в версии 1.2.6, у jQuery дейтсвительно серьезные траблы со скоростью;)

  • Аффтору мегареспектище, буду к вам заходить.

  • Занимательно, побольше бы такого.

  • Где материал брали – неужто из головы?

  • admin

    @Шамиль:

    А вы думаете, для чего я этот блог веду? Прежде всего – это мой личный опыт и мои заметки.

  • Зачет, сенкс автору

  • IE в своём репертуаре, вторая версия:

    function checkTime(func, obj, args) {
    var begin = new Date();
    func.apply(obj || this, args || []);
    var end = new Date();
    return parseInt(end.getTime() - begin.getTime());
    }

  • admin

    Благодарю за искренность и доброту )))

    var time = checkTime(t);

    а что у тебя за переменная такая t ?

  • admin

    2 fxposter

    > Мало у тебя опыта, ой мало. 🙂

    А никто тут и не орал, что я нереально опытный девелопер. Или я что-то не так написал?

  • Смотри ка, хорошо написано

  • var time = checkTime(doSomething);

    Извиняюсь 🙂

  • Супер!

  • Эх, мне бы ваше счастье – никогда не мог подружиться с Жабой – даже ПХП освоил, а Жабу никак. 🙁

  • Мне в этом плане понравилась книга “Разгони свой сайт” (ее скачать можно бесплатно здесь http://speedupyourwebsite.ru/books/speed-up-your-website/). Там и тесты различные, и разные аспекты оптимизации, в общем, основательная книжечка 🙂