Javascript 在HTML表中显示数据的最佳实践

我试图在一个HTML表中显示超过50k行，但由于某些原因，显示需要花费很多时间（大约60秒），将数据加载到HTML表中的最佳实践是什么？ 我正在使用以下代码：

    $('#entities_panel_gridlist').empty();
    $('#entities_panel_gridlist').append("<table id='entities_list' width='100%'><tr class='entities_gridlist_heading'><th width='59%'>Name</th><th width='40%'>Hash</th></tr></table>");
    var len = myTable.length
    for (var i=0; i < len; i++) {
        let name = myTable[i][0];
        let hash = myTable[i][1];

        console.log(i)

        $('#entities_list').append('<tr class="rows"><td>'+ name +'</td><td>'+ hash +'</td></tr>');
    }

$（'#实体#面板_网格列表'）.empty（）；
$（“#实体"面板"网格列表”）.append（“NameHash”）；
var len=myTable.length
对于（变量i=0；i

通过在变量中收集标记并在其后追加来保存一些渲染资源

 $('#entities_panel_gridlist').empty();  
 $('#entities_panel_gridlist').append("<table id='entities_list' width='100%'><tr class='entities_gridlist_heading'><th width='59%'>Name</th><th width='40%'>Hash</th></tr></table>"); 
 var len = myTable.length;
 var markup = '';
 for (var i=0; i < len; i++) { 
   let name = myTable[i][0]; 
   let hash = myTable[i][1]; 
   var markup += '<tr class="rows"><td>'+ name +'</td><td>'+ hash +'</td></tr>';
 }
 $('#entities_list').append(markup);

$（'#实体#面板_网格列表'）.empty（）；
$（“#实体"面板"网格列表”）.append（“NameHash”）；
var len=myTable.length；
var标记=“”；
对于（var i=0；i

对于大容量，请添加更多排序和搜索工具

一次5万行太多了。用户只需要第一行就可以了解整个表内容的外观

---

寻找更高级的表格工具，如分页或搜索。以下是材质角度表分页的外观：

欢迎使用堆栈溢出。这是：“将数据加载到HTML表中的最佳实践是什么？”-首先不要将50k行日期加载到HTML表中。做同样的事情，埃克塞尔女士做，或谷歌表单做；也就是说，只呈现人类可消费的信息量。停止关注机器可以或不能处理50k行的内容。视图端口是您必须填充的全部内容-所以填充那么多。然后确定用于一次显示数据查看端口的无限滚动或分页策略。感谢您的回复Randy，但我的项目确实需要一次显示所有数据。我意识到我无法说服您可以在服务器上对数据进行排序、剪裁和定制。您的用例有缺陷，您需要在浏览器窗口中显示所有50k行。如果这是一种没有人工参与的自动化处理机制，那么就用无头浏览器来实现，并且真的，真的加快了速度。否则，人类只能看到屏幕上的内容——将49975行放在视线之外对任何人都没有好处。好的，但是我们如何分类，我们不能改变服务器等等。我明白了。祝你好运。非常感谢！时间从60秒减少到了6秒，但还是有点慢，有没有比我能做的更好的事情来加速一点呢？或者是一种异步加载的方式，这样用户界面就不会卡住。@HassoN只有两种方式可以加快速度：1。买一台速度更快的电脑。显示更少的数据请注意，ECMA 2016中的字符串限制为1 GB，但为了向后兼容，必须将字符串限制为256 MB。对于50K生产线，这不会是一个问题。