DOM vs innerHTML based Templating

JavaScript performance comparison

Revision 521 of this test case created by

Preparation code

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js">
</script>
<script src="http://beebole.com/pure/wp-content/themes/BeeBole-pure/libs/pure.js">
</script>
<script src="http://documentcloud.github.com/underscore/underscore.js">
</script>
<script src="http://mustache.github.com/extras/mustache.js">
</script>
<div id="target">
</div>
<script>
  window.underscoreTemplate = _.template("<div><h1 class='header'><%= data.header %></h1><div class='a'><%= data.a %></div><div class='b'><%= data.b %><div class='c'><%= data.c %><div class='d'><%= data.d %><div class='e'><%= data.e %><div class='f'><%= data.f %></div></div></div></div></div></div>", null, {
    variable: 'data'
  });

  var mustacheTemplate = "<div><h1 class='header'>{{header}}</h1><div class='a'>{{a}}</div><div class='b'>{{b}}<div class='c'>{{c}}<div class='d'>{{d}}<div class='e'>{{e}}<div class='f'>{{f}}</div></div></div></div></div></div>";

  var pureJsTemplate = "<div class='purejs_template'><h1 class='header'></h1><div class='a'></div><div class='b'><div class='c'><div class='d'><div class='e'><div class='f'></div></div></div></div></div></div>";

  var sharedVariables = {
    header: "Header",
    a: 'aaa',
    b: 'bbb',
    c: 'ccc',
    d: 'ddd',
    e: 'eee',
    f: 'fff'
  };

  var target = document.getElementById("target");
</script>
    

Preparation code output

<div id="target"> </div>

Test runner

Warning! For accurate results, please disable Firebug before running the tests. (Why?)

Java applet disabled.

Testing in CCBot 2.0.0 / Other 0.0.0
Test Ops/sec
Mustache.js Template
target.innerHTML = Mustache.to_html(mustacheTemplate, sharedVariables);
pending…
Underscore.js Template
target.innerHTML = underscoreTemplate(sharedVariables);
pending…
DOM Manipulation
var template = document.createElement('div');
var header = document.createElement('h1');
header.className = 'header';
header.textContent = sharedVariables.header;
var a = document.createElement('div');
a.className = 'a';
a.textContent = sharedVariables.a;
var b = document.createElement('div');
b.className = 'b';
b.textContent = sharedVariables.b;
var c = document.createElement('div');
c.className = 'c';
c.textContent = sharedVariables.c;
var d = document.createElement('div');
d.className = 'd';
d.textContent = sharedVariables.d;
var e = document.createElement('div');
e.className = 'e';
e.textContent = sharedVariables.e;
var f = document.createElement('div');
f.className = 'f';
f.textContent = sharedVariables.f;

template.appendChild(header);
template.appendChild(a);
a.appendChild(b);
b.appendChild(c);
c.appendChild(d);
d.appendChild(e);
e.appendChild(f);

while (target.firstChild) {
  target.removeChild(target.firstChild);
}

target.appendChild(template);
pending…
innerHTML String Manipulation
var htmlCode = '<div><h1 class="header">' + sharedVariables.header + '</h1><div class="a">' + sharedVariables.a + '<div class="b">' + sharedVariables.b + '<div class="c">' + sharedVariables.c + '<div class="d">' + sharedVariables.d + '<div class="e">' + sharedVariables.e + '<div class="f">' + sharedVariables.f + '</div></div></div></div></div></div></div>';
target.innerHTML = htmlCode;
pending…

Compare results of other browsers

Revisions

You can edit these tests or add even more tests to this page by appending /edit to the URL.

2 Comments

Eamon Nerbonne commented :

Please don't edit this version, edit version 878 (or newer) instead - that includes rudimentary output checking so that broken implementations don't distort the results.

aikesi1510 commented :

kyrie 4

hermes bag

golden goose

off white jordan 1

nike epic react flyknit

yeezy boost

christian louboutin shoes

yeezy shoes

tom ford sunglasses

hermes birkin

moncler sale

kevin durant shoes

christian louboutin

nike air zoom structure 19

adidas nmd

adidas store

adidas stan smith uk

curry 5

