Design And Implementation Of Front-end Optimization Based On Ctrip's On Sale Project

With the continuous development of Web technology,users put forward new demands on the performance of Internet products.As the closest part to the users,web page is no longer just a display platform for static files,it provides users with richer content and smoother interaction style.According to statistics,for every 1 second increase in waiting time,some users will leave the page.For enterprises,the loss of users will result in a decline in the rate of orders,which directly affects the company's revenue.In order to meet the users' needs for high-quality websites and business' s demand for conversion rate,the performance of front-end based on the Ctrip Travel APP's on sale project has been optimized.The original project was tested to find out several prominent page performance problems.In order to better measure these problems,indicators such as white screen time and scroll frame rate were proposed to quantitatively analyze the problem and data was collected before optimization.According to the requirements of software engineering,performance optimization method was designed.For speeding up the rendering of the home page,such approches as isomorphism of front-end and back-end,Node middle layer,static resource optimization and on-demand loading was proposed to accomplish the goal actually.From the perspective of humanization,skeleton page was designed to improve the uses' perception of speed.For the optimization of scrolling fluency,methods such as lazy loading,throttling function and node off-line were designed to improve the scrolling fluency of long pages.For file updates,incremental update method was designed to reduce unnecessary file transfers.The on sale project was tested by designing the internal test method and the online AB test method.The gray release form was used to collect user's usage data.These data were sampled for statistics and analysis.At last,the results after performance optimizationwere obtained.According to the results of data comparison,the optimization methods were proved to be operable and practical.