JQuery 选择器运行时间

JQuery selector running time

本文关键字：运行时间 选择器 JQuery      更新时间：2023-09-26

JQuery 选择器在内部是如何工作的？它是一个js getElementById函数吗？从 DOM 获取对象的运行时间是多少？

例如： 

<html>
  <div class='container'>
      <div id='myID'> 
         <p class="myText">My Text</p>
      </div>
  </div>
</html>

而这个JQuery代码：

$(document).ready(function(){
   $("#myID").click(function(){
       $("myText").hide(); //Running time?
   });
});

有两种获取执行时间的方法，第一种是console.time（仅用于调试），第二种是performance.now()

Date.now() 和 performance.now() 之间的差异 - date.now 舍入为毫秒，perf.now 舍入为微秒

//This will console.log the result
$(document).ready(function(){
   var myTimerName = 'myTimer1';
   $("#myID").click(function(){
       console.time(myTimerName);
       $(".myText").hide(function(){
           console.timeEnd(myTimerName);
       });
   });
});
//If you need to export this time, use window.performance.now()
$(document).ready(function(){
   $("#myID").click(function(){
       var start = performance.now();
       $(".myText").hide(function(){
           var end = performance.now();
           $('#timer').text((end - start) + 'ms');
       });
   });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
  <div class='container'>
      <div id='myID'> 
         <p class="myText">My Text</p>
      </div>
  </div>
  <span id="timer"></span>
</html>

相关文章：