JSP：循环内的函数调用变得非常慢。帮我优化一下

Question

在我的 JSP 中，我循环访问包含员工列表的对象并显示它。 对于每个员工行，我还提供了一个链接，以便用户可以查看员工的详细信息。该链接调用传递员工 ID 的 Javascript 函数。

我遇到的问题是响应时间随着对象中行数的增加而急剧增加。当我的对象包含超过一千条记录时，渲染页面至少需要 30 秒。代码如下：

function getDetail(empID){

  //AJAX call to get employee details}
}
.
.

<table>
  <c_rt:forEach var="emp" items="${employeeListObj}">
    <tr>
      <td>
    <a href="#" onClick="getDetail('<c:out value="${emp.id}"/>')"><c:out value="${emp.lastName}" /></a>
      </td>
    </tr>
  </c_rt:forEach>
</table>

我已将罪魁祸首缩小到员工 ID 参数是动态的或在运行时评估的。我一开始以为是 JSTL c:out 的问题，但我也尝试改成普通的 JSP 变量（即 getDetail('<%=ctr%>')，响应时间仍然很慢。

但是当我将其更改为静态字符串（即 getDetail('some static string')），响应时间变得很好，

我也尝试将其作为函数传递（即 onClick="getDetail(function () {return ''})"）。但响应时间仍然没有改善。

是否有更好（更优化）的方法来实现更好的响应时间？

Answer 1

感谢您的回复，但我已经找到了一个简单的解决方案。不是最优雅的，但它是一个简单的更改，并且满足了我的最终用户的需求（他们不需要分页，只是一个可滚动的 DIV 区域）。

我没有在循环内使用此语句：

<a href="#" onClick="getData('<c:out value="${emp.id}"/>')">

我使用员工 ID 作为锚标记的 ID，并传递该标记：

<a id='<c:out value="${emp.id}"/>' href="#" onClick="getData(this.id)">

我不知道为什么，但就页面渲染时间而言，差异是白天和黑夜。现在，与直接传递 c:out 值时的渲染时间超过一分钟相比，它的渲染时间不到 5 秒。顺便说一句，我正在处理 10,000 条记录。

Answer 2

如果问题出在浏览器中，您可以将点击处理程序替换为包含数字的属性以及通过 Javascript（例如 jQuery）添加的单次点击处理程序

编辑：例如：

$('table.SomeClass a').click(function() { 
    getDetail($(this).attr('data-employeeId'));
    return false;
});