Ajax 问题：使用 innerHTML 从 Web 服务获取数据时出现延迟，请指导

Question

我正在开发一个 ajax 应用程序，它将在 html 表中显示大约一百万条记录。 Web 服务从服务器返回记录，我通过连接数据和标签来构建一个 logn 字符串，然后使用 innerHTML 放置这个字符串（不使用 DOM 以获得更好的性能）。

为了测试，我在数据库中放入了 6000 个记录（存储过程完成执行大约需要 4 秒）。

在本地系统（同一台机器上的数据库和应用程序）上测试时，大约需要 5 分钟才能在页面中显示记录。在 web 服务器上部署后，它甚至更长时间都没有响应。它看起来性能非常低。我把记录放在一个 CSV 文件中，它的重量小于 2 MB。我不明白为什么字符串连接来构建 html 表并将字符串放入 innerHTML 会花费如此多的时间（如果这是问题的话）。要求是在网页中显示大约百万条记录，但仅 6000 条记录的性能令人失望。我不知道该怎么做才能提高性能。

请指导我并帮助我。

Answer 1

您想在一个页面上显示一百万条记录？无论您如何优化服务器代码，都需要解析/呈现大量 html，尤其是在表格中时。

即使使用 .innerHTML 也不会在任何时候“拯救”您。渲染引擎仍然需要解析/样式/渲染/定位数百万个表格行/单元格，您必须等待它工作。

如果您绝对必须在单个页面上显示所有这些记录，请尝试将内容分解为可管理的块。让 AJAX 调用一次返回（比如说）100 条记录，将它们放入表中，然后再获取 100 条记录，等等......至少这样你会看到页面的内容在增长，而不是不得不坐在那里等待 1,000,000 个表格行一次显示。

更好的选择是进行分页，一次只显示 100 条记录，并且您提供一个标准导航，带有 > 按钮来交换数据的“页面”。

Answer 2

正如 Marc 所说，您需要分页。看看这是否有帮助 - How do I do pagination in ASP.NET MVC?

除此之外，您还可以通过使用主从模式来优化结果 - 仅获取记录（主）的摘要并在主中的某些操作中获取详细信息并显示在屏幕上。这将减少从服务器传输的数据的大小。