Web前端性能优化方案与实践.pdfVIP

第31卷第 12期 计算机应用与软件 V01．3I No．12 2014年 12月 ComputerApplicationsandSoftware Dec．2014 Web前端性能优化方案与实践 王 成 李少元 郑黎晓 缑 锦 曾梅琴 刘慧敏 (华侨大学计算机科学与技术学院 福建 厦门362021) 摘 要 针对Web前端性能低下的问题，通过分析归纳Web中从后端到前端的B／S架构原理、浏览器缓存、浏览器的加载方式、 服务器关于HTrP相关的配置等过程中一些影响前端性能优化的因素，系统地提出一个 旨在提高网页加载速度、呈现速度和用户体 验，整体性、通用性强的完整Web前端性能优化解决方案。该解决方案包括服务器端优化、HTML优化,JavaScript优化、CSS优化、 图片优化等内容。并在HI]rP代理工具Fiddler搭建的512KB慢网速下通过SpeedTracer监测UIThread，寻找基于HTML5技术的 Web移动电子商务项 目“指尖点餐系统”的点餐页面前端性能中的瓶颈，根据所提出的Web前端性能优化解决方案对其进行优化实 践。优化前后的Timeline以及UIThread对比分析表明，优化后加载时间降低 了82％，页面渲染降低 了32％，脚本执行减少了79％。 关键词 Web前端性能优化 服务器端优化 HTML优化 JavaScript优化 CSS优化 图片优化 前端测试环境 TimeLine UIThread 中图分类号 TP302．7 文献标识码 A DOI：10．3969／j．issn．1000．386x．2014．12．021 oPTIMISATIoN SCHEME FoR W EB FRoNT．END PERFoRMANCEAND ITSPRACTICE WangCheng LiShaoyuan ZhengLixiao GouJin ZengMeiqin LiuHuimin (CollegeofComputerScienceandTechnology，HuaqiaoUniversity，Xiamen362021，Fujian，China) Abstract Aimingatthe poorperformanceofWeb front—end，we putforward systematically a completeWeb front-end performance optimisationsolutionwithstrongintegrityanduniversalitytargetedatincreasingwebpagesloadingspeed，renderingspeedanduserexperience byna alysingandgeneralisingtheprinciplesofB／Sframeworksfrom rear-endtofront-endinWeb，thebrowsercache，thebrowserloading mena s．nadthefactorsthataffectthefront．endperfomr anceoptimisationinserverconfigurationinregardtoHITI1Pandotherprocesses．The solutionincludesserver—sideoptimisation，HTMLoptimisation，JavaScriptoptimisation，CSSoptimisation，imageoptimisationandSOon．In slownetworkspeedof512KBbuihbyHrIrrPproxytoolFiddler，wemonitortheUIThreadthroughSpeedTracer，andlookofrthebottleneckof frontperfomrnaceinorderingwebpageof“fingertipsorderingsystem”，aWebmobilee·commerceprojectbasedonHTM