饿了么表格性能优化
💡
原文中文，约500字，阅读约需1分钟。
📝
内容提要
饿了么发现使用固定列时会导致冗余DOM，最近发现可以使用position: sticky来解决这个问题。实现思路是给表头表体表尾增加固定列类名，计算每个固定列的偏移值，并在拖拽表头时重新计算偏移值。缺陷是不能有间隔。通过粘性布局处理固定列，性能好且不影响以前的功能。
🎯
关键要点
- 饿了么表格性能问题主要源于使用固定列时产生的冗余DOM。
- 冗余DOM随着数据量增加而增多，影响性能。
- 使用position: sticky可以优化固定列的实现，避免冗余DOM。
- 实现思路包括判断固定列、增加类名、计算偏移值和拖拽时重新计算偏移值。
- 固定列设置时的缺陷是中间不能有间隔，避免克隆。
- 通过粘性布局处理固定列，性能提升且不影响现有功能。
- 参考文章提到的思路可以进一步提升Table组件性能。
🏷️
标签
➡️
