javascript - JSON性能问题产生大量HTML列表

Question

我正在使用服务器端的PHP和jQuery以及JavaScript中的自定义MVC来构建一种项目管理工具。

我有一个弹出窗口可帮助用户在项目中添加人员。在弹出的地方，用户必须选择一个组（例如学生组），然后他可以选择配置文件以将其添加到当前项目中。

我已经对70-120人的小组进行了测试，并且工作时稍有延迟。

但是，当我测试一组1000个人时，刷新时间是如此之长，以至于Chrome浏览器会问我是否要停止脚本或等待更多时间...对于体验者而言这不是很好！

数据以JSON格式来自服务器：

{“ users”：[{“ uid”：“ cortes”，“ firstname”：“ Francois”，“ lastname”：“ CORTES”，“ mail”：“ ...”}]，/ * 1000个用户记录了更多* /}

并以此HTML格式设置数据（自定义伪Mustache模板）

<li>
  <div class="wrapper">
    <p class="title"> {{firstname}} {{lastname}} {{mail}} </p>
    <p> {{uid}} </p>
    <p> <input type="checkbox" id="select-{{uid}}" /> </p>
  </div>
</li>

jQuery用于构建列表并添加一些侦听器
-在弹出验证之前选择/取消选择状态本地存储
-鼠标悬停时的一种亮点
在每个列表元素上
[代码] [代码]
我的问题是如何跟踪性能泄漏并解决该问题？

当然，代码有点丑陋且难以维护，当然，我又一次要快速解决这个问题，有人可以帮助我吗？

编辑：感谢您的评论和您的帖子。

更多的解释：通常团体容纳50-200人。由于某些技术和管理原因，这1000人的团体只是临时总数的90％的合并。但是，要强制执行性能并确保UI的响应性是一个巨大的挑战。

目前它没有通过测试...

@Chris：我正在用PHP构建一个测试控制器，以设置JSON的生成时间和大小

@Dandavis：是的，目前我正在这样做。我使用jQuery从页面上获取了一个通用的DIV模板，并在JSON数据上循环了1000次，用Javascript字符串用其example-data-value替换了通配符{{example-data-name}}，然后将其插入到DOM中（ jQuery），然后绑定事件监听器（jQuery也是如此）。我同意丑陋的代码，但是是自制的，没有办法，也没有时间使用BackBone或Knockout重构它。

documentFragment？好...需要进一步挖掘！

@ ajax81：页面加载时缓存的静态JSON ???为什么不……也许是修改现有工作和努力的最简单方法！

@Alberto：我牢记有用的提示。正如我上面评论的那样，我今天下午开始测试

我的感觉是PHP可以正确地完成其工作（关于数据大小和生成速度），但是自定义模板方法无法有效地处理整个数据！

无需分页数据，因为用户通常在小（50）到中（120）记录列表中滚动。 1,000是压力测试。它仅在夏季（节假日）发生，但是如果我能成功的话，用户的日常体验将会更好，并且可以防止低性能系统崩溃。

问候。

编辑并解决问题

的PHP

我已经对PHP脚本进行了基准测试：1,000条记录提取和JSON生成的执行时间少于0.25秒，并且少于100ko长...因此在服务器端没有特别的问题。

我在服务器端进行了一些优化，以通过使用一些PHP内缓存来限制数据库和LDAP请求，只是为了限制应用程序的冗余和网络流量。

Java脚本

然后，我修改了模板用法：现在，我循环了1000条JSON记录，评估模板并将结果附加到原始HTML字符串中，然后将LI元素附加到UL。

此时，该列表在视觉上已为用户准备好了。

稍后，我再次循环处理JSON数据以绑定事件处理程序（单击复选框，单击周围的DIV，然后将DIV悬停在指针上...），但该列表尚未显示！

刷新列表时的延迟是可见的，但非常短，不到1.5秒...也许我会添加一些沙漏图标，以防止用户在等待列表时重复单击。

所以计时测试现在成功了
在常规使用中，列表不会超过150个人，因此，如果1000可以的话...对我来说也可以:-)

非常感谢（@all）的帮助。

Answer 1

我不知道您到底想要什么，但是您在此json列表中使用分页吗？列出分页为10、20、30行等的值，并给ajax服务器调用以获取下一批分页的行。