QUANTITATIVE STUDY ON VIRTUAL DOM DIFF PERFORMANCE WITH DIFFERENT KEY ATTRIBUTE USAGE: A CASE OF VUE.JS

Abstract

As the complexity of modern web applications continues to grow, frontend performance has become a critical factor influencing user experience. Vue.js, as a mainstream framework, has gained widespread adoption thanks to its MVVM framework model and virtual DOM technology. Its Diff algorithm minimizes operations to update the real DOM, significantly improving page response efficiency. As the unique identifier for virtual nodes, the key attribute directly influences the Diff algorithm's node matching and reuse strategies, thereby impacting rendering performance. While extensive research has focused on performance comparisons of frontend frameworks, there remains a lack of systematic empirical analysis on the performance implications of Vue.js's internal key attribute usage (unique ID, index, or none) across different scenarios. This paper conducts a quantitative study using Vue 2.0 as the platform, constructs three typical pages (simple page, high-frequency large-data list page, and nested structure page), and builds a minimum-maximum inverse normalization and linear weighted scoring model to analyze overall performance. Additionally, by combining analysis of variance (ANOVA) and Tukey post-hoc tests, the performance differences under different settings are statistically validated. The research results indicate that in complex high-data-volume pages and nested page scenarios, selecting a unique ID as the key attribute can effectively improve page rendering performance, providing theoretical and practical support for front-end performance optimization.