这是与输入+ datalist相关的Chrome UI性能错误吗？

Question

我有一个带有（发票+详细信息）的数据输入表格，这些表格会以动态方式添加。对于产品搜索，我创建了一个链接到带有选项的数据列表的输入。每当用户输入时，它会使用JS过滤大量产品，然后使用构造的选项替换链接的datalist的内容，因此它会更新建议（就像jQuery自动完成但全部是原生的）。到目前为止，非常好。

现在，当我不断向发票添加详细信息时，搜索操作的性能开始下降..（MacOSX和Windows上的版本59.0.3071.115（官方构建）（64位））。我已经开始描述内容了，我把问题钉在设置datalist的innerHTML的行上：

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

当只有一个细节时，性能计时器开始报告〜30ms，然后当有10个aprox时它会扩展到500-700ms。我一直在分析，猜测我的设置应该有什么问题，但没有。然后我尝试用Firefox和wala，它总是很完美，性能永远不会降低。

你认为这是一个错误还是我错过了什么？我应该报告它以及如何报告？

编辑：以下是来源的完整要点：https://gist.github.com/vizcay/969f2b492630b12a520adb6e7433628e

Answer 1

好吧，我设法找到了解决这个问题的方法，我想把它留在这里，为那个碰巧遇到同样问题的可怜的灵魂留下来：

1）这与数组数据的过滤无关，正如分析所证实的那样。但我实际上用固定的选项字符串替换了过滤功能，性能错误仍然存​​在。

2）性能命中与以下因素成正比：a）通过innherHTML（或$ .html等）引入数据主义者的选项数量和b）页面中数据列表的数量。

要解决这个问题，我所做的就是通过删除它的id来取消数据列表与输入的链接，然后设置innerHTML，最后通过恢复id再次链接它们。看起来有一种与Chrome用户界面相关的事件处理程序，当这两者被链接时，它会做一些愚蠢的事情。