Оптимизация кода Javascript
Оптимизация кода Javascript
1. Switch vs If-Then-Else
Сравнение производительности конструкций SWITCH и IF-ELSE IF
тестировался следующий код:
var x=20;
var y=0;
for (var i=0; i < 100000; i++) {
if (x == 0) {y = x}
else if(x == 1) {y = x}
else if(x == 2) {y = x}
else if(x == 3) {y = x}
else if(x == 4) {y = x}
else if(x == 5) {y = x}
else if(x == 6) {y = x}
else if(x == 7) {y = x}
else if(x == 8) {y = x}
else if(x == 9) {y = x}
else if(x == 10) {y = x}
else if(x == 11) {y = x}
else if(x == 12) {y = x}
else if(x == 13) {y = x}
else if(x == 14) {y = x}
else if(x == 15) {y = x}
else if(x == 16) {y = x}
else if(x == 17) {y = x}
else if(x == 18) {y = x}
else if(x == 19) {y = x}
else if(x == 20) {y = x}
}
и
var x=20;
var y=0;
for (var i=0; i < 100000; i++) {
switch (x) {
case 0 : y=x;break;
case 1 : y=x;break;
case 2 : y=x;break;
case 3 : y=x;break;
case 4 : y=x;break;
case 5 : y=x;break;
case 6 : y=x;break;
case 7 : y=x;break;
case 8 : y=x;break;
case 9 : y=x;break;
case 10 : y=x;break;
case 11 : y=x;break;
case 12 : y=x;break;
case 13 : y=x;break;
case 14 : y=x;break;
case 15 : y=x;break;
case 16 : y=x;break;
case 17 : y=x;break;
case 18 : y=x;break;
case 19 : y=x;break;
case 20 : y=x;
}
}
FireFox: IFTE: 250ms, SWITCH: 25ms Прирост производительности: 10.00 раз
IE: IFTE: 281ms, SWITCH: 219ms Прирост производительности: 1.28 раза
этот же тест в PHP показал прирост производительности при использовании оператора switch в 1.46 раза
2. Switch Structure
Оператор switch быстрее выполняется, если переменные (по которым ведется сравнение значения) упорядочены и увеличиваются предсказуемо.
iter2 = 100000;
var x=20;
var y=0;
for (var i=0; i < iter2; i++) {
switch (x) {
case 0 : y=x;
case 1 : y=x;
case 2 : y=x;
case 3 : y=x;
case 4 : y=x;
case 5 : y=x;
case 6 : y=x;
case 7 : y=x;
case 8 : y=x;
case 9 : y=x;
case 10 : y=x;
case 11 : y=x;
case 12 : y=x;
case 13 : y=x;
case 14 : y=x;
case 15 : y=x;
case 16 : y=x;
case 17 : y=x;
case 18 : y=x;
case 19 : y=x;
case 20 : y=x;
}
}
и
iter2 = 100000;
var x=200;
var y=0;
for (var i=0; i < iter2; i++) {
switch (x) {
case 0 : y=x;
case 9 : y=x;
case 23 : y=x;
case 35 : y=x;
case 41 : y=x;
case 50 : y=x;
case 62 : y=x;
case 70 : y=x;
case 87 : y=x;
case 91 : y=x;
case 102 : y=x;
case 111 : y=x;
case 125 : y=x;
case 130 : y=x;
case 149 : y=x;
case 152 : y=x;
case 161 : y=x;
case 171 : y=x;
case 183 : y=x;
case 190 : y=x;
case 199 : y=x;
}
}
FireFox: SWITCH БЕЗ ОПТИМИЗАЦИЙ: 78ms, SWITCH С ОПТИМИЗАЦИЕЙ: 47ms Прирост производительности: 1.66 раза
IE: SWITCH БЕЗ ОПТИМИЗАЦИЙ: 218ms, SWITCH С ОПТИМИЗАЦИЕЙ: 218ms Прирост производительности: нет
в PHP это тоже не дает прироста к проиводительности.
в PHP switch отрабатывает быстрее, если переменная x не совпадает ни с одним из значений case...
3. Look Up Tables
Смысл оптимизации заключается в том, чтобы минимизировать трудоемкие операции, например математические. Эта минимизация заключается в том чтобы все возможные результаты заранее поместить в массив и выбирать результаты минуя операции вычисления.
Например
sin = new Array();
for (var i=1;i<=360;i++) {
sin=i*(Math.PI/180);
}
для того чтобы выбрать синус необходимого угла например 34 градуса:
var trigVal = sin[34];
Код используемый в тестах:
создаем массив-таблицу значений
logTable = new Array(100);
for (var i=0; i <=99; i++) {
logTable = Math.log(i);
}
4. Loop Unrolling
Идея заключается в ускорении выполнения циклов, наглядный пример:
for (var i=0;i
[делаем что-то с i];i++;
[делаем что-то с i];i++;
[делаем что-то с i];i++;
[делаем что-то с i];i++;
[делаем что-то с i];i++;
}
выполнится намного быстрее чем код
for (var i=0; i
[делаем что-то с i];
}
в PHP тоже очень хорошо видно увеличение производительности при использовании Loop Unrolling.
5. Reverse Loop Counting
Дело в том, что сравнение переменной с числом выполняется быстрее, чем сравнение переменной с другой переменной. Также автор статьи упоминает, что сравнение переменной с числом 0 выполняется быстрее, чем сравнение переменной с каким-либо другим числом.
По этому цикл
for (i=0; i
// do something here
}
будет лучше заменить на цикл
for (var i=iterations;i>0;i--) {
// do something here
}
Тестировался код:
CODE 1:
rIter=500000;
for (var i=rIter;i>0;i--){
}
CODE 2:
rIter=500000;
for (var i=0;i
}
FireFox: CODE 2: 219ms, CODE 1: 78ms Прирост производительности: 2.80 раза
IE: CODE 2: 188ms, CODE 1: 125ms Прирост производительности: 1.50 раза
Это справедливо и для PHP!!!
6. Loop Flipping
Автор в статье говорит, что встречаются ситуации, когда постфиксный цикл будет работать быстрее, но конкретных примеров не приводит.
Этого следует избегать, так как постфиксный цикл
CODE1:
var fIter=500000;
i=0;
do
{
i++;
} while(i
выполняется медленнее чем префиксный (по крайней мере во всех проводимых javascript тестах)
CODE2:
var fIter=500000;
for (var i=0;i
}
FireFox: CODE1: 578ms, CODE2: 219ms Прирост производительности: 2.64 раза
IE: CODE1: 313ms, CODE2: 187ms Прирост производительности: 1.67 раза
в PHP ситуация обратная, постфиксный цикл (не знаю почему) немного быстрее работает.
В нашей веб-студии создание сайта Винница так же подразумевает анализ наиболее пригодных програмных структур и скриптов.