Chosen.js 性能答案

【问题标题】：Chosen.js PerformanceChosen.js 性能
【发布时间】：2013-09-30 08:24:15
【问题描述】：

我正在尝试将 selected.js 用于包含大约 1400 个条目的列表。运行所选的初始化代码大约需要 1.5 秒。

在SelectParser.prototype.add_option() 中找到了慢的部分是html: option.innerHTML

 this.parsed.push({
     array_index: this.parsed.length,
     options_index: this.options_index,
     value: option.value,
     text: option.text,
     html: option.innerHTML,  // <======= here
     selected: option.selected,
     disabled: group_disabled === true ? group_disabled : option.disabled,
     group_array_index: group_position,
     classes: option.className,
     style: option.style.cssText                  
    });

如果将其设置为简单的html: option.text，则所选插件似乎仍然可以按要求工作。

更改此内容以及任何其他提高性能的提示是否有其他影响？

【问题讨论】：

在哪个浏览器中需要 1.5 秒？ 1400 个条目确实是大量的数据/html，并且会显着减慢所选的初始化速度。您应该考虑 ajax 解决方案（结合自动完成），查看此链接了解详情：stackoverflow.com/questions/12044330/…。前段时间我遇到过类似的性能问题，我的一般结论是：JS DOM 操作在许多浏览器中非常慢，避免它的最好方法是分割数据以及它与前端的交互。

标签： javascript jquery-chosen

【解决方案1】：

虽然 HTML 序列化通常是一个缓慢的操作，但令我惊讶的是，它被认为会导致超过一秒的延迟。我运行的一项快速测试表明，在 Firefox 33 和 Chrome 38 中，在 5000 个选项上执行 option.innerHTML 只需不到 2 毫秒，其他浏览器的行为应该类似。所以我怀疑您错误地确定了问题的根源。

无论哪种方式，您的更改都有两个含义：

选项的任何格式都将丢失，choice.js 将只显示纯文本。鉴于大多数时候选项只是纯文本，这可能不是您关心的内容。
选项文本将作为 HTML 代码插入。每当使用像< 这样的特殊字符时，这都会引起麻烦，这也是安全问题的潜在来源（XSS）。为防止这种情况，您的代码应包含转义：

 html: option.text.replace("&", "&amp").replace("<", "&lt;").replace(">", "&gt;"),

【讨论】：

至少它让我的脚本快了一点。