Efficiently populate Select Elements in 2019

Question

I had to dynamically populate an HTML select element via the DOM and Javascript.

I did a little research and I got things working with no problem, but I had some further questions.

I found 2 stackoveflow posts and another non-stack blog post concerning how to populate Select Elements:

• JavaScript - populate drop down list with array
• innerHTML replace does not reflect
• https://allofetechnical.wordpress.com/2010/05/28/using-innerhtml-to-update-a-select-differences-between-ie-and-ff/

All 3 articles are anywhere from 8 - 10 years old. They seem to favor a certain technique discussed below due to older browsers NOT being able to use 'innerHTML' DOM property.

All 3 of these articles instruct to populate Select Elements via the DOM using: document.createElement("option").

A number of people have tried to use the 'Element.innerHTML' DOM property to populate Select Elements with a STRING of options rather than using document.createElement("option").

Apparently, these people are then instructed to use document.createElement("option") rather than 'innerHTML' beacause 'innerHTML' has some known issues in older browsers such as Internet Explorer.

Normally, I would not look into this any further and just go with document.createElement("option") but I have 2 concerns:

1. I am populating 2 Select Elements with 190 Options each (380 total) and each option represents an ISO Language Code.

   So through each iteration of Array.prototype.forEach() the Javscript application is creating an object for each and every ISO language code. That's 380 objects total in memory.

   Isn't document.createElement("option") inefficient when compared to just building a very large String of options and inserting via 'innerHTML?'

2. I have tested the 'innerHTML' way in the latest Chrome and Firefox browsers and it works fine.

   I have no intention of supporting older browsers such as Internet Explorer so is 'innerHTML' a viable option in my case?

I would really like to use 'innerHTML' as the code is so much more readable (and saves memory?):

Array.prototype.map().toString gives me the full String of options.

Any thoughts on this matter would be greatly appreciated.

Answer 1

As @Tibrogargan rightly notes, before trying to optimize you should test on the slowest device you want to support. On a laptop 10,000 options are processed in 15 ms, and if you care about very resource constrained devices, you arguably ought to serve this as part of the HTML page instead of running JS...

Comparing building up the DOM vs creating a string to set innerHTML, I think the DOM way is not any worse and possibly better than innerHTML in:

• The amount objects created: document.createElement("option") (or new Option()) creates DOM nodes, which are also created when you set innerHTML! You might argue this also creates unnecessary JavaScript wrappers/representations of the DOM objects, but with innerHTML you're creating lots of temporary strings, and it's not clear which is worse.
• Readability: using new Option(label, value) is arguably more clear than concatenating the HTML string ("<option value='" + value + "'>" + ...), though if you use template literals I'd say the two methods are on par with each other.
• Benchmarking is notoriously hard to do correctly, but since people like to post jsperf links, here's one showing new Option() being faster in Firefox (and having the same performance in Chrome). I won't claim it's correct (have my doubts about the GC, in particular), but neither are the other benchmarks claiming that innerHTML is faster.

But with a real testcase I dare you find a device that shows any measurable difference:

const labels = [...Array(1000).keys()].map((i) => Math.sin(i+1).toString(36).substring(2)); // random looking strings
const div = document.getElementById("container");


function timeIt(fn) {
    let start = performance.now();

    fn();

    let elapsedMS = performance.now() - start
    div.innerHTML = "";
    return elapsedMS;
}

function createUsingDOM() {
    let select = document.createElement("select");
    for (let i = 0, len = labels.length; i < len; i++) {
        select.appendChild(new Option(labels[i], i));
    }
    div.appendChild(select);
}

function createUsingInnerHTML() {
    let options = [];
    for (let i = 0, len = labels.length; i < len; i++) {
       options.push("<option value='" + i + "'>" + labels[i] + "</option>");
    }
    div.innerHTML = "<select>" + options.join("") + "</select>";
}

//createUsingDOM()
// createUsingInnerHTML();
alert(`DOM: ${timeIt(createUsingDOM)}ms, innerHTML: ${timeIt(createUsingInnerHTML)}ms`)

<div id="container"></div>