Статья, в которой рассмотрим, как можно увеличить производительность выполнения сценариев 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.




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