Design And Implementation Of A WEB Front-end Editor Based On Virtual DOM

With the vigorous development of the Internet and technological innovation,human society has entered the information age.Now,there are too many to count the Internet users get all kinds of information through the Internet every day,and as an important window to connect people with the Internet,every day the front-end of the web field also need to have many web-pages,therefore,the demand for the efficiency of creating web-pages is also put forward higher requirements.However,it is the current field,most still rely on Web front-end engineers manual programming,and most of them are the page which is display type and single function and write that requires a lot of time,but this situation cannot give full play to the artificial flexibility and creativity,which caused a serious waste of human resources.In order to deal with the contradiction between input and output,the industry has put forward the proposal that whether the computer can be used to assist the creation of web pages,and some achievements have been achieved,but it is far from solving the practical problems.In this background,The front-end visual editing system aims to simplify the process of writing web-pages,shielding HTML's detail in a higher level,so that even non-professional engineer can construct satisfactory web-page by some simple operation,thus greatly reduce labor costs.Before explain the system's details,The development history of the web front-end,and the background,significance and research status of the front-end visual editing field will be introduced;then,how to re-modeling and shielding some complex technical detail in a certain degree,and HTML's document-flow structure,CSS model and other major technical points will be explain;the finally,on the basis of research results,there are a front-end editing prototype system based on virtual DOM,and show the actual effect.The prototype contains functions such as page editing,preview,generating,and so on.In this system,a large number of DOM tree queries and traversal are often involved.In order to achieve more efficient,the system uses the virtual DOM tree to operate DOM.After testing,compared with the direct coding,the efficiency of using the prototype system to build web pages has been significantly improved,which proves the feasibility and superiority of the front-end visual editing system.