JSP页面动态生成多下拉列表导致Google Chrome内存不足问题求助

问题根源 #

你的代码中，每循环一个studentList元素就生成一个独立的<select>，每个<select>都重复渲染college集合的所有<option>。当studentList和college数据量较大时，DOM节点数量会呈乘积级增长（比如1000个学生×1000个学院=100万节点），直接导致Chrome内存过载。

具体解决方案 #

1. 复用全局选项集合（减少DOM重复节点） #

只渲染一次college的选项，所有下拉框共享这组选项，从根源减少DOM节点数量。

实现方式：用<datalist>共享选项

先在页面顶部渲染一次college选项到隐藏的<datalist>，然后每个下拉框关联这个datalist：

<!-- 页面顶部只渲染一次学院选项 -->
<datalist id="collegeOptions">
  <html:options collection="college" property="test1" />
</datalist>

<!-- 循环生成下拉框，复用datalist选项 -->
<nested:iterate property="studentList">
  <tr>
    <td>
      <!-- 用HTML原生select关联datalist，替代Struts的嵌套select -->
      <select name="studentList[${status.index}].name" list="collegeOptions">
      </select>
    </td>
  </tr>
</nested:iterate>

如果要保留Struts的nested:select标签，可以先将选项内容缓存为变量，避免JSP重复遍历college集合：

<!-- 缓存学院选项字符串 -->
<c:set var="collegeOptionHtml">
  <html:options collection="college" property="test1" />
</c:set>

<nested:iterate property="studentList">
  <tr>
    <td>
      <nested:select property="name">
        ${collegeOptionHtml}
      </nested:select>
    </td>
  </tr>
</nested:iterate>

注：第二种方式仍会生成重复的<option>节点，但减少了JSP后端遍历开销，适合数据量不算极端大的场景；第一种<datalist>方式才是真正减少DOM节点的最优解。

2. 虚拟滚动加载选项（处理超大选项集合） #

如果college集合本身数据量极大（比如超过1000条），即使复用选项，单个datalist的节点数量也会很高。这时可以用虚拟滚动，只渲染当前可见的选项，滚动时动态加载/销毁节点。

简化实现思路（原生JS）：

<!-- 循环生成自定义下拉框容器 -->
<nested:iterate property="studentList">
  <tr>
    <td>
      <div class="custom-select">
        <input type="text" class="select-input" placeholder="选择学院" data-index="${status.index}">
        <div class="select-options" style="display:none; max-height:200px; overflow-y:auto;"></div>
      </div>
      <!-- 隐藏的表单字段，用于提交数据 -->
      <input type="hidden" name="studentList[${status.index}].name">
    </td>
  </tr>
</nested:iterate>

<script>
// 提前将college集合转为JSON字符串传入前端
const collegeList = ${collegeJson}; 
const pageSize = 20;

// 给每个自定义下拉框绑定事件
document.querySelectorAll('.custom-select').forEach(container => {
  const input = container.querySelector('.select-input');
  const optionsBox = container.querySelector('.select-options');
  const hiddenInput = container.nextElementSibling;
  
  // 初始化加载第一页选项
  loadOptions(0);
  
  input.addEventListener('click', () => {
    optionsBox.style.display = optionsBox.style.display === 'none' ? 'block' : 'none';
  });
  
  // 滚动加载更多
  optionsBox.addEventListener('scroll', () => {
    if (optionsBox.scrollTop + optionsBox.clientHeight >= optionsBox.scrollHeight) {
      const currentPage = Math.floor(optionsBox.children.length / pageSize);
      loadOptions(currentPage + 1);
    }
  });
  
  // 加载指定页码的选项
  function loadOptions(page) {
    const start = page * pageSize;
    const end = Math.min(start + pageSize, collegeList.length);
    if (start >= end) return;
    
    for (let i = start; i < end; i++) {
      const option = document.createElement('div');
      option.className = 'option-item';
      option.textContent = collegeList[i].test1;
      option.addEventListener('click', () => {
        input.value = collegeList[i].test1;
        hiddenInput.value = collegeList[i].test1;
        optionsBox.style.display = 'none';
      });
      optionsBox.appendChild(option);
    }
  }
});
</script>

3. 服务器端优化（减少前端数据量） #

• 对college集合做筛选或分页，比如只返回常用的学院选项，或者提供搜索框让用户过滤后选择，减少前端需要渲染的选项数量；
• 避免在JSP中渲染超大集合，改为前端通过AJAX按需获取选项数据。

4. 业务层面替代方案 #

如果业务允许，考虑将“每行一个下拉框”改为单个下拉框+批量选择，或者用弹窗选择后批量赋值，从根本上减少下拉框的数量。

内容的提问来源于stack exchange，提问作者Md Hasim