Июл 2

Часто веб разработчик пишет 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));
}

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

Май 23

В javascript объекты передаются и копируются по ссылке. Рассмотрим пример:

// Создаем объект с единственным полем number
var obj = { number: 1 };

// Копируем объект
var copy = obj;
copy.number = 777;

alert(obj.number);

В результате выполнения данного кода на экран будет выведено число 777 (а не 1 как ожидалось). Переменные obj и copy - одна и та же ссылка.

Как передать объект по значению? Нам нужна функция clone.

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

function clone(o) {
 if(!o || ‘object’ !== typeof o)  {
   return o;
 }
 varc = ‘function’ === typeof o.pop ? [] : {};
 var p, v;
 for(p in o) {
 if(o.hasOwnProperty(p)) {
  v = o[p];
  if(v && ‘object’ === typeof v) {
    c[p] = clone(v);
  }
  else {
    c[p] = v;
  }
 }
}
 return c;
}

Проверяем действие функции:

var o = { a:1, get:function(){ alert(this.arr[1]);}, arr: [1,2,3] };
var c = clone(o); // делаем клон объекта

c.arr[0] = 77;
c.arr[1] = 88;
c.arr[2] = 99;

// Значения остались прежними
alert(o.arr[0]); // 1
alert(o.arr[1]); // 2
alert(o.arr[2]); // 3

// Методы тоже были скопированы
c.get(); // 88
o.get(); // 2

Как видно из примера, функция clone скопировала объект o вместе со всеми его свойствами и методами.

Пользуйтесь на здоровье :)

Май 19

Обычно данные для AJAX запроса передаются методом GET в виде переменная1=значение&переменная2=значение. А если нам нужно передать большую структуру данных, например объект javascript или массив объектов? Согласитесь, что на много удобнее работать с объектами, а не с отдельными переменными.

Как передать объект javascript на сервер?

На помощь нам приходит JSON (JavaScript Object Notation). JSON - это запись javascript объекта в строковом представлении. В таком случае мы можем наш массив javascript объектов передать на сервер в виде JSON строки, а на сервере “расшифровать” эту строку в такой же массив объектов (php объектов).

Для решения подобной задачи нам нужна функция для преобразования объектов в JSON строку. Сделать это можно при помощи библиотеки: http://json.org/json2.js (здесь только 2 метода - parse и stringify). Подключаем этот файл к странице:

<script src=“javascript/json.js”

type=“text/javascript”></script>
<script type=“text/javascript”>
<!–
// создаем массив объектов
var arrObjects = new Array();
arrObjects.push( { id: 5, name: “rukudic”, age: 24} );
arrObjects.push( { id: 7, name: “Zhenya”, age: 22} );

// передаем массив на сервер (например, при помощи jQuery)
$.ajax({
type: “POST”,
url: ‘./ajax.Handler.php’,
dataType: “json”,
data: “arrObjects=” + JSON.stringify(arrObjects),
success: function(response)
{
// обрабатываем ответ сервера
}
});

–>
</script>

На сервере преобразовываем значение при помощи php функции json_decode:

$arrObjects = json_decode($_POST[‘arrObjects’]);