Question

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

改变这个＆amp;还有其他提高绩效的技巧吗？

Answer 1

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

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

选项的任何格式都将丢失，selected.js将仅显示纯文本。鉴于大多数时间选项只是纯文本，这可能不是你关心的事情。
选项文本将作为HTML代码插入。每当使用<等特殊字符时，这都会造成麻烦，这也是安全问题的潜在根源（XSS）。为了防止这种情况，您的代码应该包含转义：

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

Chosen.js表现

1 个答案: