前端性能JQuery篇之选择器优化

1,842 阅读3分钟

JQuery有非常多的选取节点的方法,但是采用这些方法选取节点时所影响到的性能是完全不一样的,用更合适的选择器去选取节点,是使用JQuery时优化浏览器性能的一个可考虑方向。

下面进入测试:

首先,我们的建立一个有着复杂样式的无序列表。

<div class="test-case-content">
      <ul id="test-case" class="test">
        <li  class="item-01">Number_01</li>
        <li  class="item-02">Number_02</li>
        <li  class="item-03">Number_03</li>
        <li  class="item-04">Number_04</li>
        <li  class="item-05">Number_05</li>
        <li  class="item-06">Number_06</li>
        <li  class="item-07">Number_07</li>
        <li  class="item-08">Number_08</li>
        <li  class="item-09">Number_09</li>
      </ul>
    </div>
调用浏览器时间调试工具,建立测试函数:

      function testTime(method){
        console.time('testTime');
        if(typeof method === 'function'){
          for(var i=0;i<50000;i++){
            method();
          }
        }
        console.timeEnd('testTime');
      }      

我们采用选取循环50000次的无序列表中的一个方法,来测试每个选择器对于浏览器的响应性能的影响。


1、将选择器选取的节点缓存,将大大的提升响应时间。

分别调用两次方法,测试 未把节点缓存 和 把节点缓存 的时间。


调取控制台,查看两种选择器的执行时间:


可以发现,缓存过的时间要优于未缓存的两倍以上。所以,使用合适的缓存将一定程度的优化页面响应速度


2、尽可能不使用全局选择器,将一定程度的提升响应时间。

分别调用两次方法,测试 使用id选择 和 全局选择 的时间。


调取控制台,查看两种选择器的执行时间:
可以发现,避免选择全局的选择器的时间要优于全局选择器选取的时间,所以,选择器的使用上,要尽量避免使用全局选择。


3、约束的选取条件越少,选取时间越快。

分别调用两次方法,测试 详细的选取条件下选取 和 直接选取 的时间。


调取控制台,查看两种选择器的执行时间:


可以发现,我们不给选择器添加条条框框,它越是能更快的找到方向。所以,在合理的情况下,可以使选取的条件约束少一点。


4、在以上的前提,越详细层级里的定位选择,越会节约选择时间。

分别调用两次方法,测试 一般的选择 和 较详细的选择 的时间。


调取控制台,查看两种选择器的执行时间:


可以发现,选择定位的层级往里,越是详细,越能节约时间。所以,里面的选取条件层级越深,可以使选取条件稍微详细一点。


5、尽量少的使用JQuery自定义的选择器,多使用JS或CSS原生支持的选择。

分别调用两次方法,测试 JQuery自定义选取 和 原本就支持的选择器选取 的时间。


调取控制台,查看两种选择器的执行时间:


可以发现,JQuery自定义选择器选取的明显没有原生的选择器敏捷。所以,如果情况允许,尽量多的使用原生的选择器选择。



关于JQuery选择器的性能优化方案,暂时整理到这里,还有什么要添加的欢迎评论留言。

编程有匠心,从小地方关注性能的优化,感谢你的阅读。