Tips for populating a dictionary with a large datalist of around 2000 items

Question

Tips for populating a dictionary with a large datalist of around 2000 items

Currently, I'm facing an issue where the code I'm using takes about 10 seconds to run on Chrome and around 2 minutes on IE11, which is the primary browser it will be used with.

for (var key in dict) {
    if (dict.hasOwnProperty(key)) {
        combo.innerHTML += "<option value=\"" + dict[key] + "\">" + key + "</option>";
    }
}

I came across a tutorial at , recommending the use of ajax for dealing with larger datasets. However, the definition of 'large' is not clear - could it mean 100 items or 100,000 items?

var request = new XMLHttpRequest();

request.onreadystatechange = function(response) {
  if (request.readyState === 4) {
    if (request.status === 200) {

      var jsonOptions = JSON.parse(request.responseText);

      jsonOptions.forEach(function(item) {

        var option = document.createElement('option');
        option.value = item;
        dataList.appendChild(option);

      });

    } else {
      console.log("Failed to load datalist options");
    }
  }
};

request.open('GET', 'html-elements.json', true);
request.send();

I've been trying to adapt this approach for a dictionary by replacing request.responseText with

JSON.parse(JSON.stringify(dict));

. However, I'm encountering issues as the data is not stored in a file, making it difficult to make the request from the server. Any suggestions on how to proceed? And if a DataList isn't suitable for this purpose, what alternative would you recommend?

Appreciate any advice in advance.

javascript ajax dictionary html-datalist

Answer 1

Answer №1

To optimize performance, consider using a document fragment for faster DOM manipulation.

var fragment = document.createDocumentFragment();

for (var property in data) {
    if (data.hasOwnProperty(property)) {
        var element = document.createElement("DIV");
        element.textContent = property;
        element.value = data[property];
        fragment.appendChild(element);
    }
}

container.appendChild(fragment);

Answer 2

To optimize performance, consider using a document fragment for faster DOM manipulation.

var fragment = document.createDocumentFragment();

for (var property in data) {
    if (data.hasOwnProperty(property)) {
        var element = document.createElement("DIV");
        element.textContent = property;
        element.value = data[property];
        fragment.appendChild(element);
    }
}

container.appendChild(fragment);

Answer 3

Answer №2

If you want to improve performance, consider constructing the HTML string first and then setting it as innerHTML.

var htmlStr = '';
for (var key in dict) {
    if (dict.hasOwnProperty(key)) {
        htmlStr += "<option value=\"" + dict[key] + "\">" + key + "</option>";
    }
}
combo.innerHTML = htmlStr;

By following this method, you can see a significant difference in performance: http://jsperf.com/string-append-vs-dom

Answer 4

If you want to improve performance, consider constructing the HTML string first and then setting it as innerHTML.

var htmlStr = '';
for (var key in dict) {
    if (dict.hasOwnProperty(key)) {
        htmlStr += "<option value=\"" + dict[key] + "\">" + key + "</option>";
    }
}
combo.innerHTML = htmlStr;

By following this method, you can see a significant difference in performance: http://jsperf.com/string-append-vs-dom

Answer 5

Answer №3

The performance of the DOM is commonly criticized for being slow. To improve speed, consider manually filtering and displaying only a set number of initial elements. Additionally, utilizing document fragments, as suggested by znap026, can also contribute to enhancing efficiency.

"use strict";

var data = Object.getOwnPropertyNames(window).sort(),
  datalist = document.getElementById("datalist"),
  input = document.getElementById("input");
  
const processedData = Object.fromEntries(data.map(d => [d.toLowerCase(), d]));

function search() {
  var term = input.value.toLowerCase();
  var found = 0;
  var frag = document.createDocumentFragment();

  for (var child of [].slice.apply(datalist.childNodes)) {
    datalist.removeChild(child);
  }

  for (var searchable in processedData) {
    if (searchable.indexOf(term) === 0) {
      let item = processedData[searchable];
      let option = document.createElement("option");
      option.value = item

      frag.appendChild(option);
      if (++found > 10) break;
    }
  }

  datalist.appendChild(frag);
}

