将 html 加载到 DOM 时在浏览器上显示数据

Question

我在将 html 数据加载到 DOM 时遇到问题。当数据加载时，它会完全阻塞浏览器，用户需要一直等待，直到整个数据加载到 DOM 上，然后浏览器才会显示数据。

我正在寻找同时加载和显示数据，而不是长时间等待显示数据。我的代码如下所示...

<div class="row">
    <div class="col s12" id="tabdata">
    </div>
</div>

<script>
            $.ajax({
            type: $('#testform').attr('method'),
            url: $('#testform').attr('action'),
            data: $('#testform').serialize(),
            success: function (response) {
                $('#tabdata').html(response)
</script>

根据上面的代码返回的 HTML 响应是一个表格标记，如下所示...

<table id="table_id" class="striped hoverable responsive-table centered">
<thead><tr><th>Cluster</th><th>vserver</th><th>policyname</th><th>ruleindex</th><th>protocol</th><th>clientmatch</th><th>rorule</th><th>rwrule</th><th>anon</th><th>superuser</th><th>allow-suid</th><th>allow-dev</th></tr></thead>
<tr><td>pl-cis-claa-p01</td><td>colooracle-p0043</td><td>AI205256_fnr_lab644d_7_n01oraarch1_nosnap</td><td>1</td><td>nfs3</td><td>c22rphcorl.int.refinitiv.com</td><td>sys</td><td>sys</td><td>65534</td><td>sys</td><td>true</td><td>true</td></tr>
<tr><td>pl-cis-claa-p01</td><td>colooracle-p0043</td><td>AI205256_fnr_lab644d_7_n01oraarch1_nosnap</td><td>2</td><td>nfs3</td><td>c306nfn.int.thomsonreuters.com</td><td>sys</td><td>sys</td><td>65534</td><td>sys</td><td>true</td><td>true</td></tr>
<tr><td>pl-cis-claa-p01</td><td>colooracle-p0043</td><td>AI205256_fnr_lab644d_7_n01oraarch1_nosnap</td><td>3</td><td>nfs3</td><td>c306nfn.int.thomsonreuters.com</td><td>sys</td><td>sys</td><td>65534</td><td>sys</td><td>true</td><td>true</td></tr>
<tr><td>pl-cis-claa-p01</td><td>colooracle-p0043</td><td>AI205256_fnr_lab644d_7_n01oraarch1_nosnap</td><td>4</td><td>nfs3</td><td>c306nfn.int.thomsonreuters.com</td><td>sys</td><td>sys</td><td>65534</td><td>sys</td><td>true</td><td>true</td></tr>
<tr><td>pl-cis-claa-p01</td><td>colooracle-p0043</td><td>AI205256_fnr_lab644d_7_n01oraarch1_nosnap</td><td>5</td><td>nfs3</td><td>c306nfn.int.thomsonreuters.com</td><td>sys</td><td>sys</td><td>65534</td><td>sys</td><td>true</td><td>true</td></tr>
..............
..............
......... (Around 20k rows)
</table>

该表格标记可以有大约 20K 行...我刚刚提到了一个示例简单性..

如果有人能建议一种在数据加载到 DOM 时同时显示这些数据的方法，那就太好了

提前致谢！