Which JavaScript Method Updates a div Fastest? Benchmark of 3 Approaches

The goal is to modify the content of a div using three different JavaScript approaches and compare their execution times.

Method 1: Direct innerHTML concatenation

var times = 10000;
console.time(1);
for (var i = 0; i < times; i++) {
    document.getElementById('myDiv1').innerHTML += 'a';
}
console.timeEnd(1);

Method 2: Build a string then assign once

var times = 10000;
var str = '';
console.time(2);
for (var i = 0; i < times; i++) {
    var tmp = document.getElementById('myDiv2').innerHTML;
    str += 'a';
}
document.getElementById('myDiv2').innerHTML = str;
console.timeEnd(2);

Method 3: Build a string in a temporary variable then assign

var times = 10000;
var _str = '';
console.time(3);
for (var i = 0; i < times; i++) {
    _str += 'a';
}
document.getElementById('myDiv3').innerHTML = _str;
console.timeEnd(3);

Results

Method 1: 318.88 ms

Method 2: 1.80 ms

Method 3: 0.97 ms

Method 1 is the worst because it modifies the DOM on every iteration, causing repeated re‑flows and repaints. Methods 2 and 3 modify the DOM only once, resulting in dramatically better performance; the slight difference between them comes from the extra node lookup in Method 2.

Basic principle

Minimize changes to DOM geometry (such as width or height) and overall DOM modifications, because each change forces the browser to recalculate layout and repaint, which is costly.