Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/jquery-2.0.0b2.js"></script>
<meta charset=utf-8 />
<title>JS Bin</title>
<!--[if IE]>
  <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<style>
  article, aside, figure, footer, header, hgroup, 
  menu, nav, section { display: block; }
</style>
</head>
<body>
  <ul id="buttons">
    <li><button id="test1">Test1: time for $(".holder")</button>
    <li><button id="test2">Test2: time for $(".holder", "#context")</button>
    <li><button id="test3">Test3: time for $(".holder", $("#context"))</button>
    <li><button id="test4">Test4: time for $(".holder", $context)</button>
    <li><button id="test5">Test5: time for $(".holder", context)</button>
    <li><button id="test6">Test6: time for $(".holder", $(context))</button>
    <li><button id="test7">Test7: time for $context.find(".holder")</button>
    <li><button id="test8">Test8: time for $(context).find(".holder")</button>
  </ul>
  <ul id="results"></ul>
</body>
</html>
 
$(document).ready(function(){
    var X = 5000;
    $('#buttons').find('button').bind('click', function(e){
      var $elem = $(this);
      var x = 0;
      var time_count = 0;
      var flag = 1;
      time_count = (new Date()).getTime();
      switch ($elem.prop('id')){
        case 'test1':
          for(var i=0; i<X; i++){
            x = $(".holder").selector;
          }
        break;
        case 'test2':
          for(var i=0; i<X; i++){
            x = $(".holder", "#context").selector;
          }
        break;
        case 'test3':
          for(var i=0; i<X; i++){
            x = $(".holder", $("#context")).selector;
          }
        break;
        case 'test4':
          for(var i=0; i<X; i++){
            x = $(".holder", $context).selector;
          }
        break;
        case 'test5':
          for(var i=0; i<X; i++){
            x = $(".holder", context).selector;
          }
        break;
        case 'test6':
          for(var i=0; i<X; i++){
            x = $(".holder", $(context)).selector;
          }
        break;
        case 'test7':
          for(var i=0; i<X; i++){
            x = $context.find(".holder").selector;
          }
        break;
        case 'test8':
          for(var i=0; i<X; i++){
            x = $(context).find(".holder").selector;
          }
        break;
        default: flag = 0;
      }
      if(flag==1){
        time_count = (new Date()).getTime() - time_count;
        AddToList($elem.text()+' = '+time_count+' msec');
      }
    });
  
    $('body').append(CreateNDepthTree(20));
    var context = document.getElementById("context"), $context = $("#context");
    
  });
  function AddToList(str){
    var $list = $('#results');
    $list.append('<li>'+str+'</li>');
  }
  
  function AccessXTimes($obj, X){
    var x = 0;
    var time_count = (new Date()).getTime();
    for(var i=0; i<X; i++){
    x = $obj.selector;
    }
    time_count = (new Date()).getTime() - time_count;
  }
  
  function CreateNDepthTree(N){
    if(N==2)
      return $('<div/>',{id: 'context'}).append(CreateNDepthTree(N-1));
    else if(N==1)
      return $('<div></div>',{class: 'holder'}).html('<h3>Leaf</h3>');
    else
      return $('<div class="p'+Math.random()*10+'"/>').append(CreateNDepthTree(N-1));
  }
​
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
gtpro
0viewers