1

I have a data entry input form with (invoice + details) that are added dinamically. For the product search I've created an input linked to a datalist with options. Whenever the user types, it filters a big array of products with JS and then replaces the contents of the linked datalist with the constructed options, so it's updates the suggestions (it's like jQuery autocomplete but all native). So far, so good.

Chrome Screenshot

Now, when I keep adding details to the invoice, the performance of the search operation starts to degrade.. (Version 59.0.3071.115 (Official Build) (64-bit) on MacOsX and Windows). I've started to profile stuff, and I nailed the problem to the line that sets up the innerHTML of the datalist:

  updateDatalist: (filter = '') =>
    options = @buildOptions(@filterWith(filter))
    console.time 'updateDatalist'
    @$datalist[0].innerHTML = options
    console.timeEnd 'updateDatalist'

The performance timer starts reporting ~30ms when there is only one detail, and then it scales to 500-700ms when there are 10 aprox. I've been profiling, guessing that there should be something wrong with my setup but nothing. Then I try it with Firefox and, wala, it works perfect always and performance never degrades.

enter image description here

Do you think it's a bug or I'm missing something? Should I report it and how?

EDIT: Here is a complete gist of the source: https://gist.github.com/vizcay/969f2b492630b12a520adb6e7433628e

pragmatic_programmer
  • 3,566
  • 3
  • 29
  • 36
  • "filters a big array of products with JS" <- there's your culprit. Although you might have found an actual Chrome performance issue, big amounts of data shouldn't be handled client-side. – maaw Jul 13 '17 at 14:17
  • @maaw it's not, I've profiled the stuff and the filtering (that happens at the filterWith function) runs pretty fast (less than 50ms).. the problem it's 100% related to setting up the innerHTML of the datalist tag, look where the console.time function is set. – pragmatic_programmer Jul 13 '17 at 14:20
  • I understand the bug and I'm not saying that you didn't encounter it. What I'm saying is that IMHO you should leave large data processing to server. Anyway this issue is probably related to this question: https://stackoverflow.com/questions/26254646/chrome-is-slow-when-there-are-a-lot-of-inputs Perhaps that can help. – maaw Jul 13 '17 at 16:45
  • 1
    I disagree with "big amounts of data shouldn't be handled client-side", as long as there's not a corresponding number of DOM elements. – Aaron Cicali Jul 13 '17 at 21:02

1 Answers1

5

Well I managed to find a workaround around this, and I want to leave it here for the poor soul that happens to meet the same problem again:

1) This has nothing to do with the filtering of the array data, as was confirmed by the profiling. But I've actually replaced the filtering function with a fixed string of options and the performance bug was still present.

2) The performance hit is proportional to: a) the number of options introduced into the datalist by innherHTML (or $.html etc) and b) the number of datalists in the page.

To solve this issue what I've done is to unlink the datalist to the input by means of removing it's id, then setting the innerHTML and finally linking again them by restoring the id. It looks like there is some kind of event handler related to Chrome UI that when the two are linked is doing something stupid.

pragmatic_programmer
  • 3,566
  • 3
  • 29
  • 36
  • 1
    Someone else (heck, maybe it was you!) describes a similar solution here: https://bignotelittlenote.com/483/howToStopDatalistsFreezingUpChrome – Royce Williams Jul 31 '21 at 14:21
  • 1
    @RoyceWilliams not me, he might have come across it himself or might have found here the fix as is 3 years later. I've forgotten about this little one, I was hitting my head against the wall like crazy I remember.. – pragmatic_programmer Jul 31 '21 at 20:12
  • Thanks for advice. At first inside foreach appended option value to datalist without any id. And then set id like `$("#input_form_container").find("datalist").attr('id', 'json_datalist');` And all works fast. But if in html hardcoded datalist id, then too slow. And this problem faced in Chrome. In FF all works fast. Interesting why such behaviour in Chrome. – Andris Aug 26 '21 at 16:18