Performance Optimization And Application Of Web Front End Based On Improved Diff Algorithm

In recent years, with the development and popularization of mobile devices, mobile Internet has become the hero of the development of Internet. However, the mobile Web application represented by HTML5 is still in the primary stage, and the standard is constantly evolving and improving. When the user selects a product, he or she will usually choose the product that responds quickly and interacts perfectly. Therefore, it is necessary to optimize the performance of Web applications in order to speed up the reaction of web page and to provide the user with better using experience. The performance optimization of Web application is divided into two parts:front-end and back-end. The current situation is that the performance optimization of back-end has been fully developed, while the performance optimization of front-end has not been paid the same attention, so there is still huge space for optimization. This paper is committed to the performance optimization of the front end of Web application, that is, to improve the overall performance of Web application as far as possible without changing the Web application architecture or changing the back-end database design and back-end code.This paper mainly does the following work:Firstly, this paper introduces the background of the performance optimization of Web front end, domestic and foreign research situation, and then explains the necessity of the performance optimization of front end. Then the working process of the Web front-end, from the HTTP protocol to the Web browser working mechanism, as well as the particularity of the development of mobile are respectively introduced and analyzed. Focusing on the performance optimization direction, this paper will start from the browser-related characteristics, and then analyze characteristics of program language, browser caches usage, CDN acceleration, picture optimization. The main optimization direction is CPU and memory, and then combining with the particularity of the mobile development, this paper will introduce a targeted mobile Web front-end performance optimization program.Secondly, make further optimization to the Virtual DOM differentiation algorithm (diff algorithm). In the year of 2015, the most popular front-end technology is the open source project React launched by Facebook company. React puts forward a brand new concept called virtual DOM, wich optimizes the diff algorithm of DOM, thereby enhancing the comparative speed of the DOM tree. From the point of view of the application of algorithm, React achieves the landing of diff algorithm in the web front end. By changing the flow and rules of diff, the contrast efficiency can be greatly improved. On this basis, this paper further adjust the algorithm flow and add the relevant rules in order to further optimize the algorithm and also to show the effectiveness of the optimization. Thirdly, design and implement the web front end performance monitoring system, which can monitor the real-time web application status, obtain those application performance parameters and also user operation information, such as first screen loading time, white screen time, users allowed operation time, page resource’s effectiveness and so on, in order to monitor the web application performance and quality, meanwhile, the system can also monitor users’ behavior so as to provide reliable data to ensure the late optimization of the product.