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

Селекторы и производительность при выборе элементов

При написании скриптов JavaScript (jQuery) очень часто приходится выбирать из DOM необходимые элементы. Поиск определённых элементов на странице в jQuery выполняется на основании выражения (селектора). Но как написать селектор так, чтобы jQuery не только выбирал то, что нужно, но и делал это максимально быстро.

Чтобы это узнать необходимо замерить быстродействие при выполнении различных видов селекторов. Быстродействие поиска элементов в DOM будем осуществлять посредством методов консоли браузера time и timeEnd.

HTML:

<div id="one">
  <div id="two" class="two"></div>
  <div id="three" class="three"></div>
</div>

JavaScript:

<script>
// количество итераций
var iterations = 10000;
// счётчик
var i;
console.time('#one div:first');
for(i=0; i < iterations; i++){
  $('#one div:first');
}
console.timeEnd('#one div:first');

console.time('#one div');
for(i=0; i < iterations; i++){
  $('#one div');
}
console.timeEnd('#one div');

console.time('#one .three');
for(i=0; i < iterations; i++){
$('#one .three');
}
console.timeEnd('#one .three');

console.time('.two');
for(i=0; i < iterations; i++){
  $('.two');
}
console.timeEnd('.two');

console.time('#three');
for(i=0; i < iterations; i++){
  $('#three');
}
console.timeEnd('#three');
</script>

Результаты выполнения этого примера в Google Chrome 50 и Internet Explorer 11.

Результаты теста производительности селекторов при выборе элементов в Google Chrome 50
Результаты теста производительности селекторов при выборе элементов в Google Chrome
Результаты теста производительности селекторов при выборе элементов (представлены в виде гистограммы)
Результаты теста производительности селекторов при выборе элементов (представлены в виде гистограммы
Быстродействие селекторов при выборе элементов в Internet Explorer 11
Быстродействие селекторов при выборе элементов в Internet Explorer 11
Таблица, показывающее время необходимое для выбора элементов в DOM посредством использования разных селекторов
Таблица, показывающее время необходимое для выбора элементов в DOM посредством использования разных селекторов

Из результатов видно, что чем более сложный используется селектор, тем медленнее осуществляется поиск элементов в DOM. Из всех селекторов, наиболее быстро работает селектор по id.

Чтобы повысить быстродействие выполнение скриптов JavaScript на веб-странице возможно потребуется не только оптимизировать селекторы, но и внести изменения в HTML-код. Например, добавить к некоторым элементам атрибуты id или class. А затем их использовать для выбора элементов.