Run results for: Attribute Parser 2

Test name	Executions per second
✓ Piecemeal Parser	361 Ops/sec
Atomic Parser	338 Ops/sec

Script Preparation code:

const largeTemplate = `<div class="large" data-options="{&quot;smSlowUrl&quot;:&quot;https://kstatic.googleusercontent.com/files/35f440ff890c6189ae31c65dd8471dc64cc11c2b7e155980a1905b22e0d1efff89de049d0907d05f8967ec1e54dea7d7febe1327d70ac8f35bb8d17a059fcaf2&quot;,&quot;smFastUrl&quot;:&quot;https://kstatic.googleusercontent.com/files/c535a43e6fa85b3fd539a235907e8dd385aa19a62094ad815a1679aa34a0129bea2c4c570217e9ff11c884bffed237e2dd75954fd91be1a1bdd44e4ca4256999&quot;,&quot;lgSlowUrl&quot;:&quot;https://kstatic.googleusercontent.com/files/c146fa9200c5a4e4be6ea7d0586bc2c566d8c26d31523e778fee3b17adf078470e28924f107ff7a5cb6e83a67ce804b8dcdb23a54080b4445d5b03ae5d407c5a&quot;,&quot;lgFastUrl&quot;:&quot;https://kstatic.googleusercontent.com/files/f27e919a897b995d58ff3aa0717f09a756c09941362324208bde96c89c3f1fedb14bd70d7a3ea11f64b65b3409f78fa2b4c7b679f3d1c7f8f31576ef563f21a9&quot;,&quot;pauseLabel&quot;:&quot;Pause hero football video&quot;,&quot;playLabel&quot;:&quot;Play hero football video&quot;}">Large</div>`;
const smallTemplate = `<div class="small" 
data-a="[&quot;foo&quot;, &quot;bar&quot;, &quot;blah&quot]"
data-b="https://kstatic.googleusercontent.com/files/c535a43e6fa85b3fd539a235907e8dd385aa19a62094ad815a1679aa34a0129bea2c4c570217e9ff11c884bffed237e2dd75954fd91be1a1bdd44e4ca4256999" 
data-c="https://kstatic.googleusercontent.com/files/c146fa9200c5a4e4be6ea7d0586bc2c566d8c26d31523e778fee3b17adf078470e28924f107ff7a5cb6e83a67ce804b8dcdb23a54080b4445d5b03ae5d407c5a" 
data-d="https://kstatic.googleusercontent.com/files/f27e919a897b995d58ff3aa0717f09a756c09941362324208bde96c89c3f1fedb14bd70d7a3ea11f64b65b3409f78fa2b4c7b679f3d1c7f8f31576ef563f21a9" 
data-e="Pause hero football video" 
date-f="Play hero football video&">Small</div>`;

let i = 1000;
const root = document.querySelector('.main');
while (i--) {
    root.innerHTML += largeTemplate;
    root.innerHTML += smallTemplate;
}

Tests:

Atomic Parser
const largeNodes = Array.from(document.querySelectorAll('.large')); largeNodes.map((node) => { const options = node.getAttribute('data-options'); return JSON.parse(options); });
Piecemeal Parser
const smallNodes = Array.from(document.querySelectorAll('.small')); smallNodes.map((node) => { const data = node.dataset; const a = JSON.parse(data.a); const b = '' + data.b; const c = '' + data.c; const d = '' + data.d; const e = '' + data.e; const f = '' + data.f; return {a, b, c, d, e, f}; });

Run results for: Attribute Parser 2

1 large object-attribute v. smaller attributes

Atomic Parser

Piecemeal Parser