摘要
随着Web前端的不断发展,Web页面变得越来越复杂,强交互性带来页面状态的疯涨,用于更新页面的DOM操作也越来越多。然而频繁的DOM操作使得页面渲染缓慢,造成前端性能瓶颈。在分析造成此问题原因的基础上,介绍一种由虚拟DOM和Diff算法来优化DOM操作的方法。通过分析传统Tree-Diff与DOM-Diff算法,对现有Diff算法做出改进。最后搭建测试平台,对改进后算法(Virtual-DOM)、React JS以及原生JS进行渲染性能测试,并对测试结果进行对比分析。测试结果表明:虚拟DOM确实可以优化浏览器的渲染性能,且在特定的情况下,DOM-Diff改进算法效果比React JS更理想。
With the constant development of the web front-end, interaction leads to a crazy rise in page status. DOM operation for u web page has become more complex. Strong pdating 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 DOM- Diff algorithm is better than React.IS.
出处
《计算机应用与软件》
2017年第12期21-25,31,共6页
Computer Applications and Software
基金
国家科技支撑计划子课题(2015BAH33F0202)
