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

Effect on page operation if page is too big in HTML

本文关键字：操作 影响 HTML 如果      更新时间：2023-09-26

在我的一个要求中，我从我的WebServer获得日志文件(可以是大约10MB)，并显示table with its content as log entries(使用javascript)。我面临的问题是它是creates too many table rows，由于哪一页变成了less responsive。

我想知道如果太多的对象在HTML使页面变慢?

还有，应该如何解决这个问题?

你的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是复杂的，你可能想看看模板引擎，一些帮助选择一个是适合你的。我使用dust是因为linkedin已经完成了所有艰难的评估工作。

因此，鉴于这是一个AJAX调用，我看到了几个选项(按最佳性能排序):

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