表格这玩意儿，是怎么越搞越复杂的

1995 年原始的 HTML 表格网页里只有table、tr、td。后台系统还没出现表格就是用来展示一些静态数据的。tableborder1trtd张三/tdtd90/td/trtrtd李四/tdtd85/td/tr/table没有任何高级名词一切都赤裸裸的 DOM。2005 年数据变多了手写 HTML 行不通了痛点后台系统需要展示 500 条员工记录手写 500 行tr不现实。解决方案用 JavaScript 循环数组动态生成 DOM。constdata[/* 500 条数据 */];consttbodydocument.querySelector(tbody);data.forEach(item{consttrdocument.createElement(tr);tr.innerHTMLtd${item.name}/tdtd${item.score}/td;tbody.appendChild(tr);});出现的概念数据驱动渲染。表格不再是静态的而是由数据生成的。2010 年列太多横向滚动时关键列消失了痛点员工表有 30 列屏幕只能显示 10 列。用户向右滚动时最左边的“姓名”列滚出了视野导致不知道每一行是谁的工资。尝试用 CSS 解决position: sticky。但当时浏览器支持差而且一旦表头有合并单元格sticky 的计算经常错位。最终方案多表叠加渲染三张独立的表格。具体怎么做左侧固定表格只包含需要固定的列比如姓名宽度固定绝对定位在左边禁止横向滚动。右侧固定表格只包含右侧需要固定的列比如操作列绝对定位在右边。中间滚动表格包含所有列宽度设为所有列宽之和放在一个overflow-x: auto的容器里。垂直滚动同步用户滚动中间表格的垂直滚动条时通过 JS 将scrollTop值同步设置给左右两张固定表格的容器。// 监听中间表格的滚动容器middleWrapper.addEventListener(scroll,(){constscrollTopmiddleWrapper.scrollTop;leftWrapper.scrollTopscrollTop;rightWrapper.scrollTopscrollTop;});行高对齐因为三张表格独立渲染同一行的高度可能因为内容不同而不一致。所以需要在每次渲染后用ResizeObserver或getBoundingClientRect获取每一行的真实高度然后强制同步三张表中对应行的高度。// 简化的对齐逻辑获取所有行高取最大值应用到三张表的对应行constleftRowsleftTable.querySelectorAll(tr);constmiddleRowsmiddleTable.querySelectorAll(tr);for(leti0;ileftRows.length;i){constmaxHeightMath.max(leftRows[i].getBoundingClientRect().height,middleRows[i].getBoundingClientRect().height);leftRows[i].style.heightmaxHeightpx;middleRows[i].style.heightmaxHeightpx;}出现的新名词固定列Fixed Columns、多表叠加、滚动同步、行高对齐。2015 年数据量爆炸一次性渲染 10 万行直接卡死痛点运营需要查看 10 万条日志。如果用 2005 年的循环渲染方法浏览器会生成 10 万个tr节点内存占用数百 MB页面直接白屏或卡死。解决方案虚拟滚动Virtual Scrolling。核心思想既然用户屏幕一次只能看到 30 行那我就只渲染这 30 行其余的行用两个空白的tr占位撑出滚动条的高度。具体实现步骤以定高模式为例设定固定行高比如每行高度rowHeight 48像素。计算可视区能容纳的行数constvisibleCountMath.ceil(container.clientHeight/rowHeight);监听滚动事件计算起始索引constscrollTopcontainer.scrollTop;conststartIndexMath.floor(scrollTop/rowHeight);constendIndexstartIndexvisibleCount;只渲染startIndex到endIndex的数据。用占位行撑开滚动条高度在渲染的真实行上方放一个tr其高度为startIndex * rowHeight。在真实行下方放一个tr其高度为(totalCount - endIndex) * rowHeight。这样滚动条的总高度等于totalCount * rowHeight用户感觉就像真的滚动了 10 万行但实际上浏览器里只有 30 多个tr。出现的新名词虚拟滚动、视口裁剪、起始索引、占位行。2018 年表头需要像 Excel 一样多层嵌套痛点财务要求表头为“2024 年第一季度”下面分“1月”、“2月”、“3月”每月再分“收入”、“支出”。如果用原生th手动写colspan和rowspan不仅计算繁琐而且一旦列顺序调整所有合并数字都要重算。解决方案列配置树 自动计算跨度。只需用嵌套标签描述表头结构组件内部自动算出每个th的colspan和rowspan。具体算法将嵌套的列配置拍平为一维数组深度优先遍历 DFS同时记录每个节点的层级level。自底向上计算colspan叶子节点没有子列的colspan 1。父节点的colspan 其所有子节点colspan之和。递归实现从最深层往回算。自顶向下计算rowspan先算出整棵树的最大深度maxDepth。叶子节点的rowspan maxDepth - 当前层级。非叶子节点的rowspan 1。生成表头二维网格创建一个maxDepth行的二维数组根据每个节点的level、colspan、rowspan放入对应位置并用一个occupied布尔数组标记已被合并占用的格子避免重复放置。出现的新名词多级表头、深度优先遍历DFS、自底向上/自顶向下计算、占位标记。2020 年跨页全选的带宽和内存危机痛点用户想全选所有“已离职”员工共 5000 人并发送问卷。初级做法是把 5000 个 ID 全传到前端存储。如果数据是 50 万呢内存和带宽都会爆炸。解决方案差量状态管理只存例外。具体做法前端状态设计interfaceSelectState{mode:none|page|all;// 全选模式filters:Recordstring,any;// 当前筛选条件total:number;// 符合条件的总数据量exceptions:Setnumber;// 取消勾选的 ID 集合}用户点击全选时设置mode all记录当前filters清空exceptions。用户手动取消某行ID123时exceptions.add(123)。提交给后端的数据结构{operation:delete,scope:filtered,filters:{status:离职},excludeIds:[123,456]}后端直接执行 SQLDELETEFROMusersWHEREstatus离职ANDidNOTIN(123,456);带宽消耗从传输 5000 个 ID约 100KB降为几十字节。出现的新名词跨页全选、差量状态管理、例外集合、条件批量操作。总结表格技术演进地图时间痛点解决方案核心名词1995无静态展示table标签DOM2005数据量大手写 HTML 繁琐JS 循环生成 DOM数据驱动2010列太多横向滚动丢失上下文三张表格叠加 滚动同步固定列、多表叠加2015数据量极大10 万渲染卡死只渲染可视区 占位行虚拟滚动、视口裁剪2018表头复杂手动计算跨度易错树形配置 自动计算 colspan/rowspan多级表头、DFS 拍平2020跨页全选大数据量时带宽内存爆炸差量状态管理只传例外集合跨页全选、差量模式