Technical Performance Comparison of Modern Frontend Frameworks Study on Svelte, React, and Vue

Abstrak

This research aims to analyze and compare the technical performance of three of the most widely used modern frontend frameworks, namely Svelte, React, and Vue. These frameworks are popular among developers for building responsive, efficient, and maintainable user interfaces. Using a systematic and controlled experimental approach, we developed identical simple web applications on each of the three frameworks to ensure fairness in comparison. The evaluation focused on four key performance metrics: rendering time, bundle size, memory usage during idle, and DOM operation efficiency.

The experiments were conducted using a desktop computer equipped with an AMD Ryzen 5 5600X processor, 32 GB of RAM, and the Firefox browser running on the Ubuntu 22.04 LTS operating system. The results revealed that Svelte consistently outperformed React and Vue in all measured aspects. It achieved the fastest rendering time at 110 milliseconds, the smallest bundle size of 22 KB, the lowest idle memory usage at 7.8 MB, and the most efficient DOM operation with only one operation per action. React and Vue, although still considered performant, showed slower rendering times of 170 ms and 140 ms, respectively, along with larger bundle sizes and higher memory usage.

Svelte’s superior performance is largely due to its compiler-based architecture, which transforms components into highly optimized vanilla JavaScript without relying on a virtual DOM or heavy runtime. This study provides valuable insights for developers and decision-makers in selecting the most technically efficient frontend framework for high-performance web applications.