电子商务系统前端性能优化的研究与实现陈韵晴解析.docx

电子商务系统前端性能优化的研究与实现陈韵晴解析.docx

《电子商务系统前端性能优化的研究与实现陈韵晴解析.docx》由会员分享，可在线阅读，更多相关《电子商务系统前端性能优化的研究与实现陈韵晴解析.docx（36页珍藏版）》请在冰豆网上搜索。

电子商务系统前端性能优化的研究与实现陈韵晴解析

本科生毕业论文（设计）

论文题目

：

电子商务系统前端性能优化的研究与实现

姓名

：

陈韵晴

学号

：

1209040150

班级

：

1202

年级

：

12

专业

：

电子商务

学院

：

信息与安全工程学院

指导教师

：

喻晓和

完成时间

：

2016-03-07

作者声明

本毕业论文（设计）是在导师的指导下由本人独立撰写完成的，没有剽窃、抄袭、造假等违反道德、学术规范和其他侵权行为。

对本论文（设计）的研究做出重要贡献的个人和集体，均已在文中以明确方式标明。

因本毕业论文（设计）引起的法律结果完全由本人承担。

毕业论文（设计）成果归中南财经政法大学所有。

特此声明。

作者专业

：

电子商务

作者学号

：

1209040150

作者签名

：

电子商务系统前端性能优化的研究与实现

TheResearchandImplementationofFront-endPerformanceOptimizationinthe E-commerce System

2016年03月07日

摘要

计算机技术的飞速发展推动了网上购物的热潮，使得电子商务系统特别是B/S架构网站的开发需求急速增长。

电子商务网站不仅要尽可能丰富地展现用户所需的信息内容，更要注重网站的性能优化，提升用户的使用体验，因为购物网站的用户规模和使用到的功能内容往往十分庞大，造成网站性能的下降是十分严重的。

因此对电子商务网站进行性能优化十分重要。

而对于一个电子商务网站的性能优化，后端的相关优化技术（比如编译器选项、数据库索引、内存管理等）已经比较成熟，但是对于前端性能优化的研究水平仍有待提升。

最为重要的一点是，网站的性能黄金法则告诉我们，当浏览器访问一个网站时，总加载时间中只有10%-20%是花在了后台文件比如HTML网页的下载上，而剩下的80%-90%则用在页面前端组件的加载上，可见对于同样程度的优化，前端比后台有更大的性能提升空间，对提升用户体验有着非常重要的影响。

论文首先简要介绍了网站前端优化这一领域的研究背景和国内外研究现状，指出前端优化的重要性，再说明论文的大致内容和篇章结构安排，接着分析了可能影响前端性能的一些主要的因素，研究了涉及网站前端性能优化这一问题的相关技术，从而针对那些可改进的因素并结合相关技术和经验提出了相应的解决方案，比如HTTP请求优化、客户端缓存优化、使用压缩技术、页面元素优化、重定向优化、使用Ajax技术、减少DNS查询等等，除了理论性的分析和研究，还适当地制作一些小案例来对这些解决方案进行验证，通过使用一些专业的网页数据采集和分析工具来获得网站优化前后的数据，对这些数据进行对比，观察并分析优化的效果。

最后，结合当前的电子商务热点主题和热门技术，设计并实现了一个基于JSP技术和SQLSERVER数据库的电子商务网上超市购物网站，并结合前面提出的前端性能优化方案，在尽量不改变后台的前提下修改这个网站，通过采集整理优化前后的详细数据进行对比分析，来证明这些优化措施对网站性能优化的提升的实际有效性，并进一步验证前面所述的前端性能优化理论和方案是正确、可行的。

关键词：

电子商务；网站前端；性能优化

Abstract