michael kors outlet

red bottom shoes for women

yeezy boost 350

paul george shoes

adidas stan smith

hermes

ray ban sunglasses

adidas ultra boost

100% real jordans for cheap

hermes belts

ray ban sunglasses

chrome hearts

outlet golden goose

yeezy boost

d rose shoes

michael kors

yeezy boost 350

adidas eqt support adv

oakley sunglasses

kobe 11

oakleys sunglasses

adidas eqt

supreme clothing

nike polo

michael kors outlet

yeezys

golden goose outlet

longchamp handbags

longchamp

nfl jerseys

calvin klein outlet

kobe 9

ray ban outlet

yeezy boost 350 v2

nike outlet store

nike air max shoes

nike air force 1 low

nike dunk low

kobe shoes

ray ban store

nfl store

caterpillar shoes

air jordan

adidas yeezy

huarache shoes

moncler jackets

russell westbrook shoes

balenciaga speed

michael kors outlet store

longchamp

yeezy shoes

off white hoodie

goyard handbags

adidas tubular

adidas ultra boost 3.0

fitflops sale

nike air max 2017

hyperdunks

nike hyperdunk 2017

hermes belt

tom ford glasses

ray ban sunglasses

yeezy

kobe sneakers

off white nike

vibram fivefingers

mens basketball shoes

links of london sale

asics shoes

adidas pure boost

james harden shoes

ultra boost 3.0

nike air max

cheap mlb jerseys

golden goose sneakers

vans outlet

oakley sale

goyard wallet

nmd

fitflops sale clearance

air max 90

adidas nmd

michael kors handbags

adidas yeezy boost

asics sneakers

adidas nmd

mlb jerseys

hogan outlet online

ray ban sunglasses

kobe basketball shoes

kd shoes

salvatore ferragamo belt

lebron soldier 11

air max 2018

balenciaga sneakers

hermes belt

cheap oakley sunglasses

cheap jordans

nike lebron 15

links of london

pandora jewelry

moncler jackets

prada eyeglasses

fila outlet

nike air presto

westbrook shoes

ray ban sunglasses

lebron shoes

nike cortez women

adidas shoes

off white hoodie

nike huarache

custom baseball jerseys

vans shoes

michael kors outlet

caterpillar boots

michael kors outlet online

yeezy shoes

adidas eqt support adv

iniki

bape hoodie

hermes handbags

supreme hoodie

ferragamo belt

curry 5

nike air max

nike air force 1

adidas gazelle

pandora charms

goyard handbags

yeezy boost 350

nike react

air max 270

pandora charms

nike hyperdunk

real jordans for sale cheap

nike flyknit

golden goose

jordan shoes

adidas yeezy

pandora bracelet

moncler

yeezy shoes

moncler

michael kors outlet store

yeezy 700

yeezy 500

air jordan 12

yeezy 500

adidas tubular

nike air max

off white jordan 1

nike epic react flyknit

nike huarache

links of london

adidas yeezy

gucci belt

converse shoes

damian lillard shoes

vans store

yeezys

chrome hearts outlet

yeezy boost 350

nike air vapormax

vans shoes

golden goose

michael kors outlet

adidas tubular x

cheap jordans

michael kors purses

yeezy boost 350

gucci belts

adidas superstar UK

nike huarache

balenciaga

air jordan 6

air max

paul george shoes

yeezy

air max

pure boost

kobe basketball shoes

nike air max 90

yeezy sneakers

yeezy shoes

nike shoes for women

air force ones

russell westbrook shoes

tom ford glasses

yeezy 500 blush

off white jordan 1

nike zoom

fila

michael kors

nike air max 270

michael kors outlet online

tory burch shoes

adidas stan smith

nike roshe one

nike prestos

michael kors handbags sale

balenciaga shoes

golden goose francy

huaraches

nike lebron 11

birkin bag

calvin klein underwear

hermes belt

pureboost

adidas nmd

jordan retro

michael kors sale

nike shox outlet

kyrie irving shoes

ferragamo sale

michael kors factory outlet

golden goose slide

kate spade handbags

nfl jerseys

nike react flyknit

longchamp

true religion jeans

