CAJ | 학술논문

针对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％。
침대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％。
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%.