Question

我构建了一种项目管理工具，在服务器端使用PHP，jQuery加上javascript中的自定义MVC。

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

我已经使用70-120人进行了测试，但它的工作时间有点延迟。

但是，当我测试一大群1000人时，刷新时间太长以至于Chrome问我是否要停止剧本或等待更多时间......这对于iser体验并不好!!!

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

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

并且数据在此HTML（自定义伪胡须模板）中格式化

<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％的临时合并。但是，强制执行并确保用户界面的反应性是一个巨大的挑战。

目前它未通过测试...

@Chris：我正在PHP中构建一个测试控制器来计算JSON的生成和大小

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

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

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

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

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

无需对数据进行分页，因为用户通常会在小型（50）到中（120）的记录列表中滚动。 1000是压力测试。它只发生在夏季（假期），但如果我成功，用户的日常体验将更好，并防止低性能系统崩溃。

问候。

编辑并解决问题

PHP

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

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

的Javascript

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

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

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

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

所以计时测试现在成功 在常规使用中，列表不会超过150人，所以如果1000个就可以了......对我来说没关系： - ）

非常感谢（@all）提供帮助。

Answer 1

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

Answer 2

如果我是你，我会按照以下步骤操作：

追踪获取数据并为其计时的查询，如果需要花费很多时间，可能只是缺少索引或查询效率低下，但此时您知道指向哪里指点
使用该页面的静态版本，无需进行任何服务器端调用，只需将JSON结果放入文件中并加载该文件，查看代码的行为方式
正如@Chris Pitman所说，GET需要多长时间

您应该能够通过以下步骤粗略地找到问题所在。

作为一般规则，我建议你增加搜索开始的字母数量，这样你就不会返回大量的结果，从而减少了加载时间，也因为没有人希望你在结果时返回结果用户在搜索字段中输入“a”。

您可能想要评估的另一件事是传递一个更薄的数组，只包含用户的电子邮件，在请求时获取更多数据，根据定义，电子邮件是唯一的。

Answer 3

您的问题与“性能泄漏”跟踪没有直接关系，因为您知道问题所在，并且您已经确定了罪魁祸首：您正在处理大量数据。阿尔贝托建议通过一个更薄的阵列并尝试用更少的东西做更多的事情是一个很好的起点。 Ase Ena建议将你的数据分页，但是（我猜）在你的舒适区之外。

如果在整个应用程序中经常访问和使用此人员列表，Alberto建议将列表缓存在自己的JSON文件中是一个很好的建议。每次需要列表时，这将为您节省大量数据库查询，并减轻您必须进行后续ajax调用以检索数据的麻烦。此外，它将缓存在客户端的计算机上（甚至可以访问应用程序）并提高性能，因为每次访问应用程序时或每次需要显示列表时都不必下载。作为一个额外的好处，在客户端上缓存整个列表大大简化了您将用于转换数据的分页机制，因为您不必管理服务器端SQL，会话状态等。

编辑 -

当我说“在客户端缓存JSON文件”时，我可能不知道我的意思。这是一个例子：

<script src="MyPeopleList.json?v1" type="text/javascript"></script>

你基本上只是在json文件中链接，就像任何其他javascript一样。您的JSON用户列表现在可用于您的应用程序的其余部分，也可以缓存。如果您需要刷新列表或确保用户获得列表的最新版本，您只需将“v1”更改为“v2”即可。（版本控制很重要，因为某些版本的Internet Explorer会积极地缓存这些文件，即使服务器上的文件比缓存中的文件更新，也不会刷新。

来自JSON性能问题的巨大HTML列表

3 个答案: