javascript - 存在百万条记录的页面的性能改进

Question

我需要一些如何提高应用程序性能的建议，我正在开发 MVC 3 ASP.NET 应用程序。从 Controller 中，我提取了 50,000 条字符串类型的记录，所有项目，即 50,000 条都使用 Jquery 动态添加到 HTML Div。

   $(div).append("<input type='radio' name='reportType' 
   id='" + item.Item1 + "' value = '" + item.Item2 + "'/>" + item.Item1 ");

我看到将上面的单选按钮添加到父控件时花费了大量时间，即 HTML DIV

父 HTML DIV 有复选框，选中后，必须选中所有子框。我看到有相当多的时间来检查所有项目

所有这些项目都在 Scroll Viewer 中，有没有一种方法可以改善用户体验，比如在 Scroll 基础上加载数据，比如 HTML 5 中 Silverlight 的数据虚拟化。

我检查所有项目并拖到页面的另一部分，这使浏览器进入非响应模式。谁能为我提供这么多记录的最佳用户体验并提高查询性能

Answer 1

您应该创建一个 documentFragment 并在其中添加节点。完成后将 documentFragment 添加到 DOM。此外，使用 createElement 比使用字符串更有效。有很多 jsperf 测试可以证明这一点，您还可以找到以最有效的方式进行测试的方法。

为了防止浏览器在很长一段时间内完全卡住，您应该以...1000 项(纯猜测)为单位分批中断迭代。并根据需要多次调用该函数以完成工作。在外面放一个柜台。用 setTimeout(renderMore, 0) 调用它。至少这可以防止窗口卡住。

根据您的 UI 和工作流程，您可能还可以应用其他一些改进。但是您没有提供太多相关信息。