The Implementation On Front-end Optimization Based On MTDP's PinTuan Project

With the rapid development of web,Web sites have gradually evolved from simple pages to feature-rich applications that require more resources such as images,scripts,and style sheets.Google found 53%of mobile site visits were abandoned if a page took longer than 3 seconds to load.The poor performance of websites is one of the important reasons for the loss of users.Therefore,performance is important for the success of the websites.What's more,a report from Yahoo indicates that websites spend between 5%to 38%of the total time downloading the HTML document and data from server,while the remaining 62%to 95%spend in the front-end responsible areas such as HTTP requests,resource loading,page rendering.In the meantime,if the usability of website is poor,it will cause users to be confused and reduce their willingness to use.This thesis is based on real project,studies how to speed up document parsing,increase frames,improve usability and then improves performance and user experience.First,this thesis describes the content and main problems of the original project,and determines the metrics.By measuring the actual test data of the indicators,data support for problem positioning and optimization work is provided.Then,based on the request-response mechanism and rendering principle of the browser,the causes of the problems are analyzed in depth,and on this basis,optimization solutions are provided in terms of the first interactive time of the page and page frames,the optimization method of static resources,the control of resource loading,the application of server-side rendering technology,and the research and implementation of frame optimization are described in detail.In the meantime,the usability of website is optimized from two aspects of interaction and information display.Based on the determined metrics,this thesis tested the project after the optimization was implemented.Through the comparison of the project before and after optimization,the feasibility and effectiveness of optimization are proved.