IE8选择人口绩效问题 - 需要解决方案

Question

我有一个应用程序在填充超过100个项目的选项时遇到问题。此问题仅发生在IE8中。我使用angularjs来填充人口，但我的研究表明这是IE8的一个普遍问题。其他人用什么解决方案来解决这个问题。在可预见的未来，我们有超过40,000名用户与IE8绑定（财富200强公司），因此无法选择转移到其他浏览器。

我有些想法。

• 在内存中创建一系列选项标记作为一个长字符串，并替换。的innerHTML。但运行一些人样本似乎并没有解决问题。
• 最初用几个填充选择，然后在用户向下滚动时添加其余部分。我不确定这是否可行，或者如何实现这个

我相信其他人也遇到过这个问题。有没有人有想法？

谢谢，

杰里

Answer 1

另一种保留原始<select>的解决方案是在将选项添加到<option>之后设置<select>值。

理论

1. 将<option>元素添加到文档片段。
2. 将文档片段添加到<select>。
3. 设置每个<option>的值。

实践

在实践中，我们最终会遇到一些问题，我们必须努力解决这个问题：

1. 在为每个人<option>设置值时，IE11非常慢。
2. IE8有选择错误，因为它没有在<select>上正确地进行重新流/布局。

结果

要处理这些真正所做的事情，请执行以下操作：

1. 将<option>标记添加到文档片段中。 确保设置值，以便步骤3在IE11中为无操作。
2. 将文档片段添加到<select>。
3. 设置每个<option>的值。 在IE8中，这将设置值，在IE11中这是一个无操作。
4. 在setTimeout中添加和删除虚拟<option>。 这会强制重新流动。

代码

＆＃13;
＆＃13;
function setSelectOptions(select, options)
{
    select.innerHTML = ''; // Blank the list.
  
// 1. Add the options to a document fragment.
    var docFrag = document.createDocumentFragement();
    for (var i = 0; i < options.length; i++)
    {
        var opt = document.createElement('option');
        opt.text = options[i];
        docFrag.appendChild(opt);
    }
  
// 2. Add the document fragment to the select.
    select.appendChild(docFrag);
  
// 3. Set the option values for IE8. This is a no-op in IE11.
    for (i = 0; i < options.length; i++)
        select.options[i].text = options[i];

// 4. Force a re-flow/layout to fix IE8 selection bugs.
    window.setTimeout(function()
    {
        select.add(document.createElement('option'));
        select.remove(select.options.length - 1);
    }, 0);
}
＆＃13;
＆＃13;
＆＃13;

Answer 2

最佳解决方案似乎是将Select和它的选项创建为文本字符串，并将该字符串添加为包含标记（如DIV）的innerHTML。下面是一些代码。

<div id="selectHome" ></div>

在JS（来自角度控制器）

   function insertSelect(divForSelect) {
       var str = "<select id='myselect'>";
       for (var i = 0; i < data.length; i++) {
          str += '<option>' + data[i] + '</data>';
       }
       str += '</select>';
       divForSelect.innnerHTML = str;
   }

请注意，将选项插入现有Select非常慢（2000个项目为8,000毫秒）。但是，如果选择和选项作为单个字符串插入，则速度非常快（2000个项目为12毫秒）。