Оптимизация 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…
}

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