b前端性能优化方案与实践分析.PDFVIP

第３１卷第１２期　　　 计算机应用与软件 Ｖｏｌ３１Ｎｏ．１２ ２０１４年１２月　　 ＣｏｍｐｕｔｅｒＡｐｐｌｉｃａｔｉｏｎｓａｎｄＳｏｆｔｗａｒｅ Ｄｅｃ．２０１４ Ｗｅｂ前端性能优化方案与实践 王　成　李少元　郑黎晓　缑　锦　曾梅琴　刘慧敏 （华侨大学计算机科学与技术学院　福建厦门３６２０２１） 摘　要　　针对Ｗｅｂ前端性能低下的问题，通过分析归纳Ｗｅｂ中从后端到前端的Ｂ／Ｓ架构原理、浏览器缓存、浏览器的加载方式、 服务器关于ＨＴＴＰ相关的配置等过程中一些影响前端性能优化的因素，系统地提出一个旨在提高网页加载速度、呈现速度和用户体 验，整体性、通用性强的完整Ｗｅｂ前端性能优化解决方案。该解决方案包括服务器端优化、ＨＴＭＬ优化、ＪａｖａＳｃｒｉｐｔ优化、ＣＳＳ优化、 图片优化等内容。并在ＨＴＴＰ代理工具Ｆｉｄｄｌｅｒ搭建的５１２ＫＢ慢网速下通过ＳｐｅｅｄＴｒａｃｅｒ监测ＵＩＴｈｒｅａｄ，寻找基于ＨＴＭＬ５技术的 Ｗｅｂ移动电子商务项目“指尖点餐系统”的点餐页面前端性能中的瓶颈，根据所提出的Ｗｅｂ前端性能优化解决方案对其进行优化实 践。优化前后的Ｔｉｍｅｌｉｎｅ以及ＵＩＴｈｒｅａｄ对比分析表明，优化后加载时间降低了８２％，页面渲染降低了３２％，脚本执行减少了７９％。 关键词　　Ｗｅｂ前端性能优化　服务器端优化　ＨＴＭＬ优化　ＪａｖａＳｃｒｉｐｔ优化　ＣＳＳ优化　图片优化　前端测试环境　ＴｉｍｅＬｉｎｅ　 ＵＩＴｈｒｅａｄ 中图分类号　ＴＰ３０２．７　　　　文献标识码　Ａ　　　　ＤＯＩ：１０．３９６９／ｊ．ｉｓｓｎ．１０００３８６ｘ．２０１４．１２．０２１ ＯＰＴＩＭＩＳＡＴＩＯＮＳＣＨＥＭＥＦＯＲＷＥＢＦＲＯＮＴＥＮＤＰＥＲＦＯＲＭＡＮＣＥＡＮＤＩＴＳＰＲＡＣＴＩＣＥ ＷａｎｇＣｈｅｎｇ　ＬｉＳｈａｏｙｕａｎ　ＺｈｅｎｇＬｉｘｉａｏ　ＧｏｕＪｉｎ　ＺｅｎｇＭｅｉｑｉｎ　ＬｉｕＨｕｉｍｉｎ （ＣｏｌｌｅｇｅｏｆＣｏｍｐｕｔｅｒＳｃｉｅｎｃｅａｎｄＴｅｃｈｎｏｌｏｇｙ，ＨｕａｑｉａｏＵｎｉｖｅｒｓｉｔｙ，Ｘｉａｍｅｎ３６２０２１，Ｆｕｊｉａｎ，Ｃｈｉｎａ） Ａｂｓｔｒａｃｔ　　ＡｉｍｉｎｇａｔｔｈｅｐｏｏｒｐｅｒｆｏｒｍａｎｃｅｏｆＷｅｂｆｒｏｎｔｅｎｄ，ｗｅｐｕｔｆｏｒｗａｒｄｓｙｓｔｅｍａｔｉｃａｌｌｙａｃｏｍｐｌｅｔｅＷｅｂｆｒｏｎｔｅｎｄｐｅｒｆｏｒｍａｎｃｅ ｏｐｔｉｍｉｓａｔｉｏｎｓｏｌｕｔｉｏｎｗｉｔｈｓｔｒｏｎｇｉｎｔｅｇｒｉｔｙａｎｄｕｎｉｖｅｒｓａｌｉｔｙｔａｒｇｅｔｅｄａｔｉｎｃｒｅａｓｉｎｇｗｅｂｐａｇｅｓｌｏａｄｉｎｇｓｐｅｅｄ，ｒｅｎｄｅｒｉｎｇｓｐｅｅｄａｎｄｕｓｅｒｅｘｐｅｒｉｅｎｃｅ ｂｙａｎａｌｙｓｉｎｇａｎｄｇｅｎｅｒａｌｉｓｉｎｇｔｈｅｐｒｉｎｃｉｐｌｅｓｏｆＢ／ＳｆｒａｍｅｗｏｒｋｓｆｒｏｍｒｅａｒｅｎｄｔｏｆｒｏｎｔｅｎｄｉｎＷｅｂ，ｔｈｅｂｒｏｗｓｅｒｃａｃｈｅ，ｔｈｅｂｒｏｗｓｅｒｌｏａｄｉｎｇ ｍｅａｎｓ，ａｎｄｔｈｅｆａｃｔｏｒｓｔｈａｔａｆｆｅｃｔｔｈｅｆｒｏｎｔｅｎｄｐｅｒｆｏｒｍａｎｃｅｏｐｔｉｍｉｓａｔｉｏｎｉｎｓｅｒｖｅｒｃｏｎｆｉｇｕｒａｔｉｏｎｉｎｒｅｇａｒｄｔｏＨＴＴＰａｎｄｏｔｈｅｒｐｒｏｃｅｓｓｅｓ．Ｔｈｅ ｓｏｌｕｔｉｏｎｉｎｃｌｕｄｅｓｓｅｒｖｅｒｓｉｄｅｏｐｔｉｍｉｓａｔｉｏｎ，ＨＴＭＬｏｐｔｉｍｉｓａｔｉｏｎ，ＪａｖａＳｃｒｉｐｔｏｐｔｉｍｉｓａｔｉｏｎ，ＣＳＳｏｐｔｉｍｉｓａｔｉｏｎ，ｉｍａｇｅｏｐｔｉｍｉｓａｔｉｏｎａｎｄｓｏｏｎ．Ｉｎ ｓｌｏｗｎｅｔｗｏｒｋｓｐｅｅｄｏｆ５１２ＫＢｂｕｉｌｔｂｙＨＴＴＰｐｒｏｘｙｔｏｏｌＦｉｄｄｌｅｒ，ｗｅｍｏｎｉｔｏｒｔｈｅＵＩＴｈｒｅａｄｔｈｒｏｕｇｈＳｐｅｅｄＴｒａｃｅｒ，ａｎｄｌｏｏｋｆｏｒｔｈｅｂｏｔｔｌｅｎｅｃｋｏｆ ｆｒｏｎｔｐｅｒｆｏｒｍａｎｃｅｉｎｏｒｄｅｒｉｎｇｗｅｂｐａｇｅｏｆ“ｆｉｎｇｅｒｔｉｐｓｏｒｄｅｒｉｎｇｓｙｓｔｅｍ”，ａＷｅｂｍｏｂｉｌｅｅｃｏｍｍｅｒｃｅｐｒｏｊｅｃｔｂａｓｅｄｏｎＨＴＭＬ５ｔｅｃｈｎｏｌｏｇｙ，ａｎｄ ｃａｒｒｙｏｕｔｔｈｅｏｐｔｉｍｉｓａｔｉｏｎｐｒａｃｔｉｃｅａｃｃｏｒｄｉｎｇｔ