Производительность в JQuery / JavaScript: переменные

В данной заметке я приведу простой пример того, как можно и нужно писать программный код а-ля скрипты в языке программирования JavaScript,а также как делать нежелательно. Ниже представлен наглядный пример, начну пожалуй с нехорошего кода.

Итак, пусть мы имеем одну простейшую задачу: окрасить текст элемента с идентификатором CSS userPass в красный цвет. Чтобы скорость выполнения между двумя вариантами решения одного вопроса была более наглядной давайте заставим браузер проделать эту операцию 100 тысяч раз в цикле с предусловием. Использую Google Chrome последней версии.

Документ на HTML5 будет практически предельно простым:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8" />
        <title>Оптимизация JavaScript</title>
    </head>
    <body>
        <script src="http://yandex.st/jquery/2.0.3/jquery.min.js"></script>
        <script src="example.js"></script>
        <style>
            .container { width: 960px; margin: 130px auto; font-size: 14px; font-family: Tahoma; line-height: 1; }
        </style>
        <div class="container">
            <p id="userPass">Текст</p>
        </div>
    </body>
</html>

1) Говнокод:

$(function() {
    var start = new Date(); // начальное время выполнения скрипта.

    // start bad:
    var i = 0;
    var count = 100000;
    while (i < count) {
        $('#userPass').css({'color': 'red'});
        i++;
    }
    // end bad.

    var end = new Date(); // конечное время выполнения скрипта.
    alert('Выполнено за ' + (end.getTime() - start.getTime()) + ' мс');
})

Запускаем 3 контрольных раза подряд, получаем следующие значения (в миллисекундах): 1795, 2014, 2057. Итого, среднее арифметическое времени выполнения равняется числу 1955.(3) мс.

2) По-хорошему. Как надо было:

$(function() {
    var start = new Date(); // начальное время выполнения скрипта.

    // start good:
    var i = 0;
    var count = 100000;
    var myElement = $('#userPass');
    while (i < count) {
        myElement.css({'color': 'red'});
        i++;
    }
    // end good.

    var end = new Date(); // конечное время выполнения скрипта.
    alert('Скорость ' + (end.getTime() - start.getTime()) + ' мс');
})

Опять же запускаем 3 контрольных раза подряд, получаем следующие значения (в миллисекундах): 1362, 1354, 1369, т.е. в среднем это 1361.(6) мс. Сравниваем полученное число с результатом выполнения говнокода и получаем число 593.7 мс. Вот настолько вот быстрее отработал второй сниппет.

В чем подвох? В том, что в первом случае JQuery селектор $('#userPass') находится в теле цикла, т.е. нашему скрипту приходится на каждой итерации оббегать объектную модель документа DOM в поисках элемента с CSS идентификатором userPass. А во втором случае этот же селектор перед началом цикла предусмотрительно загнан в переменную, и в последующем берется оттуда.

* * *

Итоги. Разумеется в разных браузерах показатели скорости будут разными, но суть примера от этого не меняется. Плюс во втором случае код получился чуть удобнее.

Статья написана после прочтения тематического материала на официальном сайте компании IBM.





© 2012-2014 Druweb.ru. Вы можете спокойно копировать любые материалы сайта только при наличии обратной ссылки.