Run results for: document.createElement : direct assign vs Object.assign vs setAttribute

Run details:

User agent: Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/139.0.0.0 Safari/537.36

Browser: Chrome 139

Operating system: Linux

Device Platform: Desktop

Date tested: one year ago

document.createElement direct assign

5.3M/s

using setAttribute with document.createElement

3.0M/s

using Object.assign with document.createElement

3.0M/s

View exact numbers

Test name	Executions per second
✓ document.createElement direct assign	5,340,048 Ops/sec
using setAttribute with document.createElement	3,003,186 Ops/sec
using Object.assign with document.createElement	2,961,809 Ops/sec

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);