Question

在我的HTML页面中，我有一个<select>元素，其中包含数千个<option>元素，这些元素在JSP中生成。

当页面在IE和Firefox中加载时，加载速度非常快，但是在Chrome中加载时，加载时间会显着延长。（可能需要一分钟。）我用<select>标签替换了<option>和<div>元素，令人惊讶的是，它加载得更快（在几秒钟内）。

在检查开发工具中的时间线后，我注意到当我使用选项时，'加载'时间非常长 - 特别是parseHTML（在事件日志中看到）。但是，当我用div替换select时，加载时间只有几毫秒。渲染实际上比加载时更长（如前所说的那么长），有趣的是 - 它比选项的渲染时间长。

我很想了解以下内容：

渲染和加载之间的确切区别是什么 - 具体是parseHTML？
为什么divs的行为与选项不同？
最重要的是，如何在不使用select2或其他动态加载选择框的情况下使用select，并且仍能获得良好的加载时间？

更新

经过一些游戏，我发现了如何修复它，但我比以前更加困惑。

我创建了两个JSP，一个指定了size属性，另一个没有。

    <select size="10">
    <%                  
    for(int i = 0; i< 60000; i++){ %>
        <option value="<%=i%>"><%=i%></option>
    <%} %></select>

具有size属性的那个花了大约2分钟，而没有大小属性的那个花了大约10秒!!!

在这里，我检查了时间轴，并且 - 和以前一样 - 那个尺寸为'loading'的事件（parseHTML）占用了80％的加载时间并且花了99秒长，而一个没有大小的“加载”事件只占加载时间的3％，（465毫秒），“渲染”占用了75％的加载时间（7.8秒）。

这可能是Chrome中的一个错误，但我很想知道这里发生了什么。

P.S。我知道在JSP中使用scriplet不是一个好主意，这只是出于测试目的，特别是这个问题与JSP没有关联，而是一般的HTML问题。

Answer 1

我遇到了同样的问题。使用onclick方法动态添加选项解决了它。页面加载速度很快，只有在用户单击时才会添加选项。

<SELECT name='xyz' onclick="addOptions(this) " >
<option value='abcd' SELECTED > text </option>  
<!--  so that atleast one option is visible. -->    
</SELECT>

function addOptions ( element )
{
    /// some loop 
    {
        var option = document.createElement("option");
        option.value = carrierCodeTypeMemberCodes[carOptions] ;
        option.text = carrierCodeTypeMemberValues[carOptions];
        element.add( option );
    }
    element.click();  //// This is required to refresh the select box. 
}

大量选择时Chrome加载缓慢

1 个答案: