使用JavaScript向表中添加500000行，而不会使页面崩溃

我有一个报告系统，用户点击报告，执行SQL，结果显示在表中。我遇到的问题是，单个报告会为报告返回超过500000行。系统通过AJAX调用检索数据需要一段时间，但是一旦完成，在向页面添加HTML时浏览器就会“挂起”

我的问题是，有没有其他方法可以在不导致浏览器挂起的情况下将HTML添加到页面中

var HTMLPRE = '<p class="text-center"><b id="lblReportStatus">Producing report...</b><br><small>Average time: ' + parseFloat($('#hidReportID').attr('data-avg')).toFixed(2) + ' seconds</small>' +
    '<br><small>Current time: <span id="divCurrentTimeTaken">0</span></small></p>';
window.CurrentTimer = 0;
$('#reportresults').html(HTMLPRE);
// start the timer
window.ProducingReportTimer = window.setInterval(function() {
    window.CurrentTimer++;
    $('#divCurrentTimeTaken').html(window.CurrentTimer + ' seconds');
}, 1000);

$.post(window.routes['ReportWriter.ProduceReport'], FormData, function(resp, status) {
    if (status === 'success') {
        if (resp.code == '200') {
            $('#lblReportStatus').text('Generating report...<br>Please note your browser may become un-responsive.  Please wait for a few minutes if this happens.');
            ProduceReportTable(resp);
        }
    } else {
        alert("Unable to produce report.  Please contact support with the below information:\r\nStatus code" + status);
    }
}).fail(function(err, status) {
    alert("Unable to produce report.  Please contact support with the below information:\r\n" + err);
});

var HTMLPRE='
生成报告…
平均时间：'+parseFloat（$（'hidReportID'）.attr（'data-avg'））.toFixed（2）+'seconds'+
“
当前时间：0
”；
window.CurrentTimer=0；
$（'#reportresults'）.html（HTMLPRE）；
//启动计时器
window.ProducingReportTimer=window.setInterval（函数（）{
window.CurrentTimer++；
$（'#divcurrentTimeTake'）.html（window.CurrentTimer+'seconds'）；
}, 1000);
$.post（window.routes['ReportWriter.ProduceReport']，FormData，函数（resp，status）{
如果（状态==“成功”）{
如果（响应代码=='200'）{
$（“#lblReportStatus”）.text（'正在生成报告…
请注意，您的浏览器可能没有响应。如果发生这种情况，请等待几分钟。'）；
生产报告表（resp）；
}
}否则{
警报（“无法生成报告。请使用以下信息与支持部门联系：\r\n状态代码”+状态）；
}
}).失败（功能（错误、状态）{
警报（“无法生成报告。请使用以下信息与支持部门联系：\r\n”+错误）；
});

函数ProduceReportTable（resp）{
var ReportHTML='Excel'+
'' +
'' +
'';
//首先循环浏览标题
$（分别为标头）。每个（函数（idx，标头）{
ReportHTML+=''头+''；
});
ReportHTML+=''；
//循环浏览数据
$（分别为行）。每个（函数（idx，行）{
ReportHTML+=''；
$.each（行，函数（）{
ReportHTML++=''+（此窗口实例？''：此）+''；
});
ReportHTML+=''；
});
ReportHTML+=''；
$（'#reportresults'）.html（ReportHTML）；
window.clearInterval（window.ProducingReportTimer）；
/*
$（'#tblReport'）。数据表({
是的，
/*卷轴：200*//*
对,，
卷轴：对
});*/
//启用excel按钮
$（'btnExportExcel'）。on（'click'，函数（e）{
e、 预防默认值（）；
让TableSource=document.getElementById（'tblReport'）；
var today=新日期（）；
var dd=today.getDate（）；
var mm=today.getMonth（）+1；//一月是0！
var yyyy=today.getFullYear（）；
if（ddNo.注释已经给出了很好的答案；其要点是从性能点（没有任何东西可以正确呈现那么多数据）、从用户点（没有人可能一次处理那么多数据）和从安全性点返回那么多行是个坏主意（你的应用程序面临着巨大的拒绝服务攻击的风险）。我能想象的唯一一个使用案例就是创建一个报告，在这种情况下，你应该导出一个Excel/PDF文档，而不是用HTML显示它

你应该实现分页和过滤选项来解决你的问题。如果你有使用JavaScript，请在你的应用程序上使用合适的AJAX端点。
你能在这个解决方案中引入分页吗？单个页面上500000行太多了。甚至无限滚动。加载的行比以往任何时候都多立即使用ble通常是一个坏主意。在意识到这是一个坏主意之前，你甚至不必考虑浏览器的功能。在一个页面中，500000行任何内容都是无法使用的混乱。滚动条的1px移动将移动约500个条目。毫无用处。出于对所有这些好处的热爱，通过将结果分页到某个位置来实现更好的用户体验这对用户来说更明智/有用。所有这些信息不可能都与您试图传达的内容相关。为了用户着想，我建议将数据表复制到您可以控制的其他地方，并限制结果并使用偏移量。这将取决于您的具体情况我认为，如果试图显示50万行数据，任何程序都会挂起，除非你有一台拥有大量内存的超级计算机
function ProduceReportTable(resp){
    var ReportHTML = '<div class="row"><div class="col-xs-12"><button class="btn btn-primary" id="btnExportExcel"><i class="fa fa-file-excel"> Excel</i></a></div>' +
        '</div><div class="col-xs-12"><div class="table-responsive" style="overflow-x: auto;">' +
        '<table class="table-hover table-striped table" id="tblReport">' +
        '<thead><tr>';
    // loop through the headers first
    $(resp.headers).each(function (idx, head) {
        ReportHTML += '<th>' + head + '</th>';
    });

    ReportHTML += '</tr></thead><tbody>';
    // loop through the data

    $(resp.rows).each(function (idx, row) {
        ReportHTML += '<tr>';
        $.each(row, function() {
            ReportHTML += '<td>' + (this instanceof Window ? '' : this) + '</td>';
        });
        ReportHTML += '</tr>';
    });
    ReportHTML += '</tbody></table></div></div>';
    $('#reportresults').html(ReportHTML);
    window.clearInterval(window.ProducingReportTimer);
    /*
    $('#tblReport').dataTable({
        deferRender:    true,
        /*scrollY:        200,*//*
        scrollCollapse: true,
        scroller:       true
    });*/

    // enable the excel button
    $('#btnExportExcel').on('click', function(e){
        e.preventDefault();
        let TableSource = document.getElementById('tblReport');
        var today = new Date();
        var dd = today.getDate();
        var mm = today.getMonth()+1; //January is 0!
        var yyyy = today.getFullYear();
        if(dd<10) {
            dd = '0'+dd
        }
        if(mm<10) {
            mm = '0'+mm
        }
        today = yyyy + '-' + mm + '/' + dd;
        GenerateXLSX(TableSource, true, resp.ReportName + '-' + today + ".xlsx")
    });
}