Run results for: 1x vs 3x el.textContent #7

Run details:

User agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/91.0.4472.114 Safari/537.36

Browser: Chrome 91

Operating system: Mac OS X 10.15.7

Device Platform: Desktop

Date tested: 2 years ago

Test name	Executions per second
el.textContent 3x	274550.5 Ops/sec
el.textContent 1x	709911.6 Ops/sec
el.textContent 3x with requestAnimationFrame and function inside	888416.8 Ops/sec
el.textContent 1x with requestAnimationFrame and function inside	1033923.0 Ops/sec
el.textContent 3x with requestAnimationFrame and arrow function inside	893016.4 Ops/sec
el.textContent 1x with requestAnimationFrame and arrow function inside	1091226.0 Ops/sec
el.textContent 3x with requestAnimationFrame and function outside	928537.0 Ops/sec
el.textContent 1x with requestAnimationFrame and function outside	1089541.0 Ops/sec
el.textContent 3x with requestAnimationFrame and arrow function outside	910666.5 Ops/sec
el.textContent 1x with requestAnimationFrame and arrow function outside	985887.9 Ops/sec

HTML Preparation code:

<div>xxx</div>

Script Preparation code:

element1 = document.querySelector("div");

x = () => {
element1.textContent = "x";
element1.textContent = "b";
element1.textContent = "c";
element1.textContent = "d";
element1.textContent = "e";
};

y = () => {
//element1.textContent = "x";
//element1.textContent = "b";
element1.textContent = "c";
element1.textContent = "d";
};

xf = function () {
element1.textContent = "x";
element1.textContent = "b";
element1.textContent = "c";
element1.textContent = "d";
element1.textContent = "e";
};

yf = function () {
//element1.textContent = "x";
//element1.textContent = "b";
element1.textContent = "c";
element1.textContent = "d";
};

Tests:

el.textContent 3x
element1.textContent = "x"; element1.textContent = "b"; element1.textContent = "c"; element1.textContent = "d"; element1.textContent = "e";
el.textContent 1x
//element1.textContent = "x"; //element1.textContent = "b"; element1.textContent = "c"; element1.textContent = "d";
el.textContent 3x with requestAnimationFrame and function inside
requestAnimationFrame(function(){ element1.textContent = "x"; element1.textContent = "b"; element1.textContent = "c"; element1.textContent = "d"; element1.textContent = "e"; });
el.textContent 1x with requestAnimationFrame and function inside
requestAnimationFrame(function(){ //element1.textContent = "x"; //element1.textContent = "b"; element1.textContent = "c"; element1.textContent = "d"; });
el.textContent 3x with requestAnimationFrame and arrow function inside
requestAnimationFrame(()=>{ element1.textContent = "x"; element1.textContent = "b"; element1.textContent = "c"; element1.textContent = "d"; element1.textContent = "e"; });
el.textContent 1x with requestAnimationFrame and arrow function inside
requestAnimationFrame(()=>{ //element1.textContent = "x"; //element1.textContent = "b"; element1.textContent = "c"; element1.textContent = "d"; });
el.textContent 3x with requestAnimationFrame and function outside
requestAnimationFrame(xf);
el.textContent 1x with requestAnimationFrame and function outside
requestAnimationFrame(yf);
el.textContent 3x with requestAnimationFrame and arrow function outside
requestAnimationFrame(x);
el.textContent 1x with requestAnimationFrame and arrow function outside
requestAnimationFrame(y);

Run results for: 1x vs 3x el.textContent #7

el.textContent 3x

el.textContent 1x

el.textContent 3x with requestAnimationFrame and function inside

el.textContent 1x with requestAnimationFrame and function inside

el.textContent 3x with requestAnimationFrame and arrow function inside

el.textContent 1x with requestAnimationFrame and arrow function inside

el.textContent 3x with requestAnimationFrame and function outside

el.textContent 1x with requestAnimationFrame and function outside

el.textContent 3x with requestAnimationFrame and arrow function outside

el.textContent 1x with requestAnimationFrame and arrow function outside