jQuery DataTables表格加载后延迟2-3秒才渲染如何优化

你遇到的是典型的无样式内容闪烁（FOUC）问题，核心原因是样式加载滞后、DOM初始化顺序不合理、冗余脚本拖慢渲染速度，可通过以下步骤优化：

1. 调整资源加载顺序 #

所有样式资源必须放到页面<head>标签最顶部，优先加载样式避免渲染后再重绘，调整后顺序如下：

<head>
<!-- 先加载第三方CSS -->
<link rel='stylesheet' href='https://cdn.datatables.net/1.11.3/css/jquery.dataTables.min.css'>
<!-- 再加载自定义CSS -->
<style type="text/css">
    table {
        border-collapse: collapse;
        border: none;
        width: 20%;
    }
    th,td {
        border: 1px solid black;
        padding: 2px 8px;
        font-family: Arial, Helvetica, sans-serif;
        font-size: 14px;
        text-align: left;
    }
    th {
        background-color: #C8C8C8;
        cursor: pointer;
        width:100px;
    }
    /* 新增初始隐藏类 */
    .data-table-init {
        display: none;
    }
</style>
<!-- 再加载JS资源 -->
<script src="https://code.jquery.com/jquery-3.5.1.js"></script>
<script src="https://cdn.datatables.net/1.11.3/js/jquery.dataTables.min.js"></script>
</head>

2. 新增初始隐藏逻辑避免闪烁 #

给表格添加初始隐藏类，等DataTables初始化完成后再显示，修改表格和初始化脚本如下：

<!-- 表格添加隐藏类 -->
<table id='example' class='table data-table-init'>
    <thead>
        <tr>
            <th>Stock</th>
            <th>Open</th>
            <th>High</th>
            <th>Low</th>
            <th>Close</th>
            <th>Volume</th>
            <th>Buyers</th>
            <th>Sellers</th>
            <th>Close_open</th>
            <th>Close_high</th>
            <th>high_open</th>
            <th>high_low</th>
        </tr>
    </thead>
    <tbody id="people">
        {% for x,y in info.items %}
        <tr>
            <td scope="row">{{x|split}}</td>
            <td id= 'open{{x}}'>{{y|access_dictionary:'ohlc'|access_dictionary:'open'}}</td>
            <td id='high{{x}}'>{{y|access_dictionary:'ohlc'|access_dictionary:'high'}}</td>
            <td id='low{{x}}'>{{y|access_dictionary:'ohlc'|access_dictionary:'low'}}</td>
            <td id='close{{x}}'>{{y|access_dictionary:'ohlc'|access_dictionary:'close'}}</td>
            <td>{{y|access_dictionary:'volume'}}</td>
            <td id='buyquantity{{x}}'>{{y|access_dictionary:'buy_quantity'}}</td>
            <td id='sellquantity{{x}}'>{{y|access_dictionary:'sell_quantity'}}</td>
            <td id='Close_open{{x}}'></td>
            <td id='Close_high{{x}}'></td>
            <td id='high_open{{x}}'></td>
            <td id='high_low{{x}}'></td>
            <!-- 删除原有行内计算脚本 -->
        </tr>
        {% endfor %}
    </tbody>
</table>
<script>
$(document).ready(function () {
    $('#example').DataTable({
        // 初始化完成后显示表格
        "initComplete": function(settings, json) {
            $('#example').removeClass('data-table-init').show();
        },
        // 把原行内的计算逻辑移到列渲染回调，避免冗余脚本
        "columnDefs": [
            {
                "targets": 8, // Close_open列对应索引（从0开始计数）
                "render": function ( data, type, row, meta ) {
                    let d = parseFloat(row[4]) - parseFloat(row[1]);
                    return Math.round(d * 100)/100;
                }
            },
            {
                "targets": 9, // Close_high列
                "render": function ( data, type, row, meta ) {
                    let e = parseFloat(row[4]) - parseFloat(row[2]);
                    return Math.round(e * 100)/100;
                }
            },
            {
                "targets": 10, // high_open列
                "render": function ( data, type, row, meta ) {
                    let f = parseFloat(row[2]) - parseFloat(row[1]);
                    return Math.round(f * 100)/100;
                }
            },
            {
                "targets": 11, // high_low列
                "render": function ( data, type, row, meta ) {
                    let g = parseFloat(row[2]) - parseFloat(row[3]);
                    return Math.round(g * 100)/100;
                }
            }
        ]
    });
});
</script>

3. 额外优化建议 #

• 大量循环输出的行内脚本会大幅拖慢DOM解析速度，统一移到DataTables的columnDefs渲染回调中处理即可
• 如果表格数据量超过1000行，建议开启DataTables的服务端分页模式，避免一次性渲染大量DOM节点导致卡顿
• 静态资源如果访问速度慢，可将jQuery、DataTables的JS和CSS文件存到本地静态资源服务器，减少CDN网络波动影响

内容的提问来源于stack exchange，提问作者ashish gupta