Toggle navigation
MeasureThat
.net
Create a benchmark
Tools
Feedback
Feature Requests
FAQ
Register
Log In
Run results for:
Build article from template vs from code
Comparing speed of cloned template and updated elements vs rebuilding whole content from scratch
Go to the benchmark
Embed
Embed Benchmark Result
<iframe src="https://measurethat.net/Embed?id=585111" width="100%" height="500px"></iframe>
Run details:
User agent:
Mozilla/5.0 (Linux; Android 10; K) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/132.0.0.0 Mobile Safari/537.36
Browser:
Chrome Mobile 132
Operating system:
Android
Device Platform:
Mobile
Date tested:
one year ago
Benchmark engine:
Benchmark.js
From template
49/s
From code
25/s
View exact numbers
Test name
Executions per second
✓
From template
49 Ops/sec
From code
25 Ops/sec
HTML Preparation code:
<template id="real-template"> <article class="article"> <header class="article-header"> <h1 class="article-header_title">${title}</h1> <i class="article-header_created"> Created by: <b class="article-header_author">${author}</b> </i> </header> <p class="article-text">${text}</p> <header class="article-header"> <h1 class="article-header_title">${title}</h1> <i class="article-header_created"> Created by: <b class="article-header_author">${author}</b> </i> </header> <p class="article-text">${text}</p> <header class="article-header"> <h1 class="article-header_title">${title}</h1> <i class="article-header_created"> Created by: <b class="article-header_author">${author}</b> </i> </header> <p class="article-text">${text}</p> <header class="article-header"> <h1 class="article-header_title">${title}</h1> <i class="article-header_created"> Created by: <b class="article-header_author">${author}</b> </i> </header> <p class="article-text">${text}</p> <header class="article-header"> <h1 class="article-header_title">${title}</h1> <i class="article-header_created"> Created by: <b class="article-header_author">${author}</b> </i> </header> <p class="article-text">${text}</p> <header class="article-header"> <h1 class="article-header_title">${title}</h1> <i class="article-header_created"> Created by: <b class="article-header_author">${author}</b> </i> </header> <p class="article-text">${text}</p> <header class="article-header"> <h1 class="article-header_title">${title}</h1> <i class="article-header_created"> Created by: <b class="article-header_author">${author}</b> </i> </header> <p class="article-text">${text}</p> <header class="article-header"> <h1 class="article-header_title">${title}</h1> <i class="article-header_created"> Created by: <b class="article-header_author">${author}</b> </i> </header> <p class="article-text">${text}</p> <header class="article-header"> <h1 class="article-header_title">${title}</h1> <i class="article-header_created"> Created by: <b class="article-header_author">${author}</b> </i> </header> <p class="article-text">${text}</p> <header class="article-header"> <h1 class="article-header_title">${title}</h1> <i class="article-header_created"> Created by: <b class="article-header_author">${author}</b> </i> </header> <p class="article-text">${text}</p> </article> </template>
Script Preparation code:
window.articles = [ { title: 'Lorem ipsum dolor sit amet', author: 'John Doe', text: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit.\nIllum, impedit voluptatem? Ratione.' }, { title: 'Consectetur adipisicing', author: 'John Dox', text: 'Lorem ipsum dolor sit amet,\nconsectetur adipisicing elit.\nIllum, impedit voluptatem?' }, { title: 'Impedit voluptatem', author: 'Johan Doch', text: 'Impedit voluptatem? Lorem ipsum dolor sit amet,\nconsectetur adipisicing elit.' } ]; const keys = ['title', 'author', 'text']; const classes = [ '.article-header_' + keys[0], '.article-header_' + keys[1], '.article-' + keys[2] ]; // get template, clone it, replace textContent of nodes const realTemplate = document.getElementById('real-template'); window.fromTemplate = (vars) => { const node = realTemplate.content.firstElementChild.cloneNode(true); const nodes = node.querySelectorAll('' + classes); for (let i = 0; keys[i]; i++) { nodes[i].textContent = vars[keys[i]]; } return node; } const cache = {}; function el(tag, props, children) { const el = cache[tag] ? cache[tag].cloneNode() : cache[tag] = document.createElement(tag); Object.assign(el, props); el.append(...(children || [])); return el; } // rebuild whole element from scratch window.articleBuilder = (vars) => ( el('article', {className: 'article'}, [ el('header', {className: 'article-header'}, [ el('h1', {className: 'article-header_title'}, [ vars.title ]), el('i', {className: 'article-header_created'}, [ 'Created by: ', el('b', {className: 'article-header_author'}, [ vars.author ]) ]) ]), el('p', {className: 'article-text'}, [ vars.text ]), el('header', {className: 'article-header'}, [ el('h1', {className: 'article-header_title'}, [ vars.title ]), el('i', {className: 'article-header_created'}, [ 'Created by: ', el('b', {className: 'article-header_author'}, [ vars.author ]) ]) ]), el('p', {className: 'article-text'}, [ vars.text ]), el('header', {className: 'article-header'}, [ el('h1', {className: 'article-header_title'}, [ vars.title ]), el('i', {className: 'article-header_created'}, [ 'Created by: ', el('b', {className: 'article-header_author'}, [ vars.author ]) ]) ]), el('p', {className: 'article-text'}, [ vars.text ]), el('header', {className: 'article-header'}, [ el('h1', {className: 'article-header_title'}, [ vars.title ]), el('i', {className: 'article-header_created'}, [ 'Created by: ', el('b', {className: 'article-header_author'}, [ vars.author ]) ]) ]), el('p', {className: 'article-text'}, [ vars.text ]), el('header', {className: 'article-header'}, [ el('h1', {className: 'article-header_title'}, [ vars.title ]), el('i', {className: 'article-header_created'}, [ 'Created by: ', el('b', {className: 'article-header_author'}, [ vars.author ]) ]) ]), el('p', {className: 'article-text'}, [ vars.text ]), el('header', {className: 'article-header'}, [ el('h1', {className: 'article-header_title'}, [ vars.title ]), el('i', {className: 'article-header_created'}, [ 'Created by: ', el('b', {className: 'article-header_author'}, [ vars.author ]) ]) ]), el('p', {className: 'article-text'}, [ vars.text ]), el('header', {className: 'article-header'}, [ el('h1', {className: 'article-header_title'}, [ vars.title ]), el('i', {className: 'article-header_created'}, [ 'Created by: ', el('b', {className: 'article-header_author'}, [ vars.author ]) ]) ]), el('p', {className: 'article-text'}, [ vars.text ]), el('header', {className: 'article-header'}, [ el('h1', {className: 'article-header_title'}, [ vars.title ]), el('i', {className: 'article-header_created'}, [ 'Created by: ', el('b', {className: 'article-header_author'}, [ vars.author ]) ]) ]), el('p', {className: 'article-text'}, [ vars.text ]), el('header', {className: 'article-header'}, [ el('h1', {className: 'article-header_title'}, [ vars.title ]), el('i', {className: 'article-header_created'}, [ 'Created by: ', el('b', {className: 'article-header_author'}, [ vars.author ]) ]) ]), el('p', {className: 'article-text'}, [ vars.text ]), el('header', {className: 'article-header'}, [ el('h1', {className: 'article-header_title'}, [ vars.title ]), el('i', {className: 'article-header_created'}, [ 'Created by: ', el('b', {className: 'article-header_author'}, [ vars.author ]) ]) ]), el('p', {className: 'article-text'}, [ vars.text ]), ]) );
Tests:
From template
let i = 1000; while (i--) { if (i % 3 === 0) { fromTemplate(articles[2]); continue; } if (i % 2 === 0) { fromTemplate(articles[1]); continue; } fromTemplate(articles[0]); }
From code
let i = 1000; while (i--) { if (i % 3 === 0) { articleBuilder(articles[2]); continue; } if (i % 2 === 0) { articleBuilder(articles[1]); continue; } articleBuilder(articles[0]); }