Performance Optimization And Evaluation Of Web Front-End Based On Diff Algorithm

Web applications are becoming more and more important in the Hybrid APP.However,compared with Native applications,Web applications open slowly and interact slowly.The purpose of this thesis is to improve the loading and rendering performance of Web applications,so that Web applications in Hybrid APP have similar performance to Native applications,so as to provide users with a better experience.Traditional static storage implementations mainly use the interface provided by browser,which has capacity limitation and compatibility problems.This thesis proposes an offline and incremental update plugin-in system to store web page static resources locally on the client side,which is used to improve the opening speed of the web application.Traditional incremental packet generation algorithms include Rsync algorithm and edit distance algorithm.The Rsync algorithm has a low complexity but a large incremental packet size,the incremental packet generated by the edit distance algorithm is small in size but high in complexity.In this thesis,a new incremental packet generation algorithm is proposed,which takes advantage of the low complexity of Rsync algorithm and the small volume of incremental packets generated by editing distance algorithm.It improves the efficiency of incremental packet generation when the volume of incremental packets does not increase significantly compared with the editing distance algorithm.React framework uses virtual DOM tree to represent Web pages,and uses React Diff algorithm to calculate the differences between virtual DOM trees and updates Web pages based on the differences.When React Diff algorithm calculates the difference of virtual DOM nodes in the same layer,the results are quite different.In this thesis,the longest common subarray algorithm is proposed,which optimizes Element Diff algorithm used in React framework and saves interactive waiting time.The offline and incremental updating plugin-in system is designed and implemented with modularization idea,and its function and performance are tested.This plugin-in system realizes the static resource local storage of the page,and no resource requests are sent to the server when the page is accessed again,this reduces the request wait time by 59%.When updating the resource version,the incremental package used in the incremental updating accounted for 20%to 30%of the total volume of the resource,and achieved 48.6%increase in loading speed.After applying the longest common subarray algorithm to the React framework,it saves 5%of the page interaction waiting time.