jQuery选择器优化

问题描述

$ b pre> //未优化
$（'div.data .gonzalez'）;

// optimized
$（'。data td.gonzalez'）;


报价来源

1. 有人可以解释为什么特定左边会比CSS选择器更快？

   li>
   

2. 这是一个奇怪的事情，或者同样适用于 document.querySelectorAll ？




3. 在CSS文件中使用类似优化的CSS选择器会有什么速度提升吗？

解决方案

jQuery的Sizzle Engine从右到左解析选择器，因此它是真的。虽然有例外，例如当第一个操作数是一个ID。然后搜索将在具有此ID的元素的上下文中操作。这是Sizzle引擎的一个特殊性，但我不知道如何实现querySelectorForAll。

例如：

  $（'div.data .gonzalez'）; 
 

Sizzle会得到所有的gonzalez类的DOM元素，然后检查每一个如果一个祖先是一个div标签与类数据

// unoptimized
$('div.data .gonzalez');

// optimized
$('.data td.gonzalez');

Quote Source

1. Could someone explain why the less specific left is faster as a CSS selector?

2. Is this a Sizzle thing or does the same apply for document.querySelectorAll ?

3. Are there any speed gains using "similarly optimised" CSS selectors in CSS files?

解决方案

jQuery's Sizzle Engine parse selectors from right to left, so it's true. There are exceptions though, for example when the first operand is an ID. Then the search will operate in the context of the element with this ID. That's a particularity of the Sizzle Engine, but I don't know how querySelectorForAll is implemented.

An example:

$('div.data .gonzalez');

Sizzle will get all the DOM elements with class gonzalez then check for each if an ancestor is a div tag with class data

这篇关于jQuery选择器优化的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！