Улучшение производительности в JavaScript с помощью таймера

Бывают задачи, когда необходимо в цикле выполнять большое количество итераций и при каждой такой итерации нужно создать объект или элемент на странице, задать css-стиль и т.д. Когда итераций немного, то проблема не существенная, а что если вам нужно создать сто, тысячу, миллион объектов?

// Антишаблон, не использовать!
for (var i = 0; i < 1000000; i ++) {
    console.log(i);
}

В данном случае браузер просто перестанет реагировать и повиснет.

Основные правила при использовании циклов при больших итерациях:

1. счет итераций должен быть в обратном порядке — от максимального значения до нуля. Это дает дополнительный прирост в скорости из-за того, что операция сравнения с числом 0 немного эффективнее, чем операция сравнения с длинной массива или любым другим числом, отличным от 0;
2. если известна длина цикла, то ее необходимо сохранить в отдельную переменную, так как при каждой итерации обращаться к свойству length снижает производительность;
3. если вы используете JSLint, то советую оператор ++ или — заменить на +=1 и -=1, соответственно;
4. в javascript циклы for, while и do while абсолютно одинаковы по скорости производительности, что нельзя сказать о for in, поэтому не важно какой именно цикл вы используете и старайтесь избегать for in там, где это возможно.

// Антишаблон, не использовать!
var count = 1000000;

while (count -= 1) {
    console.log(count);
}

Даже если нам заранее известно количество итераций в цикле и если мы запустим цикл с последнего элемента и пойдем в порядке убывания, — как показано в примере выше — то браузер достигнув цикла, заставит пользователя ждать(в лучшем случае). И хорошо, если script расположен перед закрывающим тегом body, а не в head. В противном случае javascript не даст загрузиться html документу, пока полностью не будет выполнен.

Решение этой проблемы состоит в следующем:

1. разбиваем наш миллионный(в данном случае) цикл на несколько частей;
2. создаем таймер, который будет запускать цикл с итерациями для каждой части, как только итерации одной части заканчиваются, то таймер запускается заново для следующей части.

var count = 1000000,
    parts = 500, // разбиваем на 500 частей, то есть в каждой части у нас будет 2000 итераций(1000000 / 500 = 2000)
    maxIterations = count / parts, // собственно итерации для каждой части
    iteration = 0; // счетчик итераций

setTimeout(function createCycle() {
    /*
     Для разнообразия привел цикл for, но как писал уже выше, разницы между while и for по производительности нет;
     так же цикл сделал по возрастанию, чтоб показать, что даже в таком случае производительность НАМНОГО больше,
     чем в предыдущем примере
    */
    for (var i = 0; i < maxIterations; i += 1) {
        console.log(i);
    }

    iteration ++;

    if (iteration < parts) {
    /*
     Так как число не маленькое(1000000), то таймер необходимо запускать с большим интервалом,
     в противном случае он не успев обработать одну часть(parts) до конца(от 1 до 2000)
     приступит к выполнению следующей 
    */
        setTimeout(createCycle, 1000); 
    }
}, 1000);

Если же вы разбили свой цикл на достаточно большое количество частей и в каждой части у вас вышло итераций немного, то смело ставьте интервал в 25мс(использование задержки менее 25мс в Internet Explorer может привести к блокированию браузера).

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

Обработка больших функций

Бывает, когда функция выполняется достаточно долгое время, в таком случае эту функцию желательно разделить на несколько маленьких функций, которые будут выполняться последовательно. Все, что для этого необходимо — это добавить каждую функцию в массив.

function foo1() { console.log('foo1'); }
function foo2() { console.log('foo2'); }
function foo3() { console.log('foo3'); }

function createTasks() {
    var tasks = [foo1, foo2, foo3];

    setTimeout(function getTask() {
        tasks.shift()(); // вырезаем из массива первую функцию и обрабатываем ее, после чего берем следующую и т.д.

        if (tasks.length > 0) {
            setTimeout(getTask, 25);
        }
    }, 25);
}

createTasks();

Во всех вышеописанных примерах таймеры срабатывали последовательно друг за другом, в связи с этим влияние на производительность было минимальным. Но, как только на странице начинают срабатывать несколько таймеров одновременно — начинаются проблемы. Из-за однопоточной работы браузеров, таймеры начинают конкурировать друг с другом за время, необходимое для выполнения переданных им функций. Чтобы обойти эту проблему желательно создать единственный таймер многократного срабатывания, выполняющий множество операций при каждом срабатывании.

Автор: theNobody

Источник ^[1]