Therapiddevelopmentofcomputertechnologyhavepromotedtheonlineshoppingboom,makingtherapidgrowthofdevelopmentneedsofthee-commercesystem,inparticularthesiteinB/Sstructure.E-commercesitesnotonlyasrichaspossibletoshowthecontentsoftheinformationrequiredbytheuser,butalsotopayattentiontoperformanceoptimizationofthewebsite,toenhancetheuserexperience,becauseusersusetoscaleandcontentfeaturesshoppingsitesareoftenverylarge,resultinginsiteperformancethedeclineisveryserious.Therefore,e-commercesiteperformanceoptimizationisveryimportant.Forane-commercesiteperformanceoptimization,optimizationrelatedtothebackend（suchascompileroptions,databaseindexing,memorymanagement,etc.）arealreadyquitemature,butthefront-endperformanceoptimizationresearchlevelremainstobeimproved.Themostimportantpointisthatthesiteperformancegoldenruletellsusthatwhenthebrowservisitsasite,thetotalloadtime,only10%-20%isspentthebackgrounddocumentsuchasdownloadingHTMLpages,whiletheremaining8090percentisspentonthepageisloadedfront-endcomponents,visibleforthesamedegreeofoptimization,thefrontendthanthebackgroundhaveagreaterperformanceheadroom,toenhancetheuserexperiencehasaveryimportantinfluence.

Thispaperbrieflyintroducesthebackgroundofthestatusquointhisareaof​​thewebsitefront-endoptimizationanddomesticandinternationalresearch,pointedouttheimportanceoffront-endoptimization,andthenexplainedthegeneralcontentandchapterstructureofthepaperis,thenweanalyzesomeofthemajorfactorsthatmayaffecttheperformanceofthefrontendResearchinvolvingthewebsitefront-endperformanceoptimizationproblemoftherelatedart,soforthosefactorsthatcanbemodifiedandcombinedwithrelevantskillsandexperienceputforwardthecorrespondingsolutions,suchasHTTPrequestoptimization,clientcacheoptimization,theuseofcompressiontechnology,pageelementoptimization,optimizationredirection,usingAjaxtechnologytoreduceDNSqueries,andso,inadditiontotheoreticalanalysisandresearch,butalsoappropriatetomakesomesmallcasestoverifythesesolutionsbyusingsomeprofessionalwebdatacollectionandanalysiswebsiteOptimizertooltoobtaindatabeforeandaftercomparisonofthesedata,observeandanalyzetheeffectofoptimization.

Finally,withthecurrenthottopicsandpopulare-commercetechnology,designandimplementationofaJSP-basedSQLSERVERdatabaseande-commerceshoppingsitesonlinesupermarket,combinedwithfront-endperformanceoptimizationpreviouslyproposed,inasmuchaspossiblewithoutchangingthebackgroundmodifythesite,wereanalyzedbycollectingdetaileddataprocessingbeforeandafteroptimization,tofurtherprovethevalidateandeffectivenessoftheseaforementionedfront-endperformanceoptimizationtheoriesandprograms.

Keywords:

E-commerce;performanceoptimization;Webfrontend

目录

1绪论9

1.1选题背景及意义9

1.2国内外研究现状10

1.3论文研究内容及结构11

2网站前端性能优化概述12

2.1电子商务网站设计模式12

2.2电子商务网站设计模式前端性能的影响因素分析12

2.3前端性能测量方法14

3电子商务网站前端优化方案14

3.1HTTP请求优化15

3.1.1原理15

3.1.2使用图片地图15

3.1.3 CSSSprites18

3.1.4脚本和样式表的合并19

3.2利用客户端缓存进行优化19

3.2.1原理19

3.2.2添加Expires标头19

3.2.3使用Etag20

3.3压缩组件20

3.2.1原理20

3.2.2Gzip压缩21

3.2.3代理服务器缓存22

3.4页面元素的优化22

3.2.1原理22

3.2.2CSS放在顶部26

3.2.3脚本放在底部27

3.5重定向的优化28

3.5.1原理28

3.5.2避免重定向29

3.6使用Ajax技术30

3.7减少DNS查询同时避免堵塞31

4电子商务网站实现和前端性能优化的应用32

4.1网站需求分析和可行性分析32

4.1.1功能需求分析32

4.1.2环境需求分析32

4.1.3性能需求分析33

