Question

我需要一些建议如何提高应用程序的性能，我正在开发MVC 3 ASP.NET应用程序。从控制器中，我将拉出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有Check box，在检查时，必须选择所有子框。我看到有相当多的时间来检查所有项目

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

我检查所有项目并拖到页面的另一部分，这使浏览器处于非响应模式。任何人都可以通过提高查询性能为我提供这些记录的最佳用户体验

Answer 1

构建要附加的HTML字符串。
在建筑完工后追加一次。

这比附加每个字符串更快。

var htmlToAppend = "";
for (var i in items) {
     var item = items[i];
     htmlToAppend = "<input type='radio' name='reportType' id='" + item.Item1 + "' value = '" + item.Item2 + "'/>" + item.Item1;
}

$(div).append(htmlToAppend);

另外，我相信还有更好的方法！

Answer 2

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

为了防止浏览器长时间完全冻结，你应该分批打破你的迭代... 1000项（纯猜测）。并且可以根据需要多次调用该函数来完成工作。在柜台外面放一个柜台。使用setTimeout(renderMore, 0)进行调用。至少这会使窗户不再冻结。

根据您的用户界面和工作流程，您可以应用其他一些改进措施。但你没有提供太多关于此的信息。

Answer 3

基本上，要显示大型数据集，请尝试以下方法：

1）将其存储在浏览器内存中，使用sessionStorage（）或localStorage（）

2）最小化DOM，不要将所有数据写入DOM，动态添加＆amp;删除元素。

3）允许数据集可搜索，这意味着修剪数据集的过滤器功能。

另一种推荐的解决方法是使用Megalist，需要jQuery，适用于平板电脑或移动设备。

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

3 个答案: