jQuery CSS height vs clientHeight

Benchmark created on

Description

Test box model calculations

Preparation HTML

<style>
.test {
        border: 1px solid #000;
        float: left;
        width: 25%;
        padding: 5px
}
.test50 {
        height: 50%
}
.bbox {
        -moz-box-sizing: border-box;
        -ms-box-sizing: border-box;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<div id="cnt1" class="test" style="height:300px">
<p>Test Content</p>
</div>
<div id="cnt2" class="test test50">
<p>Test Content</p>
</div>
<div id="cnt3" class="test bbox" style="height:200px">
<p>Test Content</p>
</div>
<div id="cnt4" class="test test50 bbox">
<p>Test Content</p>
</div>
<script>
  var $cnt1 = $("#cnt1");
  var $cnt2 = $("#cnt2");
  var $cnt3 = $("#cnt3");
  var $cnt4 = $("#cnt4");
</script>

Test runner

Ready to run.

Testing in
TestOps/sec
CSS Height Calc 1
$cnt1.css("height");
ready
clientHeight Calc 1
$cnt1[0].clientHeight;
ready
CSS Height Calc 2
$cnt2.css("height");
ready
clientHeight Calc 2
$cnt2[0].clientHeight;
ready
style calc 1
$cnt1[0].style.height;
ready
style calc 2
$cnt2[0].style.height;
ready
CSS BoxBorder Height Calc 1
$cnt3.css("height");
ready
clientHeight BoxBorder Calc 1
$cnt3[0].clientHeight;
ready
style BoxBorder calc 1
$cnt3[0].style.height;
ready
CSS BoxBorder Height Calc 2
$cnt4.css("height");
ready
clientHeight BoxBorder Calc 2
$cnt4[0].clientHeight;
ready
style BoxBorder calc 2
$cnt4[0].style.height;
ready

Revisions

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