A benchmark of different methods to empty an HTML element


function empty(element) {
    if (element.innerHTML) {
        element.innerHTML = "";
    }
}

function empty1(element) {
    element.innerHTML = "";
}

function empty2(element) {
    while (element.firstChild) {
        element.removeChild(element.firstChild);
    }
}

function empty3(element) {
    var child = element.firstChild;
    while (child) {
        element.removeChild(child);
        child = element.firstChild;
    }
}

function empty4(element) {
    var children = element.childNodes;
    for (var i = 0; i < children.length; i++) {
        element.removeChild(children[i]);
    }
}

function empty5(element) {
    var children = element.getElementsByTagName("*");
    for (var i = 0; i < children.length; i++) {
        element.removeChild(children[i]);
    }
}

function empty6(element) {
    var children = element.children;
    for (var i = 0; i < children.length; i++) {
        element.removeChild(children[i]);
    }
}

function empty7(element) {
    while (element.firstChild) {
        element.removeChild(element.firstChild);
    }
    while (element.lastChild) {
        element.removeChild(element.lastChild);
    }
}

// Benchmark the functions

function benchmark(functionName) {
    var start = performance.now();
    for (var i = 0; i < 1000; i++) {
        var element = document.createElement("div");
        for (var k = 0; k < 1000; k++) {
            var child = document.createElement("div");
            element.appendChild(child);
        }
        functionName(element);
    }
    var end = performance.now();
    return end - start;
}


// console.log(benchmark("jQuery $(element).empty"));
console.log("empty", benchmark(empty));
console.log("empty1", benchmark(empty1));
console.log("empty2", benchmark(empty2));
console.log("empty3", benchmark(empty3));
console.log("empty4", benchmark(empty4));
console.log("empty5", benchmark(empty5));
console.log("empty6", benchmark(empty6));
console.log("empty7", benchmark(empty7));

A benchmark of different methods to empty an HTML element

Comments

More from this blog

How to upgrade MySQL to MariaDB in XAMPP in 5 minutes on Windows

GitHub Phantom Notifications (and How I Fixed It)

Redis: A Short Guide

My .gitignore for Node

Linux Users

Command Palette

Comments

More from this blog