Toggle navigation
MeasureThat
.net
Create a benchmark
Tools
Feedback
Feature Requests
FAQ
Register
Log In
$(document).height() vs document.body.clientHeight
(version: 0)
Benchmark.js
$(document).height() vs document.body.clientHeight
Comparing performance of:
$(document).height() vs document.body.clientHeight
Created:
7 years ago
by:
Guest
Go to the latest result
HTML Preparation code:
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js'></script>
Tests:
$(document).height()
var height = $(document).height();
document.body.clientHeight
var height = document.body.clientHeight;
Rendered benchmark preparation results:
Suite status:
<idle, ready to run>
Run tests (2)
Previous results
Fork
Test case name
Result
$(document).height()
document.body.clientHeight
Fastest:
N/A
Slowest:
N/A
Latest run results:
Run details:
(Test run date:
one year ago
)
User agent:
Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/132.0.0.0 Safari/537.36
Browser/OS:
Chrome 132 on Windows
View result in a separate tab
Embed
Embed Benchmark Result
<iframe src="https://measurethat.net/Embed?id=583162" width="100%" height="500px"></iframe>
document.body.clientHeight
1.4M/s
$(document).height()
264K/s
View exact numbers
Test name
Executions per second
✓
document.body.clientHeight
1,374,198 Ops/sec
$(document).height()
264,398 Ops/sec
Autogenerated LLM Summary
(model
llama3.2:3b
, generated one year ago):
Let's break down the benchmark and explain what's being tested. **Benchmark Definition** The benchmark compares two ways to get the height of the document body in JavaScript: 1. Using jQuery: `$(document).height()` 2. Using the native DOM API: `document.body.clientHeight` This comparison is likely done to determine which approach is faster, more efficient, or has better performance characteristics. **Options Compared** There are two options being compared: A) Using jQuery (`$(document).height()`) B) Using the native DOM API (`document.body.clientHeight`) **Pros and Cons of Each Approach** **Using jQuery:** Pros: * Easier to read and write, especially for developers familiar with jQuery * Can be more convenient if you're already using jQuery for other purposes Cons: * Adds an extra library dependency (jQuery) * May introduce additional overhead due to the library's execution time * May not provide direct access to all DOM properties **Using the Native DOM API:** Pros: * No extra library dependency, reducing overhead * Provides direct access to most DOM properties * More efficient for performance-critical code Cons: * Requires more manual effort to write and read * May be less readable or maintainable for developers unfamiliar with DOM APIs **Library Used (jQuery)** jQuery is a popular JavaScript library that simplifies DOM manipulation, event handling, and other tasks. In this benchmark, jQuery is used to execute the `$(document).height()` method. **Special JS Feature/Syntax** There doesn't appear to be any special features or syntax being tested in this benchmark. Both options are standard, widely-supported methods for accessing the document body's height. **Other Alternatives** If you wanted to compare other approaches to getting the document body's height, some alternatives could include: * Using a different library (e.g., Lodash, Ramda) that provides similar functionality * Using a custom implementation without relying on jQuery or DOM APIs * Using a browser-specific feature (e.g., WebKit's `window.document.body.height`) Keep in mind that these alternatives would likely have their own trade-offs and considerations. **Benchmark Preparation Code** The provided HTML preparation code includes a script tag linking to the jQuery library, ensuring that jQuery is available for use during the benchmark. The Script Preparation Code field is empty, indicating that no additional setup or configuration is required before running the benchmark. **Individual Test Cases** Each test case defines a single benchmark definition (e.g., `var height = $(document).height();` or `var height = document.body.clientHeight;`) and a corresponding test name. The test cases are likely run in isolation to measure the execution time of each individual operation. **Latest Benchmark Result** The latest benchmark result shows the execution times for both options: * Using jQuery (`$(document).height()`) takes approximately 102,861 executions per second * Using the native DOM API (`document.body.clientHeight`) takes approximately 666,323 executions per second Based on these results, it appears that using the native DOM API is significantly faster.
Related benchmarks
jQuery height Vs Native height
Comments
Confirm delete:
Do you really want to delete benchmark?