Chosen.js表现

Question

我正在尝试将chosen.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则所选插件似乎仍然可以按要求工作。

是否有其他改变这个以及任何其他提高性能的技巧？

Answer 1

虽然HTML序列化通常是一个缓慢的操作，但我发现令人惊讶的是它应该负责超过一秒的延迟。 我运行的快速测试表明，在Firefox 33和Chrome 38中，对5000个选项执行option.innerHTML时间不到2毫秒，其他浏览器的行为应该类似。 因此，我怀疑您错误地确定了问题的根源。

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

1. 选项的任何格式都将丢失，selected.js将仅显示纯文本。 鉴于大部分时间选项是唯一的纯文本，这也许不是你关心的东西。
2. 选项文本将作为HTML代码插入。 当使用像<等特殊字符时，这将导致麻烦，这也是安全问题（ XSS ）的潜在来源。 为了防止这种情况，您的代码应该包含转义：

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