基于虚拟DOM的Web前端性能优化研究

摘要

With the constant development of the web front-end,web page has become more complex.Strong interaction leads to a crazy rise in page status.DOM operation for updating the page will also increase.However,frequent DOM operation makes slow page rendering,resulting in front-end performance bottlenecks.Therefore,based on the analysis of the causes of this problem,a method of optimizing DOM operation by virtual DOM and Diff algorithm was introduced.Moreover,by analyzing the traditional Tree-Diff and DOM-Diff algorithm,the existing Diff algorithm was improved.Finally,a test platform was built to test the rendering performance of the improved algorithm (Virtual-DOM),ReactJS and native JS,and the test results were compared and analyzed.The experimental results show that the virtual DOM can really optimize the rendering performance of the browser.And in certain circumstances,the improved DOMDiff algorithm is better than ReactJS.%随着Web前端的不断发展,Web页面变得越来越复杂,强交互性带来页面状态的疯涨,用于更新页面的DOM操作也越来越多.然而频繁的DOM操作使得页面渲染缓慢,造成前端性能瓶颈.在分析造成此问题原因的基础上,介绍一种由虚拟DOM和Diff算法来优化DOM操作的方法.通过分析传统Tree-Diff与DOM-Diff算法,对现有Diff算法做出改进.最后搭建测试平台,对改进后算法(Virtual-DOM)、ReactJS以及原生JS进行渲染性能测试,并对测试结果进行对比分析.测试结果表明:虚拟DOM确实可以优化浏览器的渲染性能,且在特定的情况下,DOM-Diff改进算法效果比ReactJS更理想.