Оптимизация Javascript-кода

Написана 3 Января, 2009 в 3:09. Автор: borN_free   |   Теги: javascript, оптимизация Комментарии 4

Доброе время суток, дорогие читатели.

Heading/Alt Text Первый пост я хочу сразу же начать с темы, касающейся вплотную программирования - оптимизации javascript-кода.

На практике я столкнулся с весьма неприятной ситуацией, когда надо было обрабатывать порядка 5000 элементов checkbox, выставляя им массово параметр checked. Все бы хорошо, если бы не наш любимый браузер IE, которые выполнял это действие порядка тридцати секунд, и естественно вся страница зависала на это время.

Я приведу для начала полный код функции, а потом разберем детально что происходит:

function doSelect () {
    var step = 150;
    var is_checked = $('#selector').attr('checked');
    var check = document.getElementsByName('product_selected{$append}[]');
    var from = 0;
    (function () {
        if ((from + step) > check.length) {
            loop_to = check.length;
        } else {
            loop_to = from + step;
        }
        for (var i = from; i < loop_to; i++) {
            check[i].checked = is_checked;
        }
        from += step;
        if (from <= check.length) {
            setTimeout(arguments.callee, 0);
        }
    })();
}

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

Итак, инициализируем необходимые нам переменные:

// количество итераций в одном "потоке"
var step = 150;
// выделяем или снимаем выделение с элементов срeckbox
var is_checked = $('#selector').attr('checked');
// коллекция элементов checkbox
var check = document.getElementsByName('product_selected{$append}[]');
// цикл начинаем с нуля
var from = 0;

Далее идут проверки выхода за предел коллекции - не представляющий интереса код.

if ((from + step) > check.length) {
    loop_to = check.length;
} else {
    loop_to = from + step;
}

И, наконец, самое интересное:

// непосредственно активируем либо деактивируем checkbox
for (var i = from; i < loop_to; i++) {
    check[i].checked = is_checked;
}
// каждый "поток" начинаем с определеного элемента (помните, шаг у нас 150)
from += step;
if (from <= check.length) {
    // вот главное место. Вызываем опять нашу функцию, 
    // и браузер отрисовывает страницу 
    setTimeout(arguments.callee, 0);
}

В итоге оптимизация данного куска javascript-кода уменьшила время выполнения по результатам теста до 0.1ms.

4 comments

+8 ответить
Jacket:
December 31, 2011 at 11:22 am

спасибо, пригодилось

ответить
August 17, 2017 at 03:20 am

Popular color Pantone authority released in replica rolex watches 2017 the green lawn is green, think of the endless suddenly make people feel full of vitality, recently very popular online forgiveness packages, up to fake watches its special meaning, from the visual angle is comfortable. In the watch industry is uk hublot also popular green, here let us see three green elements of watches.

ответить
August 22, 2017 at 07:08 am

For a journalist, such theft carries risk. To run that cheap yeezy boost graph sans attribution, I’d have to assume that no other long-ago reader would remember it, and Gross wouldn’t see it. Should said assumptions chanel replica handbags backfire, I’d be fired. Were I a student caught in a similar situation, I’d fail the assignment fake rolex sale and probably be suspended or expelled. In either case, journalist or student, fear of getting caught shouldn’t be Cheap Longchamp the deterrent. You’re on fake chanel handbags an honor system; plagiarism is intellectually dishonest.

ответить
September 25, 2017 at 01:23 am

Did we mention beer? The annual three-week long festival will be held in Munich from September 16 to October 3, and adidas jeremy scott wants you to be ready for any sloppy drunks or mishaps you may encounter.The company is seeking that the court issue an injunction against Treasure Franchise to stop selling the glasses and to order AM-PM to give replica oakley sunglasses the money it made from the glasses, the Register said.In the year 1675, astronomer Christiann Huygens invented a mechanism for measuring time using a combination of springs and balances. The invention was called a balance spring, and it formed the basis of all fake rolex sale for the next 342 years. Robert Dumas, the father of Jean-Louis and the head of hermes replica at the time, was so struck by the attention that the bag was getting that he renamed the version of the Haut à Courroies that Princess Grace preferred and called it the Kelly.

Оставьте свой комментарий:

Поля с * обязательны.