search();
input.addEventListener("input", search);

<input id="input" list="datalist" placeholder="window properties"/>
<datalist id="datalist"></datalist>

Answer 6

The performance of the DOM is commonly criticized for being slow. To improve speed, consider manually filtering and displaying only a set number of initial elements. Additionally, utilizing document fragments, as suggested by znap026, can also contribute to enhancing efficiency.

"use strict";

var data = Object.getOwnPropertyNames(window).sort(),
  datalist = document.getElementById("datalist"),
  input = document.getElementById("input");
  
const processedData = Object.fromEntries(data.map(d => [d.toLowerCase(), d]));

function search() {
  var term = input.value.toLowerCase();
  var found = 0;
  var frag = document.createDocumentFragment();

  for (var child of [].slice.apply(datalist.childNodes)) {
    datalist.removeChild(child);
  }

  for (var searchable in processedData) {
    if (searchable.indexOf(term) === 0) {
      let item = processedData[searchable];
      let option = document.createElement("option");
      option.value = item

      frag.appendChild(option);
      if (++found > 10) break;
    }
  }

  datalist.appendChild(frag);
}

search();
input.addEventListener("input", search);

<input id="input" list="datalist" placeholder="window properties"/>
<datalist id="datalist"></datalist>

Answer 7

Answer №4

To enhance performance, one technique is to disconnect the datalist from the input element and then reconnect it after filling it with data:

"use strict";

// initialize
const items = Object.getOwnPropertyNames(window);
const dataList = document.getElementById("datalist");
const options = items.map(key => new Option(key));

let startTime = performance.now();
dataList.replaceChildren(...options);
console.log('simple replace:', performance.now() - startTime);

// reset
dataList.replaceChildren(...[]);

startTime = performance.now();
dataList.setAttribute("id", undefined);
dataList.replaceChildren(...options);
dataList.setAttribute("id", "datalist");
console.log('replace with detach and attach:', performance.now() - startTime);

<input list="datalist" />
<datalist id="datalist"></datalist>

Answer 8

To enhance performance, one technique is to disconnect the datalist from the input element and then reconnect it after filling it with data:

"use strict";

// initialize
const items = Object.getOwnPropertyNames(window);
const dataList = document.getElementById("datalist");
const options = items.map(key => new Option(key));

let startTime = performance.now();
dataList.replaceChildren(...options);
console.log('simple replace:', performance.now() - startTime);

// reset
dataList.replaceChildren(...[]);

startTime = performance.now();
dataList.setAttribute("id", undefined);
dataList.replaceChildren(...options);
dataList.setAttribute("id", "datalist");
console.log('replace with detach and attach:', performance.now() - startTime);

<input list="datalist" />
<datalist id="datalist"></datalist>

Tips for populating a dictionary with a large datalist of around 2000 items

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

What is the best way to determine the total scrollable height of the browser's scroll bars?

Mastering the art of debugging a mongoose action in node.js

Having trouble converting a JSON array into a JavaScript array upon creation

Using React.js to establish a connection with a database

Creating a Cross Fade Animation effect with the combination of CSS and JavaScript

Android textView is populated with randomly generated alphanumeric text after parsing file

The shadow effects and color overlays do not seem to be functioning properly in Mozilla Firefox

Generating HTML using a filter

Transferring a JavaScript variable to C# to execute an SQL SELECT query, then sending the returned result back to JavaScript

Encounter an error parsing the package.json file. Confirmed that it is valid JSON

What is the optimal level of safety logic to incorporate into my proprietary components?

Error: The request was denied by the operating system. Issue encountered while attempting to build a new React application

What is preventing me from obtaining the select and input values?

In order to enhance user experience, I would like the tabs of the dropdown in the below example to be activated by

Is there a way to create animated CSS box-shadow depth using jQuery or CSS3 transitions?

Trigger a personalized URL while making an ajax call

Enhance your <head> section by adding lines when utilizing Layouts within Iron Router

Express.js session management -- Ensuring sessions are created exclusively for authenticated users

List of null variables

Are mutations in Vuex guaranteed to be atomic?