Question

我有一个.net页面，在转发器中包含大量始终相同的下拉列表。该网站的呈现性能是......令人失望。

我玩的只是将下拉列表中的值和显示文本提供给页面，然后使用javascript填充选项。运作良好，但我真的看不到改进。最后，页面会花费大量时间将选项附加到选择标记。

有经验的人可以告诉我，理论上是否可能比仅仅填写标记中的select标签更快。感觉就像浏览器必须至少每个选择标签“创建”它一样，所以选项的来源可能并不重要。但也许我的javascript解决方案不是很好的

加载时间并不是真正令人担忧的问题 - 它适用于内部网页。

Answer 1

这是我最后所做的：

我为每个选择控件创建一个1元素的选项列表，以保留预选值。如果选择被聚焦或悬停，我检查它是否包含onyl one元素。如果是，我会从一组键值动态填充它。即使对于非常大的选项列表，它也能毫无延迟地工作。

我为每个选择框注册一个事件监听器并调用此函数

function fillDDL(ddl, arr) {
var i, len;
var optVals;

if (ddl.options.length === 1) {
    var val = ddl.options[ddl.selectedIndex].value;
    var docfrag = document.createDocumentFragment();
    var opt;
    ddl.remove(0);

    opt = new Option("", "", true, false);
    docfrag.appendChild(opt);
    for (i = 0, len = arr.length; i < len; i++) {
        optVals = arr[i];
        opt = new Option(optVals[1], optVals[0], false, optVals[0] === val);
        docfrag.appendChild(opt);
    }
    ddl.appendChild(docfrag);
}

也许innerHTML会更快，但是现在我得到了即时结果。

使用javascript创建巨大的选项列表并在标记中提供它们

1 个答案: