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));
}

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

Posted in javascript |

18 Responses

  1. [YS.PRO] Says:
    Июль 2nd, 2008 at 1:52 пп

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

  2. admin Says:
    Июль 2nd, 2008 at 2:53 пп

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

  3. Зайцев Says:
    Июль 3rd, 2008 at 3:22 пп

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

  4. admin Says:
    Июль 3rd, 2008 at 4:34 пп

    @Зайцев (prototYpe):

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

  5. Гвидон Маляров Says:
    Июль 4th, 2008 at 4:58 пп

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

  6. sadovushka Says:
    Июль 8th, 2008 at 3:16 пп

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

  7. Джастин Says:
    Июль 8th, 2008 at 10:27 пп

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

  8. Шамиль Says:
    Июль 9th, 2008 at 2:30 пп

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

  9. admin Says:
    Июль 9th, 2008 at 3:29 пп

    @Шамиль:

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

  10. Владимир Says:
    Июль 14th, 2008 at 6:22 пп

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

  11. FX Poster Says:
    Июль 15th, 2008 at 9:13 пп

    Мало у тебя опыта, ой мало. :)

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

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

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

    Это просто бред… Хочешь протестировать время выполнения функции - пиши что-то типа такого:

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

    А потом используй:

    function doSomething() {
    // ...
    }
    var time = checkTime(t);

  12. FX Poster Says:
    Июль 15th, 2008 at 9:24 пп

    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());
    }

  13. admin Says:
    Июль 16th, 2008 at 9:44 дп

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

    var time = checkTime(t);

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

  14. admin Says:
    Июль 16th, 2008 at 11:30 дп

    2 fxposter

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

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

  15. Женек Says:
    Июль 16th, 2008 at 1:49 пп

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

  16. FX Poster Says:
    Июль 16th, 2008 at 8:20 пп

    var time = checkTime(doSomething);

    Извиняюсь :)

  17. жби Says:
    Июль 17th, 2008 at 9:05 дп

    Супер!

  18. Дима Says:
    Июль 18th, 2008 at 2:17 пп

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

Оставить комментарий

Внимание: Комментарии проходят ручную модерацию

Введите код: