Ускорение кода на JavaScript


Оптимизация JavaScript - это один из важнейших пунктов разработки проекта. Иногда мы просто не задумываемся, что один и тот же код можно написать по разному, и скорость выполнения этого кода соответственно может быть разной!

1) Общеизвестный факт, что работа с DOM деревом - это очень трудоемкий процесс для браузера. Но не каждый знает, как можно уменьшить количество обращений к DOM. Просто сохраните нужный элемент в переменную и дальше работайте уже непосредственно с ней:

var my_list = document.getElementById("lists");
for(var i=0; i<10000; i++){
var item = document.createElement("li");
item.innerHTML = "Пункт №"+ (i+1);
my_list.appendChild(item);
}

В предыдущем примере видно, что обращении к DOM будет происходить в каждой итераций цикла по два раза.

После оптимизации этого кода, получим:

var my_list = document.getElementById("lists");
var my_fragment = document.createDocumentFragment();
for(var i=0; i<10000; i++){
var item = document.createElement("li");
item.innerHTML = "Пункт №"+ (i+1);
fragment.appendChild(item);
}
my_list.appendChild(my_fragment);

Как видим, теперь обращений к DOM стало в 2 раза меньше. А прирост в скорости – больше!

2) Почти в каждом серьезном проекте есть работа с циклами, но мало кто задумывается, что и здесь можно написать код с меньшим числом вычислений, а значит и ускорить его работу. Например, есть массив:

var names = ['w1','w2','w3','w4',…];

Теперь пройдемся циклом по его элементам:

for(var i=0; i < names.length; i++) {
// doSomething…
}

На первый взгляд все просто и обычно, но на самом деле, с каждой итерацией мы заново вычисляем длину массива names, тем самым тратим на это драгоценные микросекунды! Лучше сделать так:

var nameslen = names.length;
for(var i=0; i < nameslen; i++) {
// doSomething…
}

Вычислив единожды размер массива names, заносим это значение в переменную nameslen и больше не тратить на это время.

Еще есть один способ избавиться от операции сравнения, и если логика работы скрипта позволят, то лучше делать так:

var nameslen = names.length;
for (var i= nameslen; i--;) {
// doSomething…
}

И это еще не все тонкости оптимизации...

,

1 Star2 Stars3 Stars4 Stars5 Stars (голосов 1, в среднем: 5.00 из 5)
Loading ... Loading ...


  1. #1 josser - Декабрь 4th, 2009 at 13:19

    На самом деле при каждой итерации цикла размер массива не будет вычисляться.
    .length – это свойство обьекта массива и оно просто увеличивается или уменьшается на единичку при добавлении или удалении элементов в массиве.

    Суть оптимизации в том что бы уменьшить время доступа к этому значению. Так как время доступа к свойству обьекта больше чем к время доступа к локальной переменной.

    А вот как это надо делать правильно:

    var i = arr.length;
    while(i–) {
    // тут выполняем операции с arr[i];
    }

  2. #2 nice - Декабрь 4th, 2009 at 14:07

    спасибо, согласен!

  3. #3 Alex - Январь 11th, 2010 at 01:50

    мда… программер – энто не профессия, а способ жизни. вроде бы общеизвестный принцип, а ушел из поля видимости. пол дня убил на ненужные проверки, пока не попал сюда.

    автору – большущее спасибо. реально помогло. =)

(will not be published)

Spam Protection by WP-SpamFree Plugin

  1. No trackbacks.