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

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选择器的性能优化方案，暂时整理到这里，还有什么要添加的欢迎评论留言。

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

本文来源于：前端性能JQuery篇之选择器优化-变化吧门户
特别声明：以上文章内容仅代表作者本人观点，不代表变化吧门户观点或立场。如有关于作品内容、版权或其它问题请于作品发表后的30日内与变化吧联系。