javascript - 在 Jquery 中查找与选择器速度

Question

<分区>

Answer 1

使用 console.time 和 console.timeEnd 进行分析将为您提供以微秒为单位的性能。

console.time('withSelector');
   for(var i=0; i<10E4 ;i++)
      $("table tr td");
console.timeEnd('withSelector');

同样适用于 $("table").find("tr").find("td") .. 运行下面的代码片段 👇🏼

结果

分析:

With selector 优于 find

function withSelector() {
   $("table tr td");
}



function withFind() {
   $("table").find("tr").find("td")
}

function run(fn, times) { 
   console.time(fn.name);
   for(var i=0; i<times ;i++)
      fn();
   console.timeEnd(fn.name);
}

run(withSelector, 10E4);

run(withFind, 10E4);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<table>
  <tr>
    <th>Month</th>
    <th>Savings</th>
  </tr>
  <tr>
    <td>January</td>
    <td>$100</td>
   
  </tr>
  <tr>
    <td>February</td>
    <td>$80</td>
  </tr>
  <tr>
    <th>Month</th>
    <th>Savings</th>
  </tr>
  <tr>
    <td>January</td>
    <td>$100</td>
  </tr>
  <tr>
    <td>February</td>
    <td>$80</td>
  </tr>
  <tr>
    <th>Month</th>
    <th>Savings</th>
  </tr>
  <tr>
    <td>January</td>
    <td>$100</td>
  </tr>
  <tr>
    <td>February</td>
    <td>$80</td>
  </tr>
  <tr>
    <th>Month</th>
    <th>Savings</th>
  </tr>
  <tr>
    <td>January</td>
    <td>$100</td>
  </tr>
  <tr>
    <td>February</td>
    <td>$80</td>
  </tr>
  <tr>
    <th>Month</th>
    <th>Savings</th>
  </tr>
  <tr>
    <td>January</td>
    <td>$100</td>
  </tr>
  <tr>
    <td>February</td>
    <td>$80</td>
  </tr>
</table>