Research And Implementation Of Rendering Optimization Of Front-End Framework Based On MVVM Mode

The rapid development of WEB related technologies has promoted the wide application of front-end MVVM framework.MVVM framework realizes bidirectional binding between data and views,so that users do not need to manually update views,thus improving development efficiency and user experience.This paper takes Nodom2 as the research object.After absorbing the advantages of React and Vue,the rendering performance of Nodom2 framework is optimized.This paper firstly analyzes the design principle and rendering process of the current front-end MVVM mode framework at home and abroad,and finds out the problems existing in Nodom2’s rendering performance.It mainly includes the following aspects:(1)Data response processing based on define Property requires deep processing of data,leading to low efficiency.Meanwhile,there are redundant codes in the component rendering process;(2)There are XSS attack risks and running efficiency problems in the expression parsing mode;(3)Using the traditional DIFF algorithm to compare virtual DOM trees,the time complexity is O(n3),the algorithm efficiency is low;(4)Too large volume after modular source code packaging increases the loading time of resources.At the same time,it does not support Tree Shaking and code segmentation and other packaging optimization technologies;(5)The routing component does not support lazy loading,which affects the first screen rendering time.To solve the above problems,this paper carried out comprehensive multidimensional code-level optimization on Nodom2,mainly including the following aspects:(1)Proxy instead of define Property to implement data response,using asynchronous component update,change the template compilation method and other mechanisms to optimize the component rendering process,improve the framework rendering performance;(2)Using Function constructor instead of eval function to parse expressions,regular matching and other methods to optimize expression parsing process,improve operation efficiency and prevent XSS attacks;(3)The DIFF algorithm was optimized,and the time complexity of the original DIFF algorithm was reduced to O(n)by combining the abstract DOM operation flow with the virtual DOM cache mode.(4)Using compression code volume,Tree Shaking technology to remove useless code,code segmentation technology to load modules on demand and other technical means,reducing the volume of source code packaging and resource loading time;(5)Support for lazy loading of routing components,dynamic import of component files when routes are matched,and reduce the first screen rendering time.Finally,the optimized Nodom3 was used to perform detailed rendering performance tests against Nodom2 and Vue3,the mainstream MVVM mode framework.Experimental results show that the rendering performance of Nodom3 framework after applying the rendering performance optimization method proposed in this paper is significantly improved compared with that of Nodom2 in multiple experimental scenarios,and exceeds that of Vue3 in some scenarios.This study has a good reference significance for the development of front-end MVVM mode framework and optimization of rendering performance.