Глобальное кеширование селектора JQuery для повышения производительности

Question

Я пытаюсь увеличить производительность jQuery моего мобильного приложения html 5. Я прочитал несколько руководств о хранении используемых селекторов jquery в глобальных объектах. Приложение довольно большое, и я не ожидал большого повышения производительности, но приложение работало еще медленнее (например, 20%).

Я использую только jquery для поиска элементов по идентификатору ($ ("# id") или $ _element.find ("# id")). Идентификаторы уникальны, поэтому меня интересует только поиск первого элемента. Мне удалось глобализовать все вызовы jquery в объекте cacheHandler, который хранит все селекторы по id. Кэш часто очищается и содержит около 30 элементов за цикл.

С этим изменяется приложение побежал медленнее, поэтому я попытался еще несколько вещей, чтобы увеличить производительность:

• кэша [ID] = $ (document.getElementById ("ID"))
• кэша [идентификатор ] = document.getElementById («ID»)
• магазин селекторы с хэш-код: кэш [id.hashCode()]

Я пришла в голову идея, что это решение является медленным, потому что память увеличивается часто, потому что весь дом со всеми его дочерними элементами хранится в кеше.

Так что я была новая идея, кэшировать путь элемента в виде массива, как

document.body.children [1] .children [5] .children [0] => [1,5,0 ]

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

Это ничего не меняет, и все идеи были еще медленнее, чем вызов $ ("# id"), когда мне нужен элемент.

При необходимости я могу предоставить более подробную информацию или фрагменты.

Я благодарен за каждое объяснение, почему это замедляет мое приложение.

Answer 1

Если это мобильное приложение html5, почему вы используете jQuery для селекторов? Кажется очень избыточным.

я обычно делаю Somthing вдоль линий этого:

// helpers, since i hate typing document.get .. 
function _id(e){ return document.getElementById(e); } // single id 
function _all(e){ return document.querySelectorAll(e); } // single elem 
function _get(e){ return document.querySelector(e); } // multiple elem 

// loop helper (for changing or doing things to collection of elements) 
function _for(e,f) { var i, len=e.length; for(i=0,l=len;i<l;i++){ f(e[i]); }} 


// VARs (global) 
var c = _id('c'), // main selector 
    box = c.querySelectorAll('.box'), // boxes in 'c' 
    elements = box.querySelectorAll('.element'); // elems in 'box' 

// Change background-color for all .box using the _for -helper 
_for(elements, function(e){ e.style.backgroundColor = 'red'; } 

Я только хранить основные родителей элементов, так что я могу затем запросить вниз DOM, если это необходимо (ограничение карцера, необходимый для перемещения). В приведенном выше примере переменных можно было бы предположить, что что-то в .box несколько раз меняет ИЛИ, что .box является медленным селектором.

Обратите внимание, что глобальные переменные увеличивают использование памяти, хотя эти переменные могут вмешиваться в сбор мусора. Также обратите внимание, что в некоторых браузерах объекты могут быть медленнее, и если он не раздувает ваш код, вы должны вместо этого хранить его более просто (вы не должны хранить слишком много глобальных переменных, так или иначе).

Edit, JSPerf:

http://jsperf.com/global-vs-local-vars-14mar2015

ли к сведению, однако, что в зависимости от того, что вы выбор и именно то, что вы делаете будет иметь наибольшее влияние. В примере jsPerf разница между локальным и глобальным быстро уменьшается, как только вы начинаете выбирать потомков из глобально кэшированных селекторов, т. Е. Делаем box.find('p').css('color','blue') и т. Д.

Answer 2

Это довольно старый, но мы никогда не знаем, кто-то может прочитать это сообщение.

JQuery основан на Шипение что путь меньше: https://sizzlejs.com/

Вы можете в конечном итоге включать только эту библиотеку. Я бы не рекомендовал для этого сохранить ваш собственный код. Это уже сделано и поддерживается кем-то другим.