4.1.4可行性分析33

4.2网站相关技术34

4.2.1JSP技术34

4.2.2JavaBean34

4.2.3Struts34

4.3网站系统分析和设计35

4.3.1系统模块分析35

4.3.2E-R模型37

4.2系统详细设计和实现39

4.2优化方案的应用和测试41

4.2.1图片地图41

4.2.2缓存优化42

4.2.3压缩优化43

4.2.4页面元素优化45

5结束语46

致谢48

主要参考文献49

1绪论

1.1选题背景及意义

随着计算机技术的高速发展和网上购物的兴起，电子商务系统特别是B/S架构网站已经成为人们网购必不可少的工具。

电子商务网站通过大量的、形式多样的内容展示，让人们足不出户就可以享受购物的便利，为人们的各种工作和日常生活都提供了非常大的便利。

而电子商务系统的拥有者一方面希望通过在网站上显示更丰富的内容，吸引更多的消费者获取利益，另一方面又面临着由于用户规模和网页功能内容的增多，而带来的性能降低的挑战。

因此大家对网站的性能要求也就变得越来越高，人们在准确获得他们想要的内容的同时，还要求网站能够快速及时地响应并呈现内容，如果网站使得用户等待太久，那么肯定会导致用户流量的缩减。

因此，怎么优化提高一个电子商务网站的性能就成为一个需要我们考虑和解决的问题。

有网站相关知识的人都知道，一次网站请求的过程即从浏览器发送参数到服务器，然后这个请求被服务器上的程序分析处理后，再返回浏览器可以识别的内容，最后浏览器将这些内容展现给用户，这一过程划分为“后端”和“前端”两个部分。

其中“后端”指服务器分析用户请求、执行数据查询并形成浏览器可以呈现的内容，交由前端部分处理；“前端”则负责与用户的交互部分，将后端生成的内容放到浏览器中进行显示。

对于一个电子商务网站的性能优化技术和研究水平而言，后端的相关优化技术（比如编译器选项、数据库索引、内存管理等）已经比较成熟，而对于前端的性能优化方面，则研究水平和力度有待提升。

国内几个大型互联网公司都拥有非常强大的前端技术团队，这说明了在那些比较大型的电子商务网站或系统中，前端技术支持是必不可少的。

更重要的一点是，对网站优化一定了解的人都知道一个性能黄金法则，即当浏览器访问一个网站时，在整个响应时间里，仅有10%-20%是用于后台文件（比如HTML网页）的下载，剩下80%-90%则花在页面前端组件（图片、脚本、样式表、Flash等）的加载。

可见，同样程度的前端性能优化比起后台性能优化，前端性能优化能够更大幅度地提升网站的响应时间，其优化空间非常之大，对改善用户体验有着非常重要的影响。

因此，本文着重研究电子商务系统前端的性能优化方案，并且在最后将它们运用到一个具体的电子商务网站中去，在尽量不改动网站后台代码的基础上，通过对前端技术和相关性能优化方案的运用来实现网站性能的提升。

1.2国内外研究现状

在网站前端性能优化的研究领域中，要数走在前列的则不得不提到美国，因为美国在这个领域中有许多知名研究学者和商业公司，他们为网站的前端性能优化这一问题提出了许多较好的分析和方案。

Yahoo、Google等著名的互联网公司是最早开始注重网站前端性能优化的，还对许多常见的前端性能优化问题提出了较好的解决办法，开发了功能强大的相关工具，比如Google的PageSpeed、SpeedTracer，Yahoo的YSlow等都非常的优秀。

还有十分知名的经典书籍《HighPerformanceWebSites》就是由Yahoo的一位工程师编写的，书中就为前端开发中的性能优化提出了可行的建议。

雅虎是互联网先驱之一，其网站前端技术十分具有开拓性和创新性。

它提出的多个知名的优化性能优化方案比如减少HTTP请求次数和减少DNS查询等，都是按照现有协议对网站进行优化而不影响原本协议的。

