这是与输入+数据列表相关的Chrome UI性能错误吗? [英] Is this a Chrome UI performance bug related to input + datalist?

问题描述

我有一个数据输入输入表单，带有(发票+详细信息)被动态添加.对于产品搜索，我创建了一个链接到带有选项的数据列表的输入.每当用户键入内容时，它都会使用JS过滤大量产品，然后用构造的选项替换链接数据列表的内容，因此它会更新建议(就像jQuery自动完成功能一样，但全部是本机的).到目前为止，一切都很好.

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.

现在，当我继续向发票添加详细信息时，搜索操作的性能开始下降.(在MacOsX和Windows上，版本59.0.3071.115(正式版本)(64位)).我已经开始分析资料，并将问题钉在设置数据列表的innerHTML的那一行上:

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'

只有一个详细信息时，性能计时器开始报告〜30ms，然后在有10个aprox时将其缩放为500-700ms.我一直在分析，猜测我的设置应该有问题，但没有任何问题.然后，我在Firefox上进行尝试，而且，它始终可以完美运行，并且性能永远不会降低.

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.

您认为这是错误还是我错过了什么?我应该报告它以及如何报告吗?

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

这是源的完整摘要: https://gist.github.com/vizcay/969f2b492630b12a520adb6e7433628e

推荐答案

好吧，我设法找到了一种解决方法，我想把它留在这里，供可怜的灵魂碰巧再次遇到相同的问题:

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)这与阵列数据的过滤无关，正如分析所证实的那样.但是我实际上已经用固定的选项字符串替换了过滤功能，并且仍然存在性能错误.

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)性能影响与以下因素成正比:a)innherHTML(或$ .html等)引入数据列表的选项数量，以及b)页面中数据列表的数量.

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.

要解决此问题，我要做的是通过删除数据列表的ID取消数据列表与输入的链接，然后设置innerHTML，最后通过恢复ID重新链接它们.看起来好像有一种与Chrome UI相关的事件处理程序，当两者链接在一起时，它会做一些愚蠢的事情.

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.

这篇关于这是与输入+数据列表相关的Chrome UI性能错误吗?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！