JS - легенды и мифы

[factotum]

За последние годы в сети появилось много ценных советов по увеличения производительности скриптов.

Предлагаю тут собирать аргументы.

Примерно так:
Недавно повстречался материал, где рекомендуют использовать чистый JS вместо jQuery. В принципе логично - вроде бы пара строк на JS должна крутиться быстрее библиотеки.

Для тестов производительности скриптов поможет замечательный сервис http://jsperf.com/

для начала немного банальностей:

getElementById: http://jsperf.com/getelementbyid-vs-jquery-id/48

getElementsByClassName: http://jsperf.com/getelements-vs-jquery-vs-queryselector/10

Не весь кеш одинаково полезен: http://jsperf.com/cached-vs-getelementbyid/4

Кеширование циклов: http://jsperf.com/caching-array-length/174

[factotum]

небольшие эксперименты с добавлением классов: http://jsperf.com/loop-document-getelementsbytagname-v-s/11
для сравнения в тест была добавлена библиотека tt.js, оптимизированная на скорости операций.

[factotum]

История одного скрипта.
изначально была тривиальная задача - добавить нужные классы к кнопкам и таблицам.
с кнопками проще - ловились по ID. Таблицы ловились по тегу.
если не заморачиваться, то все вышеизложенное реализуется просто:

Код: Выделить всё

$( "table" ).addClass( "table table-striped table-bordered" );
$( "#submit" ).addClass( "btn btn-primary" );

Так и было. Две строки. Все работает. Но в голове навязчиво крутилась мысль о том, что тут что-то не так и клиентам можно облегчить жизнь.

Для jQuery сузил круг поиска через определение контента.

Код: Выделить всё

$("#submit").addClass("btn btn-primary");
$("table", "#content").addClass("table table-striped table-bordered");

Искать нужное можно и по другому:

Код: Выделить всё

$("#submit").addClass("btn btn-primary");
$("#content").find("table").addClass("table table-striped table-bordered");

Производительность первого и второго варианта колеблется в зависимости от браузера. Существенных предпочтений нет.

На этом идеи оптимизаций с jQuery закончились и была принята попытка написать все тоже самое на js без помощи сторонних библиотек.
Практически все современные браузеры для работы с классами поддерживают функцию classList.
Функция на js приобрела следующий вид:

Код: Выделить всё

(function(d) {
  if (d.body.classList) {
    var btn = d.getElementById("submit"),
        tables = d.getElementById("content").getElementsByTagName("table"),
        btnClasses, i = 0,
        iz = tables.length;

    btn.classList.add("btn", "btn-primary");

    for (; i < iz; ++i) {
      tables[i].classList.add("table", "table-striped", "table-bordered");
    };
  } else {
   
  }
}(document));

if (d.body.classList) используется для проверки поддержки браузерами classList. Переменные d, btn и tables созданы чтобы избегать трудоемких операций по обращению в DOM, iz - определяет границы цикла.

Для проверки производительности в jsperf.com была создана копия реальной страницы и добавлены варианты скриптов.

Итог можно увидеть тут: http://jsperf.com/custom-addclass/6#runner

Оптимизации с jQuery принесли относительно малый прирост, но если посмотреть на результаты портативных устройств, разница в производительности очень ощутима.
Mobile Safari 6.0
jQuery - 524 ops/sec
jQuery (Optimize) - 2427 ops/sec
jQuery.find - 2522 ops/sec

Android 4.0.3
jQuery - 153 ops/sec
jQuery (Optimize) - 980 ops/sec
jQuery.find - 883 ops/sec


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

Может быть тут и найдется вопрос, почему при хорошем интернете передергивание пары страничек приводит к тормозам и существенному разряду батареи.

А как используете ресурсы клиентов вы?

[factotum]

Небольшой пример передачи объектов лайтбоксу: http://jsperf.com/nativ-vs-jquery-find-link-with-img#runner