著名的谷歌公司也十分懂得网站前端的性能优化的重要性，曾经开发过一个可以压缩脚本文件和CSS的工具，以此来降低文件的大小，而多个文件压缩变为一个后，也能够减少HTTP请求的数量，从而加快了网页加载的速度。

此外谷歌还有一个用于分析计量网页加载时间的非常实用的工具PageSpeed，从而来评估网站前端性能的高低。

他们还提出，要缩短页面的加载时间，我们所进行的优化应主要从五个方面入手，也就是五类最佳实践。

相比之下，国内对于网站前端性能优化领域的研究就较少，重视程度也十分低。

就目前而言，国内的网站开发和技术的研究重点大都还放在页面内容及能否正确显示这方面，也就是关注网页是否正确有效，而不大关心页面的呈现效果和与用户之间的交互，不是那么重视用户的使用体验，这样一来，优化的重点自然就更多地放在网站后台的优化上面，而缺乏对前端进行足够的性能优化分析和改进，即使有一些前端方面的优化，也大多是对网络协议本身进行改进。

但情况在逐渐好转，国内的一些优秀的互联网公司（比如XX、阿里巴巴、腾讯等）已经慢慢地开始意识到前端性能优化的重要性，在网站的开发和维护中逐渐有了一些措施来进行网站前端的性能优化。

在以后的网站性能研究问题中，前端方面的性能优化必将会得到越来越多的重视，前端优化将成为一个优秀网站的建立必经的研究和实施步骤。

1.3论文研究内容及结构

本文首先简要介绍了网站的设计模式，分析了涉及网站性能的一些原理和机制，比如HTTP请求、客户端缓存机制、压缩技术、重定向、Ajax技术、DNS查询、CDN等，找出它们影响网站性能的原因，从而一一对症下药，提出一些相应的解决方案。

通过对前端代码的修改和相关技术的运用，并且尽可能地保持后台不改动，只依靠前端优化来缩短响应时间，提高网站的整体性能，还要通过数据的前后对比来反映这些优化方案的优化效果，以保证它们确实是合理有效的，最后在一个实现的电子商务网站中将这些前端优化方案付诸实践，验证其最终的优化效果。

本文分为五章，大致结构如下：

第一章：

阐述网站前端优化这一领域的研究背景和意义，分析当前研究的现状，再简略说明本文的研究内容和大致的篇章结构。

第二章：

分析了网站前端优化的影响因素和测量方法，介绍相关的重要理论，包括网站的请求响应机制、HTTP协议，剖析用户发出请求的过程，以引出下文的详细介绍。

第三章：

详细研究了能够提高前端性能的7个因素，包括HTTP、客户端缓存、压缩技术、页面元素优化、重定向、Ajax技术以及减少DNS查询，对它们给出了各自的优化方案并加以对比和检验。

第四章：

根据当前超市购物网站的设计特点，结合主流开发技术，实现了一个基于JSP技术的超市购物网站，并将上述前端优化方案运用到该案例中，通过改变前后网站性能的不同表现来验证方案的可行性。

第五章：

对本文内容总结归纳，说明未讨论和解决的问题以及文中的不足之处，并对将来的工作和学习做出展望。

2网站前端性能优化概述

2.1电子商务网站设计模式

目前的电子商务网站流行使用MVC模式。

MVC是将电子商务系统划分为三个部分，这三部分不存在明显的分层结构。

其中模型代表了网站的组件状态和数据部分。

视图则用于展现模型提供的数据。

模型如果发生改动会触发视图产生相应变化，这时视图通过访问模型从而得到其数据来呈现给用户，而不会去改动模型。

控制器则负责处理到来的请求，管理控制模型和视图两者之间的交互，按照相应的逻辑来协调各组件的正常工作，并调用视图组件以生成页面的输出显示。

MVC将每部分按照职责进行划分，将代码清晰地分割为若干部分，并保持良好的解耦，使得开发人员可以更好地分工合作，这样可以对每个部分进行独立开发、测试和维护。

