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

Abstract

The rapid development of computer technology have promoted the online shopping boom, making the rapid growth of development needs of the e-commerce system, in particular the site in B / S structure. E-commerce sites not only as rich as possible to show the contents of the information required by the user, but also to pay attention to performance optimization of the website, to enhance the user experience, because users use to scale and content features shopping sites are often very large, resulting in site performance the decline is very serious. Therefore, e-commerce site performance optimization is very important. For an e-commerce site performance optimization, optimization related to the back end (such as compiler options, database indexing, memory management, etc.) are already quite mature, but the front-end performance optimization research level remains to be improved. The most important point is that the site performance golden rule tells us that when the browser visits a site, the total load time, only 10% -20% is spent the background document such as downloading HTML pages, while the remaining 80 90 percent is spent on the page is loaded front-end components, visible for the same degree of optimization, the front end than the background have a greater performance headroom, to enhance the user experience has a very important influence.

This paper briefly introduces the background of the status quo in this area of the website front-end optimization and domestic and international research, pointed out the importance of front-end optimization, and then explained the general content and chapter structure of the paper is, then we analyze some of the major factors that may affect the performance of the front end Research involving the website front-end performance optimization problem of the related art, so for those factors that can be modified and combined with relevant skills and experience put forward the corresponding solutions, such as HTTP request optimization, client cache optimization, the use of compression technology, page element optimization, optimization redirection, using Ajax technology to reduce DNS queries, and so, in addition to theoretical analysis and research, but also appropriate to make some small cases to verify these solutions by using some professional web data collection and analysis website Optimizer tool to obtain data before and after comparison of these data, observe and analyze the effect of optimization.

Finally, with the current hot topics and popular e-commerce technology, design and implementation of a JSP-based SQLSERVER database and e-commerce shopping sites online supermarket, combined with front-end performance optimization previously proposed, in as much as possible without changing the background modify the site, were analyzed by collecting detailed data processing before and after optimization, to further prove the validate and effectiveness of these aforementioned front-end performance optimization theories and programs.

Key words: E-commerce; performance optimization; Web front end

目 录

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.1 HTTP 请求优化............................................. 15

3.1.1 原理 ..................................................................................................................... 15

3.1.2 使用图片地图 ..................................................................................................... 15 3.1.3 CSS Sprites .......................................................................................................... 18 3.1.4 脚本和样式表的合并 ......................................................................................... 19

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

3.2.1 原理 ..................................................................................................................... 19

3.2.2 添加Expires 标头 ............................................................................................ 19 3.2.3 使用Etag ............................................................................................................ 20

3.3 压缩组件.................................................. 21

3.2.1 原理 ..................................................................................................................... 21 3.2.2 Gzip压缩 ............................................................................................................ 21 3.2.3 代理服务器缓存 ................................................................................................. 22

3.4 页面元素的优化............................................ 23

3.2.1 原理 ..................................................................................................................... 23

3.2.2 CSS 放在顶部 ..................................................................................................... 26 3.2.3 脚本放在底部 ..................................................................................................... 27

3.5 重定向的优化.............................................. 27

3.5.1 原理 ..................................................................................................................... 27 3.5.2 避免重定向 ......................................................................................................... 28

3.6 使用Ajax 技术 ............................................ 29 3.7 减少DNS查询同时避免堵塞.................................. 30

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

4.1 网站需求分析和可行性分析.................................. 31

4.1.1 功能需求分析 ..................................................................................................... 31

4.1.2 环境需求分析 ..................................................................................................... 31 4.1.3 性能需求分析 ..................................................................................................... 32 4.1.4 可行性分析 ......................................................................................................... 32

4.2 网站相关技术 ............................................ 33

4.2.1 JSP技术 .............................................................................................................. 33 4.2.2 JavaBean ............................................................................................................. 33 4.2.3 Struts ................................................................................................................... 34

4.3 网站系统分析和设计........................................ 34

4.3.1 系统模块分析 ..................................................................................................... 34

4.3.2 E-R模型 .............................................................................................................. 36

4.2 系统详细设计和实现........................................ 38 4.2 优化方案的应用和测试...................................... 40

4.2.1 图片地图 ............................................................................................................. 40 4.2.2 缓存优化 ............................................................................................................. 41 4.2.3 压缩优化 ............................................................................................................. 42 4.2.4 页面元素优化 ..................................................................................................... 44

5 结束语 .............................................. 45 致谢 ................................................... 47 主要参考文献 ........................................... 48