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

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

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

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

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

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

句法：

$(''element")

例子：

HTML

  

    
    
    
  
    
        p {
            font-size: 25px;
        }
    

  

  
    GeeksForGeeks
  
    
  
        // Element selector
        $("p").css("color", "red");
    

  

输出：

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

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

句法：

$("#ID")

例子：

HTML

  

    
    
    
  
    
        p {
            font-size: 25px;
        }
    

  

    GeeksForGeeks
  
    Hello Geeks
  
    
  
        // ID selector
        $("#first").css("color", "red");
    

  

输出：

ID选择器

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

句法：

$(".class")

例子：

HTML

  

  
    
    
    

  

    GeeksForGeeks
  
    Hello Geeks
  
    
  
        // Class selector
        $(".first").css("color","blue")
    

  

输出：

类选择器

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

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

HTML

  

    
    
    

  

    Hello
    Hello
    Hello
  
    
          
        // ID Selector
        let id_time = Date.now();
        let id_t = 0;
  
        for (let i = 0; i < 100000; i++) {
            if ($("#test").css('background-color') == 'yellow')
                $("#test").css('background-color', 'red');
            else
                $("#test").css("background-color", "yellow");
        }
  
        id_t = Date.now() - id_time;
        console.log(' ID Selector : ' + id_t + ' milliseconds');
  
        /*-------------------------------------------------------*/
  
        // Class Selector
        let cl_time = Date.now();
        let cl_t = 0;
  
        for (i = 0; i < 100000; i++) {
            if ($(".test").css('background-color') == 'yellow')
                $(".test").css('background-color', 'red');
            else
                $(".test").css("background-color", "yellow");
        }
  
        cl_t = Date.now() - cl_time;
  
        console.log(' Class Selector :' + cl_t + ' milliseconds');
  
        /*----------------------------------------------------------*/
  
        // Element Selector
        let el_time = Date.now();
        let el_t = 0;
  
        for (i = 0; i < 100000; i++) {
            if ($("h3").css('background-color') == 'yellow')
                $("h3").css('background-color', 'red');
            else
                $("h3").css("background-color", "yellow");
        }
  
        el_t = Date.now() - el_time;
        console.log('Element Selector : ' + el_t + ' milliseconds');
    

  

输出：

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 的每个元素并检查类名称。