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

RESEARCH OF OPTIMIZATION FOR WEB FRONT-END PERFORMANCE BASED ON VIRTUAL DOM

作　　者：戴志诚[1] 程劲草 

机构地区：[1]华中师范大学国家数字化学习工程技术研究中心,湖北武汉430079

出　　处：《计算机应用与软件》2017年第12期21-25,31,共6页Computer Applications and Software

基　　金：国家科技支撑计划子课题(2015BAH33F0202)

摘　　要：随着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.

关 键 词：Web前端性能优化 虚拟DOM Diff算法 ReactJS 

分 类 号：TP302.7[自动化与计算机技术—计算机系统结构]