<html>
<head>
<title>Operation VS Character</title>
</head>
<body>
<div id='el-target'>
TEST
</div>
</body>
</html>
(()=>{
document.getElementById("el-target").innerHTML = "TEST";
document.getElementById("el-target").innerHTML = "TEST";
document.getElementById("el-target").innerHTML = "TEST";
document.getElementById("el-target").innerHTML = "TEST";
document.getElementById("el-target").innerHTML = "TEST";
document.getElementById("el-target").innerHTML = "TEST";
document.getElementById("el-target").innerHTML = "TEST";
document.getElementById("el-target").innerHTML = "TEST";
document.getElementById("el-target").innerHTML = "TEST";
document.getElementById("el-target").innerHTML = "TEST";
})();
(()=>{
const getByiD = (id)=>{
return document.getElementById(id);
};
const setInner = (el, content)=>{
el.innerHTML = content;
};
setInner(getByiD("el-target", "TEST"));
setInner(getByiD("el-target", "TEST"));
setInner(getByiD("el-target", "TEST"));
setInner(getByiD("el-target", "TEST"));
setInner(getByiD("el-target", "TEST"));
setInner(getByiD("el-target", "TEST"));
setInner(getByiD("el-target", "TEST"));
setInner(getByiD("el-target", "TEST"));
setInner(getByiD("el-target", "TEST"));
setInner(getByiD("el-target", "TEST"));
})();
--enable-precise-memory-info
flag.
Test case name | Result |
---|---|
VERSI STANDAR | |
VERSI KOMPRESS |
Test name | Executions per second |
---|---|
VERSI STANDAR | 21792.3 Ops/sec |
VERSI KOMPRESS | 22373.0 Ops/sec |
Let's break down the provided benchmark and explain what's being tested, compared options, pros and cons of each approach, library usage, special JavaScript features, and alternative approaches.
Benchmark Test Cases
The benchmark test cases are defined in the "Individual test cases" section. There are two test cases:
getByiD
and setInner
. The getByiD
function returns the result of calling document.getElementById
, and the setInner
function updates the innerHTML property of an element.What's Being Tested
Both test cases are testing how fast it is to set the innerHTML property of a specific HTML element multiple times. However, the VERSI KOMPRESS test case uses two functions instead of directly accessing the element's ID, which might affect the performance.
Options Compared
The main options being compared are:
innerHTML
property directly (VERSI STANDAR) vs. assigning a string value to an element (not explicitly mentioned in the provided code, but implied in the test cases)Pros and Cons of Each Approach
getByiD
function is cached or optimized for performance.Library Usage
There is no explicit library usage mentioned in the provided code. However, it's worth noting that libraries like jQuery can optimize DOM lookups and manipulation, but their use would require additional context.
Special JavaScript Features
None of the special JavaScript features are explicitly used in the provided code.
Alternative Approaches
Other approaches to testing performance could include:
It's also worth noting that measuring performance can be affected by many factors beyond just the JavaScript code itself, such as: