The Practice On Front-end Optimization Base On Internet Hospital Project

With the outbreak of COVID-19,the number of patients that hospitals need to treat has increased dramatically,putting great pressure on the relevant medical system.As the COVID-19 is highly contagious,some people are afraid to go to hospital and cannot receive timely medical treatment if they fall ill.Under such circumstances,Internet hospitals develop rapidly and relieve the pressure of physical hospitals to a large extent.With the development of Web technology,people demand for Web site is more than just a fully functional Web pages,but the need for fast,high level of service and experience.According to relevant research,when the page load time is more than 5 seconds,about 50%of users will choose to exit the current page.Therefore,for online hospitals,in order to better improve user experience and retain more users,they must pay more attention to the performance of Web sites and improve the performance of Web sites.Firstly,the design and practice of the Internet hospital project are briefly introduced.And React is used as the front-end development framework of the project to realize the login registration module,personal center module,intelligent consultation module,online consultation module and other rich functions.Secondly,combining with related Web front-end work mechanism and the Internet hospital problems appeared in the process of project running,find two performance problems that exist in the current project:page load performance problems and memory leak problem.Page loading performance problems are mainly reflected in long page loading time.In order to improve the loading speed of the first screen,the performance optimization schemes such as lazy loading of images,lazy loading of routes and server rendering technology are proposed.As for the memory leak problem,it is mainly reflected in the large increase of memory usage during operation.This paper proposes to develop a detection plug-in specifically for the characteristics of the current leak problem,which can detect the source code before the project runs to avoid similar memory leak problems again.Finally,the performance optimization scheme was applied to the Internet hospital project,test before and after optimization,the results will be in the form of table or bar chart data visualization display.Apply the optimization scheme to the original Internet hospital project,then formulate measurement indicators and test steps for performance problems in the project,conduct optimization tests according to the test steps,collect and sort out the test results,and finally analyze the data in the form of tables or histograms.For the page loading performance problem,the first screen loading time within 5 seconds after the optimization is improved by 26%compared with that before the optimization after the application of server rendering,image lazy loading and route lazy loading optimization schemes;as for memory leaks,after the detection of the memory leak plug-in,the problem of a large increase in memory usage due to memory leaks is avoided.