不能每次点击都从textContent重新取值，因为会误将格式化字符串当原始值导致数字排序错误、触发多余layout计算、NaN使sort行为不可预测；应初始化时提取缓存原始值到rowsData数组，后续仅操作该数组并用DocumentFragment批量更新DOM。
直接用 JavaScript 操作 DOM 实现排序，但必须绕开“读 DOM → 排序 → 写 DOM”这个慢路径；静态数据排序的关键是提前存干净值、用 DocumentFragment 批量更新、避免反复解析文本。
为什么不能每次点击都从 textContent 重新取值
表格里一个 td 可能含图标、空格、货币符号（如 ¥2,500.00）、破折号（—）或空单元格。每次排序都调 cell.textContent.trim() 会：① 把格式化后的字符串当原始值用，导致数字排错（"10" 排在 "2" 前）；② 多次触发浏览器 layout 计算；③ 遇到 undefined 或 null 时 Number() 返回 NaN，让 sort() 行为不可预测。
正确做法是初始化时就提取并缓存原始值：
- 遍历一次
tbody.querySelectorAll('tr')，对每行每列调用清洗函数（比如parseNumber(cell.innerText)或normalizeDate(cell.innerText)） - 把结果存进数组
rowsData，每个元素是对象：{ name: "张三", age: 28, city: "北京" } - 后续所有排序操作只动这个数组，DOM 更新只是渲染快照
sort() 里怎么安全比较数字、日期和中文
别写 a > b 这种裸比较——它走字符串 Unicode 排序，10 成立。必须传比较函数，并分类处理：
立即学习“前端免费学习笔记（深入）”；
- 数字列：
parseFloat(aVal) - parseFloat(bVal)，无效值返回Infinity（升序排最后） - 日期列：先标准化为
YYYY-MM-DD格式再new Date().getTime()，或用Date.parse()+isNaN()容错 - 中文/混合字符串：用
Intl.Collator('zh', { numeric: true }).compare(aVal, bVal)，numeric: true是关键，否则"item2"会排在"item10"后面 - 空值统一处理：
if (aVal == null || bVal == null) return aVal == null ? 1 : -1
DOM 更新时为什么必须用 DocumentFragment
直接循环 tbody.appendChild(row) 或拼 innerHTML 字符串，会导致浏览器每插入一行就重排重绘一次。100 行就是 100 次 layout，卡顿明显。
正确方式是：
- 创建
const frag = document.createDocumentFragment() - 排序后遍历
rowsData，用document.createElement('tr')构建新行并 append 到frag - 最后只执行一次
tbody.replaceChildren(frag)（或tbody.textContent = ''后tbody.append(frag)）
注意：replaceChildren() 是现代 API，IE 不支持；若需兼容，用 while(tbody.firstChild) tbody.removeChild(tbody.firstChild) 清空再 append()。
表头点击事件绑定容易漏掉的细节
监听 table 或 thead 的 click 事件委托，比给每个 th 加 onclick 属性更可靠：
- 用
event.target.closest('th')获取被点中的表头，避免点到th里的文字、图标或 padding 区域拿不到目标 - 必须调
event.preventDefault()，否则th里有a标签时会跳转 - 排序状态存在
th.dataset.sortDirection里，而不是全局变量——多列可同时排序时不会互相覆盖 - 首次点击设为
asc，再次点击切desc，切换前先清除其他th的sorted-asc/sorted-descclass
最常被忽略的是：没在初始化阶段预存原始数据，导致第二次点击时拿的是上次渲染后的 DOM 状态（可能已被格式化或修改），越排越乱。
