W eb前端性能优化方案与实践

摘要

Aiming at the poor performance of Web front-end, we put forward systematically a complete Web front-end performance optimisation solution with strong integrity and universality targeted at increasing webpages loading speed, rendering speed and user experience by analysing and generalising the principles of B/S frameworks from rear-end to front-end in Web, the browser cache, the browser loading means, and the factors that affect the front-end performance optimisation in server configuration in regard to HTTP and other processes.The solution includes server-side optimisation, HTML optimisation, JavaScript optimisation, CSS optimisation, image optimisation and so on.In slow network speed of 512KB built by HTTP proxy tool Fiddler, we monitor the UI Thread through SpeedTracer, and look for the bottleneck of front performance in ordering webpage of“fingertips ordering system”, a Web mobile e-commerce project based on HTML5 technology, and carry out the optimisation practice according to the proposed solution.Comparative analyses of Timeline and UI thread before and after the optimisation show that when optimised, the loading time reduces by 82%, the page rendering by 32%, and the script execution by 79%.%针对Web前端性能低下的问题，通过分析归纳Web中从后端到前端的B／S架构原理、浏览器缓存、浏览器的加载方式、服务器关于HTTP相关的配置等过程中一些影响前端性能优化的因素，系统地提出一个旨在提高网页加载速度、呈现速度和用户体验，整体性、通用性强的完整Web前端性能优化解决方案。该解决方案包括服务器端优化、HTML优化、JavaScript优化、CSS优化、图片优化等内容。并在HTTP代理工具Fiddler搭建的512 KB慢网速下通过SpeedTracer监测UI Thread，寻找基于HTML5技术的Web移动电子商务项目“指尖点餐系统”的点餐页面前端性能中的瓶颈，根据所提出的Web前端性能优化解决方案对其进行优化实践。优化前后的Timeline以及UI Thread对比分析表明，优化后加载时间降低了82％，页面渲染降低了32％，脚本执行减少了79％。