For vs For in with populating selects (v3)

Revision 3 of this benchmark created by Igor Santos on

Description

A select with 50 cities will be repopulated with other 50 cities through different approaches.

Preparation HTML

<select id="cities">
    <option>---</option>
    <option>New York</option><option>Chicago</option><option>Halifax</option><option>Rio de Janeiro</option><option>Lisbon</option><option>New York</option><option>Chicago</option><option>Halifax</option><option>Rio de Janeiro</option><option>Lisbon</option><option>New York</option><option>Chicago</option><option>Halifax</option><option>Rio de Janeiro</option><option>Lisbon</option><option>New York</option><option>Chicago</option><option>Halifax</option><option>Rio de Janeiro</option><option>Lisbon</option><option>New York</option><option>Chicago</option><option>Halifax</option><option>Rio de Janeiro</option><option>Lisbon</option><option>New York</option><option>Chicago</option><option>Halifax</option><option>Rio de Janeiro</option><option>Lisbon</option><option>New York</option><option>Chicago</option><option>Halifax</option><option>Rio de Janeiro</option><option>Lisbon</option><option>New York</option><option>Chicago</option><option>Halifax</option><option>Rio de Janeiro</option><option>Lisbon</option><option>New York</option><option>Chicago</option><option>Halifax</option><option>Rio de Janeiro</option><option>Lisbon</option><option>New York</option><option>Chicago</option><option>Halifax</option><option>Rio de Janeiro</option><option>Lisbon</option>
</select>

<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>

Setup

var option,
        citiesSelect = $('#cities'),
        cities = ['Petropolis', 'San Francisco', 'Calgary', 'Madrid', 'Berlin', 'Petropolis', 'San Francisco', 'Calgary', 'Madrid', 'Berlin', 'Petropolis', 'San Francisco', 'Calgary', 'Madrid', 'Berlin', 'Petropolis', 'San Francisco', 'Calgary', 'Madrid', 'Berlin', 'Petropolis', 'San Francisco', 'Calgary', 'Madrid', 'Berlin', 'Petropolis', 'San Francisco', 'Calgary', 'Madrid', 'Berlin', 'Petropolis', 'San Francisco', 'Calgary', 'Madrid', 'Berlin', 'Petropolis', 'San Francisco', 'Calgary', 'Madrid', 'Berlin', 'Petropolis', 'San Francisco', 'Calgary', 'Madrid', 'Berlin', 'Petropolis', 'San Francisco', 'Calgary', 'Madrid', 'Berlin'];
    //would come from an external array of AJAX
    
    cities.unshift('---'); // including a blank option

Test runner

Ready to run.

Testing in
TestOps/sec
find/each/remove + for..in
citiesSelect.find('option').each(function() {
    $(this).remove();
});

for (i in cities) {
    option = document.createElement('option');
    option.value = i;
    option.innerText = cities[i];
    citiesSelect.append(option);
}
ready
empty + for
citiesSelect.empty();

for (var i = 0;i < cities.length; i++){
    option = document.createElement('option');
    option.value = i;
    option.innerText = cities[i];
    citiesSelect.append(option);
}
ready
DOM objects + $.each
citiesSelect[0].options.length = 0; // clear existing options

// populate with new options:
$(cities).each(function(i, v) {
  citiesSelect.append(new Option(v, i));
});
ready
DOM objects + for
citiesSelect[0].options.length = 0; // clear existing options

// populate with new options:
for (var i = 0; i < cities.length; i++) {
  citiesSelect.append(new Option(cities[i], i));
}
ready
DOM clear + fragments
var frag = document.createDocumentFragment();

citiesSelect[0].options.length = 0; // clear existing options

for (var i = 0; i < cities.length; i++){
    option = document.createElement('option');
    option.value = i;
    option.innerText = cities[i];
    frag.appendChild(option);
}

citiesSelect.append(frag);
ready
DOM objects + fragments
var frag = document.createDocumentFragment();

citiesSelect[0].options.length = 0; // clear existing options

for (var i = 0; i < cities.length; i++){
    frag.appendChild(new Option(cities[i], i));
}

citiesSelect.append(frag);
ready

Revisions

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