Question

在我的一个要求中，我从WebServer获取日志文件（大约10MB），并显示table with its content as log entries（使用javascript）。我遇到的问题是它creates too many table rows，因为哪个页面变为less responsive。

我想知道HTML中有太多对象会导致页面变慢吗？

另外，应该解决这个问题的方法是什么？

提前致谢。

Answer 1

所以，鉴于这是一个AJAX调用，我看到了一些选项（按照最佳性能顺序）：

向服务调用添加分页，并允许AJAX查询仅下拉特定批次的条目。然后实现下一个/上一个页面按钮，这些按钮将连续调用以检索更多/更少的信息。例如/ajax/log将是您的初始通话，然后点击下一个按钮会调用/ajax/log?page=2;上一个按钮重新调用/ajax/log?page=1。
在一次调用中拉下所有数据，但只选择性地将其输出到DOM。 KnockoutJS使分页格式的输出信息非常简单（在Stackoverfow上有例子）。
将其转储为-s并添加一个类似jQuery DataTables的脚本。这将隐藏行并根据推送到表本身的内容实现分页。除了通过ajax加载表之外，它只需要很少的额外编程，然后调用$('mytable').datatable()。

Answer 2

你的javascript是什么样的？根据您构建DOM的方式，它可能是瓶颈。例如：

var html = [];
for(var i=0;i<rows.length;i++) {
    html.push('<tr><td>' + rows[i] + '</td></tr>'); 
}
$('#tbody').append(html.join(''));

比

要快得多

for(var i=0;i<rows.length;i++) {
    $('#tbody').append('<tr><td>' + rows[i] + '</td></tr>');        
}

这假设你正在使用jquery。此外，正如其他人所提到的，使用分页来限制屏幕上元素的数量。

如果您的HTML很复杂，您可能需要查看template engine，以及一些适合您的help choosing。我使用dust因为did all the hard evaluation work。

如果页面在HTML中太大，对页面操作的影响

2 个答案: