jQuery: Добавление контекста к селектору намного быстрее, чем совершенствование Вашего селектора?

Question

jQuery: Добавление контекста к селектору намного быстрее, чем совершенствование Вашего селектора?

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

.parent-class {
	position: relative;
}

.content-class {
	background-color: #fff;
	position: absolute;
	top: 20px;
	left: 20px;
	padding: 10px;
}

.content-class h1,
.content-class p {
  margin: 0;
}

<div class="parent-class">
	<div class="content-class">
		<h1>Hello World!</h1>
		<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
	</div>
	<img src="https://images.pexels.com/photos/1020315/pexels-photo-1020315.jpeg" alt class="img img-fluid">
</div>

12

css-selectors jquery

задан Brian Tompsett - 汤莱恩 31 May 2015 в 14:06

1 ответ

Другие вопросы по тегам:

css-selectors jquery

Похожие вопросы:

score 15 · Accepted Answer

добавление контекста к селектору намного быстрее, чем совершенствование Вашего селектора

Это верно в общем случае. Относительно Ваших определенных примеров однако это не обязательно верно для jQuery <= 1.2.6.

До и включая jQuery 1.2.6 селекторный механизм работал в "вершине вниз" (или "слева направо") способ. Означание, что оба примера работали бы как это (примерно):

var root = document.getElementById('bar');
return root.getElementsByTagName('li');

jQuery 1.3.x (т.е., Шипение, которое встраивает jQuery) представил "восходящее" (или "справа налево") подход к запросам DOM. Так $('#bar li') теперь становится (примерно):

var results = [];
var elements = document.getElementsByTagName('li');
for(var i=0; i < elements.length; i++) {
    var element = elements[i];
    var parent = element.parentNode;
    while(parent) {
        if(parent.id == 'bar') {
            results.push(element)
            break;
        }
        parent = parent.parentNode;
    }
}
return results

Существуют преимущества и оборотные стороны к обоим подходам. Вы нашли одну из оборотных сторон.

Править: просто найденный из этого обсуждения, что соединительная линия Шипения теперь делает специальное освобождение селекторов где #id является первым. Это использует это в качестве корневого контекста, ускоряя вещи немного. Это должно уменьшиться, если не устраняют различия в скорости, Вы видите.