Show, detach, css

JavaScript performance comparison

Test case created by BlueWater86

Preparation code

<style type="text/css">
button.hide + button {
  display:none;
}
button.hide {
  border-top-right-radius: .25rem!important;
  border-bottom-right-radius: .25rem!important;
}
</style>

<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>

<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.bundle.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="input-group col-md-6">
  <input type="text" class="form-control" placeholder="Recipient's username" aria-label="Recipient's username" aria-describedby="basic-addon2">
  <div class="input-group-append">
    <button id="btn1" class="btn btn-outline-secondary" type="button">Button 1</button>
    <button id="btn2" class="btn btn-outline-secondary" type="button">Button 2</button>
  </div>
</div>
      
<script>
Benchmark.prototype.setup = function() {
  var btn = $("#btn2"), parent = btn.parent()

};
</script>

Preparation code output

<style type="text/css"> button.hide + button { display:none; } button.hide { border-top-right-radius: .25rem!important; border-bottom-right-radius: .25rem!important; } </style> <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" rel="stylesheet"/> <div class="input-group col-md-6"> <input type="text" class="form-control" placeholder="Recipient's username" aria-label="Recipient's username" aria-describedby="basic-addon2"> <div class="input-group-append"> <button id="btn1" class="btn btn-outline-secondary" type="button">Button 1</button> <button id="btn2" class="btn btn-outline-secondary" type="button">Button 2</button> </div> </div>

Test runner

Warning! For accurate results, please disable Firebug before running the tests. (Why?)

Java applet disabled.

Testing in CCBot 2.0.0 / Other 0.0.0
Test Ops/sec
Detach Attach
btn.detach()
btn.appendTo(parent)
pending…
Hide Show
btn.hide();
btn.show();
pending…
CSS
btn.addClass('hide');
btn.removeClass('hide');
pending…

You can edit these tests or add even more tests to this page by appending /edit to the URL.

Compare results of other browsers

0 Comments