Performance Tradeoffs Between Diff Computation and Node Movement in Frontend Long List Updates

Abstract

Long list reordering is common in administrative interfaces, dashboards, and online editors. Performance discussions often focus on adding, removing, and moving Document Object Model (DOM) nodes, while overlooking the additional computation required to reduce node movements. This study develops an approximate cost model that separates diff computation, node changes, and browser rendering. JavaScript microbenchmarks compare a sequential greedy strategy with a longest increasing subsequence (LIS) strategy, using the operation count for full reconstruction as a reference. The experiment covers three list sizes and four permutation scenarios, with 15 warm-up rounds followed by 40 measured rounds for each condition. When the final item moves to the front, LIS substantially reduces the modeled number of movements. For complete reversal, both strategies produce the same movement count. For the fixed-seed random permutation tested here, LIS incurs greater computation time while providing a relatively small reduction in movements. Fewer modeled movements therefore do not necessarily imply a faster overall update. Practical strategy selection must account for update patterns, the actual cost of moving nodes, and the number of nodes rendered on the page. The experiment does not manipulate a browser DOM or measure interaction latency, so its implications for real interfaces require browser-based validation. The results provide a reproducible reference for algorithmic tradeoffs rather than evidence that either strategy universally improves user experience.