Benchmark: document.createElement : direct assign vs Object.assign vs setAttribute

HTML Preparation code:

<!--your preparation HTML code goes here-->

Script Preparation code:

/*your preparation JavaScript code goes here
To execute async code during the script preparation, wrap it as function globalMeasureThatScriptPrepareFunction, example:*/
async function globalMeasureThatScriptPrepareFunction() {
    // This function is optional, feel free to remove it.
    // await someThing();
}

Tests:

document.createElement direct assign
var div = document.createElement('div'); div.class = 'sample-class'; div.hidden = true;
using Object.assign with document.createElement
Object.assign(document.createElement('div'), { id: 'sample-class', hidden: true });
using setAttribute with document.createElement
var div = document.createElement('div'); div.setAttribute('class', 'sample-class'); div.setAttribute('hidden', true);

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
document.createElement direct assign
using Object.assign with document.createElement
using setAttribute with document.createElement

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: 11 months ago)

User agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:142.0) Gecko/20100101 Firefox/142.0

Browser/OS: Firefox 142 on Windows

View result in a separate tab

using setAttribute with document.createElement

576K/s

using Object.assign with document.createElement

511K/s

document.createElement direct assign

503K/s

View exact numbers

Test name	Executions per second
✓ using setAttribute with document.createElement	576,430 Ops/sec
using Object.assign with document.createElement	510,931 Ops/sec
document.createElement direct assign	502,646 Ops/sec

document.createElement : direct assign vs Object.assign vs setAttribute (version: 2)

Comparing performance of: `document.createElement direct assign vs using Object.assign with document.createElement vs using setAttribute with document.createElement`

Created: one year ago by: Registered User

Go to the latest result

document.createElement direct assign

using Object.assign with document.createElement

using setAttribute with document.createElement

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

document.createElement : direct assign vs Object.assign vs setAttribute (version: 2)

Comparing performance of: document.createElement direct assign vs using Object.assign with document.createElement vs using setAttribute with document.createElement

Created: one year ago by: Registered User

Go to the latest result

document.createElement direct assign

using Object.assign with document.createElement

using setAttribute with document.createElement

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

Related benchmarks

Comparing performance of: `document.createElement direct assign vs using Object.assign with document.createElement vs using setAttribute with document.createElement`