发布时间 : 星期六 文章电子商务系统前端性能优化的研究与实现 陈韵晴 - 图文更新完毕开始阅读20cc5d2b9ec3d5bbfc0a74b2
1 绪论
1.1 选题背景及意义
随着计算机技术的高速发展和网上购物的兴起，电子商务系统特别是B/S架构网站已经成为人们网购必不可少的工具。电子商务网站通过大量的、形式多样的内容展示，让人们足不出户就可以享受购物的便利，为人们的各种工作和日常生活都提供了非常大的便利。而电子商务系统的拥有者一方面希望通过在网站上显示更丰富的内容，吸引更多的消费者获取利益，另一方面又面临着由于用户规模和网页功能内容的增多，而带来的性能降低的挑战。因此大家对网站的性能要求也就变得越来越高，人们在准确获得他们想要的内容的同时，还要求网站能够快速及时地响应并呈现内容，如果网站使得用户等待太久，那么肯定会导致用户流量的缩减。因此，怎么优化提高一个电子商务网站的性能就成为一个需要我们考虑和解决的问题。
有网站相关知识的人都知道，一次网站请求的过程即从浏览器发送参数到服务器，然后这个请求被服务器上的程序分析处理后，再返回浏览器可以识别的内容，最后浏览器将这些内容展现给用户，这一过程划分为“后端”和“前端”两个部分。其中“后端”指服务器分析用户请求、执行数据查询并形成浏览器可以呈现的内容，交由前端部分处理；“前端”则负责与用户的交互部分，将后端生成的内容放到浏览器中进行显示。
对于一个电子商务网站的性能优化技术和研究水平而言，后端的相关优化技术（比如编译器选项、数据库索引、内存管理等）已经比较成熟，而对于前端的性能优化方面，则研究水平和力度有待提升。国内几个大型互联网公司都拥有非常强大的前端技术团队，这说明了在那些比较大型的电子商务网站或系统中，前端技术支持是必不可少的。更重要的一点是，对网站优化一定了解的人都知道一个性能黄金法则，即当浏览器访问一个网站时，在整个响应时间里，仅有10%-20%是用于后台文件（比如HTML网页）的下载，剩下80%-90%则花在页面前端组件（图片、脚本、样式表、Flash等）的加载1。可见，同样程度的前端性能优化比起后台性能优化，前端性能优化能够更大幅度地提升网站的响应时间，其优化空间非
常之大，对改善用户体验有着非常重要的影响。因此，本文着重研究电子商务系统前端的性能优化方案，并且在最后将它们运用到一个具体的电子商务网站中去，在尽量不改动网站后台代码的基础上，通过对前端技术和相关性能优化方案的运用来实现网站性能的提升。
1.2 国内外研究现状
在网站前端性能优化的研究领域中，要数走在前列的则不得不提到美国，因为美国在这个领域中有许多知名研究学者和商业公司，他们为网站的前端性能优化这一问题提出了许多较好的分析和方案。Yahoo、Google等著名的互联网公司是最早开始注重网站前端性能优化的，还对许多常见的前端性能优化问题提出了较好的解决办法，开发了功能强大的相关工具，比如Google的PageSpeed、SpeedTracer，Yahoo的YSlow等都非常的优秀。还有十分知名的经典书籍《High Performance Web Sites》就是由Yahoo的一位工程师编写的，书中就为前端开发中的性能优化提出了可行的建议。
雅虎是互联网先驱之一，其网站前端技术十分具有开拓性和创新性。它提出的多个知名的优化性能优化方案比如减少HTTP请求次数和减少DNS查询等，都是按照现有协议对网站进行优化而不影响原本协议的。
著名的谷歌公司也十分懂得网站前端的性能优化的重要性，曾经开发过一个可以压缩脚本文件和CSS的工具，以此来降低文件的大小，而多个文件压缩变为一个后，也能够减少HTTP请求的数量，从而加快了网页加载的速度。此外谷歌还有一个用于分析计量网页加载时间的非常实用的工具PageSpeed，从而来评估网站前端性能的高低。他们还提出，要缩短页面的加载时间，我们所进行的优化应主要从五个方面入手，也就是五类最佳实践2。
相比之下，国内对于网站前端性能优化领域的研究就较少，重视程度也十分低。就目前而言，国内的网站开发和技术的研究重点大都还放在页面内容及能否正确显示这方面，也就是关注网页是否正确有效，而不大关心页面的呈现效果和与用户之间的交互，不是那么重视用户的使用体验，这样一来，优化的重点自然就更多地放在网站后台的优化上面，而缺乏对前端进行足够的性能优化分析和改进，即使有一些前端方面的优化，也大多是对网络协议本身进行改进。但情况在逐渐好转，国内的一些优秀的互联网公司（比如百度、阿里巴巴、腾讯等）已经
慢慢地开始意识到前端性能优化的重要性，在网站的开发和维护中逐渐有了一些措施来进行网站前端的性能优化。在以后的网站性能研究问题中，前端方面的性能优化必将会得到越来越多的重视，前端优化将成为一个优秀网站的建立必经的研究和实施步骤。
1.3 论文研究内容及结构
本文首先简要介绍了网站的设计模式，分析了涉及网站性能的一些原理和机制，比如HTTP请求、客户端缓存机制、压缩技术、重定向、Ajax技术、DNS查询、CDN等，找出它们影响网站性能的原因，从而一一对症下药，提出一些相应的解决方案。通过对前端代码的修改和相关技术的运用，并且尽可能地保持后台不改动，只依靠前端优化来缩短响应时间，提高网站的整体性能，还要通过数据的前后对比来反映这些优化方案的优化效果，以保证它们确实是合理有效的，最后在一个实现的电子商务网站中将这些前端优化方案付诸实践，验证其最终的优化效果。
本文分为五章，大致结构如下：
第一章：阐述网站前端优化这一领域的研究背景和意义，分析当前研究的现状，再简略说明本文的研究内容和大致的篇章结构。
第二章：分析了网站前端优化的影响因素和测量方法，介绍相关的重要理论，包括网站的请求响应机制、HTTP协议，剖析用户发出请求的过程，以引出下文的详细介绍。
第三章：详细研究了能够提高前端性能的7个因素，包括HTTP、客户端缓存、压缩技术、页面元素优化、重定向、Ajax技术以及减少DNS查询，对它们给出了各自的优化方案并加以对比和检验。
第四章：根据当前超市购物网站的设计特点，结合主流开发技术，实现了一个基于JSP技术的超市购物网站，并将上述前端优化方案运用到该案例中，通过改变前后网站性能的不同表现来验证方案的可行性。
第五章：对本文内容总结归纳，说明未讨论和解决的问题以及文中的不足之处，并对将来的工作和学习做出展望。
2 网站前端性能优化概述
2.1 电子商务网站设计模式
目前的电子商务网站流行使用MVC模式。MVC3是将电子商务系统划分为三个部分，这三部分不存在明显的分层结构。其中模型代表了网站的组件状态和数据部分。视图则用于展现模型提供的数据。模型如果发生改动会触发视图产生相应变化，这时视图通过访问模型从而得到其数据来呈现给用户，而不会去改动模型。控制器则负责处理到来的请求，管理控制模型和视图两者之间的交互，按照相应的逻辑来协调各组件的正常工作，并调用视图组件以生成页面的输出显示。MVC将每部分按照职责进行划分，将代码清晰地分割为若干部分，并保持良好的解耦，使得开发人员可以更好地分工合作，这样可以对每个部分进行独立开发、测试和维护。
而从技术分工来看，一个电子商务网站由前端、后台两部分组成，后台负责实现网站的逻辑，比如对数据的增删改查等操作、实现注册和登陆等等，前端则负责展现这些内容，为用户呈现信息和引导用户的行为，实现与用户的交互。不管是前端还是后端，MVC的设计思想都是适用的。但无论使用哪种架构，要讨论前端的性能优化，我们首先就必不可少要熟悉HTML、CSS和JavaScript。HTML（Hyper Text Markup Language）通过浏览器直接解释后呈现页面内容。CSS（Cascading Style Sheets）是一种用于控制页面内容样式的语言。两者通常会搭配使用，HTML负责搭建网页的大致结构，而CSS则用于统一外观，实现结构和样式分离，更易于后期的改动和维护。JavaScript是一种浏览器使用的脚本语言，也是由浏览器直接翻译，用于实现网页的动态功能和各种特效，可以提升用户体验。
2.2 电子商务网站设计模式前端性能的影响因素分析 影响网站前端性能的因素主要有7个方面：
1、HTTP请求：HTTP请求次数的多少能够明显地影响页面的初次加载时间的长短。一个HTTP请求需要经过与服务器连接、服务器后台处理、返回结果给客户