4

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

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

4

1 回答 1

2

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

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

  1. 选项的任何格式都会丢失，choice.js 只会显示纯文本。鉴于大多数时候选项只是纯文本，这可能不是您关心的事情。
  2. 选项文本将作为 HTML 代码插入。每当使用特殊字符时<，这都会引起麻烦，这也是安全问题（XSS）的潜在来源。为防止这种情况，您的代码应包含转义：
 html: option.text.replace("&", "&amp").replace("<", "&lt;").replace(">", "&gt;"),
于 2014-11-04T22:49:21.033 回答