📜  jQuery 中最快/最慢的选择器是什么?

📅  最后修改于: 2021-11-25 04:21:08             🧑  作者: Mango

jQuery 选择器 用于选择和操作 HTML 元素。

在jQuery中,主要有三个选择器。

  • ID选择器
  • 类选择器
  • 元素选择器

在继续之前,首先让我们简要地看看这些选择器是如何使用的。

元素选择器: jQuery 元素选择器根据元素的名称选择元素。

句法:

$(''element")

例子:

HTML

  

    
    
  
    

  

  
    

GeeksForGeeks

          


HTML

  

    
    
  
    

  

    

GeeksForGeeks

       

Hello Geeks

          


HTML

  

  
    
    
    

  

    

GeeksForGeeks

       

Hello Geeks

          


HTML

  

    
    

  

    

Hello

    

Hello

    

Hello

          


输出:

ID 选择器: jQuery #id选择器根据 ID 选择元素 HTML 标签的属性。

当我们必须处理单个元素时,基本上会使用此选择器,因为 ID 在网页中应该是唯一的。

句法:

$("#ID")

例子:

HTML


  

    
    
  
    

  

    

GeeksForGeeks

       

Hello Geeks

          

输出:

ID选择器

类选择器: jQuery .class选择器选择类匹配的元素或元素集。不同的 HTML 元素允许使用相同的类名。

句法:

$(".class")

例子:

HTML


  

  
    
    
    

  

    

GeeksForGeeks

       

Hello Geeks

          

输出:

类选择器

让我们编写一些代码来看看这些选择器的实际速度有多快?

示例:我们将编写一个使用不同选择器执行相同任务的程序,让我们看看它们花费了多少时间。

HTML


  

    
    

  

    

Hello

    

Hello

    

Hello

          

输出:

ID Selector : 597 milliseconds
Class Selector :751 milliseconds
Element Selector : 741 milliseconds

看到上面代码的结果后,很明显ID选择器是最快的。类和元素选择器花费的时间几乎相同。

jQuery 中最快/最慢的选择器是什么?

在所有三个选择器中,ID 选择器是最快的选择器,因为任何 HTML 元素的 ID 在网页中都是唯一的,当网页加载时,浏览器将开始搜索具有指定 ID 的元素,并且 ID 是唯一的,因此当浏览器找到具有指定 ID 的元素时,它将停止搜索。

但是在类选择器的情况下,多个元素可以具有相同的类名,因此浏览器必须遍历整个 DOM 以找出具有指定类名的每个元素。因此,类选择器被认为是最慢的选择器。

如果您在网页上有很多事情要做,并且不可能每次都使用 ID 选择器,那么最好的方法就是缓存。获取选择器一次并存储它们以备将来使用。

注意:如果我们认为今天的现代浏览器,那么这些选择都一样快,因为在现代浏览器的类名是在内部散列,我们有.getElementsByClassName(),而在旧的浏览器,没有类似.getElementsByClassName(函数),这就是原因.class名称在内部解析为 jQuery,然后遍历 DOM 的每个元素并检查类名称。