nike shoes

michael kors outlet handbags

michael kors outlet

bape clothing

yeezy wave runner 700

kobe shoes

lacoste online shop

jordan retro 13

goyard handbags

yeezy shoes

michael kors

adidas iniki runner

kobe 11

air max 90

cheap jordan shoes

fila shoes

michael kors handbags

fila online shop

ray ban

nmd

nike air force

off white clothing

longchamp

nike shoes for men

yeezy boost 350 v2

cheap oakley sunglasses

yeezy

air jordan 11

adidas eqt

chrome hearts online

michael kors handbags

nike air max 2018

derrick rose shoes

nike air max 90

jordan 1 off white

adidas nmd r1

golden goose sneakers

jordan 13

nike basketball shoes

yeezy boost 350 v2

reebok outlet

ray ban aviator sunglasses

timberland shoes

true religion outlet

lebron 15

michael kors

nike outlet store online shopping

ferragamo belt

yeezy boost 350 v2

yeezy boost 350 v2

dior sunglasses

michael kors outlet

goyard tote

curry shoes

kyrie 4

golden goose

yeezy shoes

timberland outlet

nike shox

nba jerseys

kate spade outlet

nike shox for women

hermes birkin

yeezy

nike mercurial vapor

longchamp longchamps

balenciaga sneakers

golden goose superstar

yeezy

air max 2017

nike huarache

adidas ultra boost

hermes belts

ray ban

adidas stan smith men

golden goose sale

lebron 13

cheap nhl jerseys

cheap nfl jerseys china

golden goose mid star

jordan retro

yeezy boost

zx flux

off-white

adidas yeezy

michael kors handbags

nike x off white

lebron soldier 10

longchamp bags

converse shoes

pg 1

lebron 14

nike react

tom ford sunglasses

kd 10

balenciaga

balenciaga sneakers

pandora bracelet

nike cortez

off white

true religion

adidas stan smith women

lacoste outlet

oakley

jordan 12

off white shoes

jordan 4

kobe 9

nike hyperdunk

ray ban

moncler outlet

crazy explosive

jordan shoes

longchamp bags

ray ban sunglasses outlet

golden goose

nike air zoom

nike free run

kyrie 3

kobe byrant shoes

jordan 11

moncler outlet

adidas yeezy boost

supreme clothing

michael kors factory outlet

cheap nba jerseys

fenty puma

ysl handbags

prada sunglasses

yeezy boost

nike air force

longchamp handbags

moncler jackets

chrome hearts

goyard bags

kobe byrant shoes

puma fenty

golden goose starter

hermes outlet online

foamposites

adidas outlet

nike air force 1 high

oakley sunglasses

golden goose shoes

hermes birkin

michael kors outlet

hermes handbags

nike flyknit racer

nhl jerseys

lebron 15

nike sneakers

adidas iniki

jordan 6

nike roshe

yeezy boost 350

louboutin shoes

nike dunks

yeezy boost 350 v2

curry 4

goyard

asics gel kayano

pandora jewelry

chrome hearts outlet

adidas ultra boost 3.0

lebron james shoes

irving shoes

ultra boost

basketball shoes

kayno

off-white

adidas gazelle sale

adidas yeezy

lacoste polo

air max 270

yeezy

nike mercurial

converse outlet

nmd r1

nike air zoom pegasus 32

cheap nfl jerseys

nike air force 1

huarache shoes

hogan outlet

adidas nmd

longchamp bags

nike running shoes

jordan retro

yeezy boost 350

kevin durant shoes

stephen curry shoes

michael kors outlet

adidas ultra boost

louboutin shoes

lebron 15 shoes

converse outlet store

nike off white

cheap ray bans

retro jordans

christian louboutin shoes

jordan shoes

fila shoes

adidas flux

golden goose sneakers

longchamp handbags

vapormax

harden shoes

basketball shoes

adidas superstar

golden goose

nike flyknit trainer

moncler jackets

oakleys sunglasses

adidas superstar

john wall shoes

red bottom shoes

nike flyknit

bape hoodie

golden goose sneakers

birkin bag

curry 4

moncler

adidas yeezy

air jordans

michael kors outlet online