如何在调整表大小时减少DOM重绘的数量？

Question

我有一个调整功能的表.实际上,它不是一个<table>元素.我使用<div>元素集群.简而言之,我的resizing函数是一个嵌套的'for'循环.它是这样的:

function resizeTable (computedCellWidth) {
    for (var r = 0; r < rows.length; r++) {
        for (var c = 0; c < rows[r].cells.length; c++) {
            rows[r].cells[c].domNode.style.width = computedCellWidth + 'px';
        }
    }
}

据我了解,每个都会rows[r].cells[c].domNode.style.width = computedCellWidth + 'px';导致重写完整的文档.因此,如果表足够大,那么表调整大小会极大地降低浏览器的速度.

我试图使用限制(100毫秒)来减少调整大小事件的数量,但如果一个表足够大,那么即使一次调整大小也需要花费太多时间.

我可以width先分配所有属性,并且只有在启动单个重绘后才能分配吗？

Answer 1

从您共享的代码片段来看，我怀疑您正在避免使用 jquery...但幸运的是，这正是 jquery 所擅长的；DOM 操作。

我不知道你的“表格”的调整大小事件是如何触发的...（鼠标拖动？窗口调整大小？容器更改？）；

如果我是你，我就会这样处理这件事。

1. 用类名标记“table”（最外层的 div），例如.draggable-table。还将“行”标记为.row或.tr，将单元格标记为.cell或.td；

2. 编写以下事件处理程序：

   function resizeTable(computedCellWidth){
       $('.draggable-table .td').css('width', computedCellWidth+'px');
   }
   

我没有看过 jquery 如何实现它的内部原理，但我确信它是一种有效的方式，比嵌套循环快得多。

如果您根本不使用 jquery，如果您经常处理 DOM，那么您确实应该使用 jquery。如果您担心它会增加项目的大小，请使用 CDN，您会受益于这样一个事实：从用户第一次访问您的网站时，它可能已经缓存在用户的浏览器中。