而从技术分工来看，一个电子商务网站由前端、后台两部分组成，后台负责实现网站的逻辑，比如对数据的增删改查等操作、实现注册和登陆等等，前端则负责展现这些内容，为用户呈现信息和引导用户的行为，实现与用户的交互。

不管是前端还是后端，MVC的设计思想都是适用的。

但无论使用哪种架构，要讨论前端的性能优化，我们首先就必不可少要熟悉HTML、CSS和JavaScript。

HTML（HyperTextMarkupLanguage）通过浏览器直接解释后呈现页面内容。

CSS（CascadingStyleSheets）是一种用于控制页面内容样式的语言。

两者通常会搭配使用，HTML负责搭建网页的大致结构，而CSS则用于统一外观，实现结构和样式分离，更易于后期的改动和维护。

JavaScript是一种浏览器使用的脚本语言，也是由浏览器直接翻译，用于实现网页的动态功能和各种特效，可以提升用户体验。

2.2电子商务网站设计模式前端性能的影响因素分析

影响网站前端性能的因素主要有7个方面：

1、HTTP请求：

HTTP请求次数的多少能够明显地影响页面的初次加载时间的长短。

一个HTTP请求需要经过与服务器连接、服务器后台处理、返回结果给客户端浏览器、结束连接等步骤，当这种请求很多的时候，整个相应速度会被拖得很慢。

根据前端性能黄金法则，最终用户总响应时间的80%-90%都用在HTML中的组件的加载上，所以要缩短网站的响应时间，首先就要缩减页面中的组件数，从而HTTP请求数量的降低就带来了响应速度的提升；

2、客户端缓存：

虽然缓存技术对于页面的首次访问不会减少响应时间（因为所有需要用到的组件都必须发送HTTP请求，从服务器获取并下载到客户端），但是客户端缓存可以使得用户在再次访问该网站时，减少用户的等待时间，如果不设置缓存，那么再次访问时又会重新下载所有组件，十分浪费时间和网络资源。

对于那些被经常访问的页面，我们可以把初次访问时已经下载了的那些组件保留在本地，当再次访问时就可以直接从本地缓存获得这些资源而避免重复下载，这样就可以极大地提升响应速度。

3、压缩技术：

所请求页面的数据量越大，返回花费的时间就越长，当带宽速度比较慢时会花很久的时间去请求和下载资源。

为了尽可能减少响应时间，可以采取减少所请求资源的数据量的方式，比如压缩HTTP的响应包，来减少数据传输量。

4、页面元素优化：

可以使浏览器尽快显示内容，即使只是一部分，而不要等所有内容都准备就绪才一并显示，特别是在网速很慢的时候，这种优化就十分必要。

网页中的组件依照程序中的先后顺序进行加载，所以影响显示的组件的摆放位置就不能随意，比如需要立即使用的样式表该放在前面等等，因此针对页面元素的优化也能提升网站的性能，为浏览者带来更良好的使用体验。

5、重定向：

一般指将页面从原来的某个URL改变定位到别的URL，最常见的是服务器返回301、302、304状态码而导致的页面重定向，也可能是页面中组件的重定向，前两个状态码可能是由于网站重新设计、修改了易于记忆的URL、跟踪流量等原因导致了重定向的发生，当服务器向浏览器返回这样一个状态码和重定向时，网站需要根据这个新的URL来请求资源，使得网页的显示被延迟了，所以应尽量避免不必要的重定向；

6、Ajax技术：

Ajax技术用于实现客户端脚本与Web服务器的异步数据交换。

这种方式使得原本需要服务器承担的部分运算操作转移给了相对闲置的浏览器，避免了重复的数据传输，减少了浏览器和服务器之间交流的数据量，只用来改变网页中的部分内容，从而增快了响应时间，因此Ajax技术可用于提高前端性能；

7、减少DNS查询：

DNS可以把易于用户记忆的域名转换成不易记忆但计算机可以处理的IP地址。

因为DNS查找这个过程是要占用一定时间的，为了缩短时间我们必须尽量避免这种查找的发生，也就是将资源尽量放在同一个域中，但是又要考虑同一个域的资