Ajax 使用 10.000 个项目更新 h:selectManyListbox 时渲染 "freezes" 一段时间

Question

我将 Mojarra JSF (v2.2.10) 与 Spring (v3.2.5) 一起用于 tomcat 上的小型管理控制台（还有 Twitter Bootstrap 用于样式设置） . 基本上有一个多个 select 框，我可以通过文本框和按钮向其中添加新条目。我还可以通过 select 删除条目并单击删除按钮来删除条目。

相关代码如下：

<h:form>
<h:outputLabel for="selectedEntries" value="Selected entries" />
<h:selectManyListbox id="selectedEntries" value="#{myBean.entriesToRemove}">
  <f:ajax/>
  <f:selectItems value="#{myBean.selectedEntries}" />
</h:selectManyListbox>
<h:commandButton action="#{myBean.addEntriesToSelection}" value="Add">
  <f:ajax render="selectedEntries entriesInput" />
</h:commandButton>
<h:commandButton action="#{myBean.removeEntriesFromSelection}">
  <f:ajax render="selectedEntries entriesInput" />
</h:commandButton>
<h:outputLabel for="entriesInput" value="Input" />
<h:inputTextarea id="entriesInput" value="#{myBean.entriesInput}">
  <f:ajax/>
</h:inputTextarea>

字段 "entriesToRemove" 和 "selectedEntries" 是简单的字符串列表，字段 "entriesInput" 是字符串。

一切正常，但是当 "selectedEntries" 列表增长到 10.000 个条目时，我遇到了性能问题：当我尝试向这个过度增长的列表中添加一个新条目时，页面冻结了大约 30在呈现更新列表之前的秒数。删除条目也是如此。然而，这种冻结不会发生在方法 "addEntriesToSelection" 中，而是发生在之后，当支持 bean 字段已经更新时。所以我认为这与页面的呈现有关。

有没有人知道我该如何解决这个问题？这可能是 Mojarra 或 JSF 特有的吗？

Answer 1

这是客户端问题，不是服务器端问题。众所周知，某些浏览器，尤其是 MS Internet Explorer，在使用 "insane" 数量的新 HTML 元素更新 HTML DOM 树时会出现延迟。当然 10.000 个列表框项目是 "insane"。 Google 例如当您打开搜索主页时，也不会立即显示所有那百万个潜在匹配项。相反，它显示了一个具有自动完成功能的输入字段，允许您查找和过滤相关数据。

考虑将该列表框变成 search/autocomplete 输入字段。

Ajax 使用 10.000 个项目更新 h:selectManyListbox 时渲染 "freezes" 一段时间

Ajax rendering "freezes" for a while when updating h:selectManyListbox with 10.000 items

ajax

jsf

mojarra