分页切换闪烁本质是layui.table重绘tbody时未批量操作且浏览器强制同步layout所致；需关闭loading和autoResize，用done回调配合DocumentFragment批量插入，并设置table-layout:fixed及显式列宽。
快速切换分页时表格闪烁，本质是 layui.table 在重绘 tbody 时未做 DOM 批量操作 + 浏览器强制同步 layout 导致的视觉抖动；必须关掉默认 loading、禁用 autoResize、用 done 回调接管 tbody 插入，并配合 table-layout: fixed。
为什么分页切换会闪：不是网络慢，是重绘失控
分页切换（比如点“下一页”）触发的是 table.reload()，但 layui 默认行为是：清空整个 tbody → 逐行拼 HTML 字符串 → 逐个 appendChild → 触发多次回流。哪怕只有 50 行，浏览器也会反复计算布局，肉眼就能看到“白一下→跳一下→稳住”。这和接口响应快慢无关，纯属前端渲染策略问题。
- loading: true 默认动画本身就会插入/移除 DOM，和真实渲染抢资源
- autoResize: true 在分页时也会被误触发，导致列宽重算抖动
- 没设
table-layout: fixed时，浏览器要根据内容动态撑开每列，宽度来回跳
done 回调里用 DocumentFragment 批量插入 tbody
别依赖 layui 自动拼 tbody，把控制权拿回来。在 done 回调中手动清空、批量构建、一次挂载：
table.render({
elem: '#demo',
url: '/api/list',
page: true,
height: 400,
loading: false, // 关掉默认 loading
autoResize: false, // 关掉自动重算列宽
done: function(res, curr, count) {
const tbody = this.elem.next('.layui-table-box').find('tbody');
tbody.empty();
const frag = document.createDocumentFragment();
res.data.forEach(row => {
const tr = document.createElement('tr');
tr.innerHTML = `<td>${row.id}</td><td>${row.name}</td>`;
frag.appendChild(tr);
});
tbody[0].appendChild(frag); // 仅一次 DOM 操作
}
});
- 必须设
loading: false，否则它和你手写的 frag 插入会竞争 -
tbody.empty()要在 frag 构建前执行，避免残留占位节点 - 不要在
done里用$().html()或循环.append()，那等于回到老路
表格容器和 table 元素必须加 CSS 约束
光改 JS 不够，CSS 层面不稳，JS 再优化也压不住抖动：
- 给表格外层容器（如
div.layui-table）设min-width: 800px（按实际列数调） - 给
table元素加style="table-layout: fixed; width: 100%;" - 所有列显式设
width（如{field:'name', width:200}），或至少设minWidth - IE11 下务必加
table-layout: fixed，否则 JS 测宽完全不准
容易被忽略的点：闪烁是叠加效应，单改一项大概率无效
你看到的“一闪”，通常是 loading: true 动画 + autoResize: true 列宽重算 + table-layout: auto 动态撑列 + done 里逐行插入 —— 四者同时发生的结果。修复时得四件套一起上，漏掉任意一个，抖动就还在。特别是后端返回数据字段名和前端 field 对不上时，layui 会静默跳过该列，导致列宽错乱，这个坑很难 debug。
