Html Chrome在大屏幕上加载速度较慢

在我的HTML页面中，我有一个

元素，其中包含数千个

元素，这些元素是在JSP中生成的

当页面在IE和Firefox中加载时，加载速度非常快，但在Chrome中加载时，加载时间要长得多。（可能需要一分钟。）我用

标记替换了

和

元素，令人惊讶的是，加载速度更快（几秒钟内）

在dev工具中检查了时间轴之后，我注意到当我使用这些选项时，“加载”时间非常长，特别是

parseHTML

（见事件日志）。然而，当我用div替换select时，加载时间只有几毫秒。渲染实际上比加载要长（正如前面所说的，它不是很长），有趣的是，它比选项的渲染要长

我很想了解以下内容：

• 呈现和加载之间的确切区别是什么？特别是

  parseHTML

• 为什么div的行为与options不同
• 最重要的是，我如何在不使用select2或其他动态加载选择框的情况下使用select，并且仍能获得良好的加载时间

更新

在玩了一番之后，我发现了如何修复它，但我比以前更加困惑了

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

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

有大小属性的花了大约2分钟，而没有大小属性的只花了10秒

在这里，我也检查了时间轴，和以前一样，具有大小的时间轴的“加载”事件（

parseHTML

）占用了80%的加载时间，耗时99秒，而没有大小的时间轴的“加载”事件只占用了加载时间的3%（465毫秒），“渲染”占用了75%的加载时间（7.8秒）

这可能是chrome中的一个bug，但是我很想了解这里发生了什么

---

另外，我知道在JSP中使用scriplets不是一个好主意，这只是出于测试目的，而且这个问题并不特别与JSP有关，而是一个一般的HTML问题。

我遇到了同样的问题。使用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. 
}

正文
函数addOptions（元素）
{
///一些循环
{
var option=document.createElement（“选项”）；
option.value=carrierCodeTypeMemberCodes[carOptions]；
option.text=carrierCodeTypeMemberValues[carOptions]；
元素。添加（选项）；
}
元素。单击（）；///刷新选择框需要此选项。
}