电子商务网站优化及运维方案

《电子商务网站优化及运维方案》由会员分享，可在线阅读，更多相关《电子商务网站优化及运维方案（63页珍藏版）》请在金锄头文库上搜索。

1、电子商务网站优化及运维方案电子商务网站优化及运维方案 一、一、 网站负载分析网站负载分析 假设网站期望达到年销售额 1000 万，按每 100 个 IP 访问成交一笔有效订单，平均每笔订单 销售额是 100 元的，每笔成交订单流量页面为 10PV， 那么预计日 IP 访问 是 2.8 万， 日 访问页面为 28W， 最高日访问 IP 估计可达为 10W。 二、二、 项目环境项目环境 1. 服务器硬件环境服务器硬件环境 根据网站负载分析，推荐使用志强 5420+系列 CPU，16G 内存，2x1000G 硬盘做 raid 备份。 带宽推荐：10M 独享，可根据负载量升级到 20-50M 独享。

2、2. 服务器软件环境服务器软件环境 目前流行的服务器 Linux 系统发行版有 CentOS（基于收费的 Redhat） 和 Debian 及 （基于Debian 的）Ubuntu， 为了方便维护升级，推荐使用 Ubuntu Linux 10.04 服务器版，系统默 认自带 Apache web 服务器， Mysql 数据库环境。 3. 软件开发环境软件开发环境 为了保持和线上服务器环境一致，减少环境不同造成的影响，推荐使用 Ubuntu 10.04 服务 器版，系统默认自带 apache web 服务器， mysql 数据库环境。 三、三、 项目架构项目架构 1. 网站基本网站基本结构图结构

3、图 2. 服务器服务器基本基本架架构图构图 四、四、 性能优化性能优化 1. 整站优化整站优化 1) 降低降低 HTTP 请求请求 终端用户响应的时间中，有 80%用于下载各项内容。这部分时间包括下载页面中的图像、样式表、脚本、Flash 等。通过减少页面中的元素可以减少 HTTP 请求的次数。这是提高网页速 度的关键步骤。 减少页面组件的方法其实就是简化页面设计。 那么有没有一种方法既能保持页面内容的丰富性又能达到加快响应时间的目的呢？这里有几条减少HTTP 请求次数同时又 可能保持页面内容丰富的技术。 合并文件合并文件是通过把所有的脚本放到一个文件中来减少 HTTP 请求的方法，如可以简单

4、地把所有的 CSS 文件都放入一个样式表中。 当脚本或者样式表在不同页面中使用时需要做不同的修 改，这可能会相对麻烦点，但即便如此也要把这个方法作为改善页面性能的重要一步。 CSS Sprites 是减少图像请求的有效方法。把所有的背景图像都放到一个图片文件中，然后通过 CSS 的 background-image 和 background-position 属性来显示图片的不同部分； 图片地图图片地图 是把多张图片整合到一张图片中。虽然文件的总体大小不会改变，但是可以减少 HTTP 请求次数。 图片地图只有在图片的所有组成部分在页面中是紧挨在一起的时候 才能使 用，如导航栏。确定图片的坐标和

5、可能会比较繁琐且容易出错，同时使用图片地图导航也不具有可读性，因此不推荐这种方法； 内联图像内联图像 是使用 data:URL scheme 的方法把图像数据加载页面中。 这可能会增加页面的大小。 把内联图像放到样式表（可缓存）中可以减少 HTTP 请求同时又避免增加页面文件的大小。但是内联图像现在还没有得到主流浏览器的支持。 减少页面的 HTTP 请求次数是你首先要做的一步。这是改进首次访问用户等待时间的最重要的方法。如同 Tenni Theurer 的他的博客 Browser Cahe Usage Exposed!中所说，HTTP 请求在 无缓存情况下占去了 40%到 60%的响应时间。

6、让那些初次访问你网站的人获得更加快速的体验吧！ 2) 为为文件头指定文件头指定 Expires 或或 Cache-Control 这条守则包括两方面的内容： 对于静态内容：设置文件头过期时间 Expires 的值为“Never expire”（永不过期） 对于动态内容：使用恰当的 Cache-Control 文件头来帮助浏览器进行有条件的请求 网页内容设计现在越来越丰富， 这就意味着页面中要包含更多的脚本、 样式表、 图片和 Flash。第一次访问你页面的用户就意味着进行多次的 HTTP 请求，但 是通过使用 Expires 文件头就 可以使这样内容具有缓存性。它避免了接下来的页面访问中不必要

7、的 HTTP 请求。Expires 文件头经常用于图像文件， 但是应该在所有的内容都使用他，包括脚本、样式表和 Flash 等。 浏览器（和代理）使用缓存来减少 HTTP 请求的大小和次数以加快页面访问速度。Web 服务 器在 HTTP 响应中使用 Expires 文件头来告诉客户端内容需 要缓存多长时间。下面这个例子是一个较长时间的 Expires 文件头，它告诉浏览器这个响应直到 2010 年 4 月 15 日才过期。 Expires: Thu, 15 Apr 2010 20:00:00 GMT 如果你使用的是 Apache 服务器， 可以使用 ExpiresDefault 来设定相对当前

8、日期的过期时间。 下面这个例子是使用 ExpiresDefault 来设定请求时间后 10 年过期的文件头： ExpiresDefault “access plus 10 years“ 要切记， 如果使用了 Expires 文件头， 当页面内容改变时就必须改变内容的文件名。 依 Yahoo!来说我们经常使用这样的步骤：在内容的文件名中加上版本号，如 yahoo_2.0.6.js。 使用 Expires 文件头只有会在用户已经访问过你的网站后才会起作用。当用户首次访问你的 网站时这对减少 HTTP 请求次数来说是无效的，因为浏览器的缓 存是空的。因此这种方法对于你网站性能的改进情况要依据他们“预

9、缓存”存在时对你页面的点击频率（“预缓存”中已 经包含了页面中的所有内容） 。Yahoo!建立了一套测量方法，我们发现所有的页面浏览量中 有 7585%都有“预缓存”。通过使用 Expires 文件头，增加了缓存在浏览器中内容的数量，并 且可以在用户接下来的请求中再次使用这些内容， 这甚至都不需要通过用户发送一个字节的请求。 3) Gzip压缩压缩 网络传输中的 HTTP 请求和应答时间可以通过前端机制得到显著改善。的确，终端用户的带 宽、互联网提供者、与对等交换点的靠近程度等都不是网站开发者所能决定的。但是还有其他因素影响着响应时间。通过减小 HTTP 响应的大小可以节省 HTTP 响应时间

10、。 从 HTTP/1.1 开始，web 客户端都默认支持 HTTP 请求中有 Accept-Encoding 文件头的压缩格式： Accept-Encoding: gzip, deflate 如果 web 服务器在请求的文件头中检测到上面的代码，就会以客户端列出的方式压缩响应 内容。Web 服务器把压缩方式通过响应文件头中的 Content- Encoding 来返回给浏览器。 Content-Encoding: gzip Gzip 是目前最流行也是最有效的压缩方式。 这是由 GNU 项目开发并通过 RFC 1952 来标准化 的。另外仅有的一个压缩格式是 deflate，但是它的使用范围有限

11、效果也稍稍逊色。 Gzip 大概可以减少 70%的响应规模。 目前大约有 90%通过浏览器传输的互联网交换支持 gzip 格式。如果你使用的是 Apache，gzip 模块配置和你的版本有关：Apache 1.3 使用 mod_zip，而 Apache 2.x 使用 moflate。 浏览器和代理都会存在这样的问题： 浏览器期望收到的和实际接收到的内容会存在不匹配的 现象。幸好，这种特殊情况随着旧式浏览器使用量的减少在减少。 Apache 模块会通过自动添加适当的 Vary 响应文件头来避免这种状况的出现。 服务器根据文件类型来选择需要进行 gzip 压缩的文件，但是这过于限制了可压缩的文件。

12、 大多数 web 服务器会压缩 HTML 文档。对脚本和样式表进行压缩同 样也是值得做的事情，但是很多 web 服务器都没有这个功能。实际上，压缩任何一个文本类型的响应，包括 XML 和 JSON，都值得的。图像和 PDF 文件由于 已经压缩过了所以不能再进行 gzip 压缩。如果试图 gizp 压缩这些文件的话不但会浪费 CPU 资源还会增加文件的大小。 Gzip 压缩所有可能的文件类型是减少文件体积增加用户体验的简单方法。 4) 将样式放到头部将样式放到头部 把样式表放到文档的内部似乎会加快页面的下载速度。这是因为把样式表放到内会使页面有步骤的加载显示。 注重性能的前端服务器往往希望页面有

13、秩序地加载。 同时， 我们也希望浏览器把已经接收到 内容尽可能显示出来。 这对于拥有较多内容的页面和网速较慢的用户来说特别重要。 向用户返回可视化的反馈，比如进程指针，已经有了较好的研究并形成了正式文档。在我们的研究中 HTML 页面就是进程指针。当浏览器有序地加载文件头、导航栏、顶部的 logo 等对于等 待页面加载的用户来说都可以作为可视化的反馈。这从整体上改善了用户体验。 把样式表放在文档底部的问题是在包括 Internet Explorer 在内的很多浏览器中这会中止内容的有序呈现。 浏览器中止呈现是为了避免样式改变引起的页面元素重绘。 用户不得不面对一 个空白页面。 HTML 规范清

14、楚指出样式表要放包含在页面的区域内：“和不同，只能出现在文档的区域内，尽管它可以多次使用它”。无论是引起白屏还是出现没有样式 化的内容都不值得去尝试。 最好的方案就是按照 HTML 规范在文 档内加载你的样式表。 5) 将脚本放置尾部将脚本放置尾部 脚本带来的问题就是它阻止了页面的平行下载。HTTP/1.1 规范建议，浏览器每个主机名的 并行下载内容不超过两个。 如果你的图片放在多个主机名上， 你可以在每个并行下载中同时下载 2 个以上的文件。但是当下载脚本时，浏览器就不会同时下载其它文件了，即便是主机 名不相同。 在某些情 况下 把脚本 移到页 面底部 可能 不太容 易。比 如说， 如果 脚

15、本中 使用了document.write 来插入页面内容，它就不能被往下移动了。这里可能还会有作用域的问题。 很多情况下，都会遇到这方面的问题。 一个经 常用 到的 替代 方法 就是 使用 延迟 脚本。DEFER 属性 表明 脚本 中没 有包含 document.write， 它告诉浏览器继续显示。 不幸的 是， Firefox 并不支持 DEFER 属性。 在 Internet Explorer 中，脚本可能会被延迟但效果也不会像我们所期望的那样。如果脚本可以被延迟，那么它就可以移到页面的底部。这会让你的页面加载的快一点。 6) 避免避免 CCS 表达式表达式 CSS 表达式是动态设置 CS

16、S 属性的强大（但危险）方法。Internet Explorer 从第 5 个版本开 始支持CSS表达式。 下面的例子中， 使用 CSS表达式可以实现隔一个小时切换一次背景颜色： background-color: expression( (new Date().getHours()%2 ? “#B8D4FF“ : “#F08A00“ ); 如上所示，expression 中使用了 JavaScript 表达式。CSS 属性根据 JavaScript 表达式的计算结 果来设置。expression 方法在其它浏览器中不起作用，因此在跨浏览器的设计中单独针对Internet Explorer 设置时会比较有用。 表达式的问题就在于它的计算频率要比我们想象的多。 不仅仅是在页面显示和缩放时， 就是 在页面滚动、 乃至移动鼠标时都会要重新计算一次。 给 CSS 表达式增加一个计数器可以跟踪表达式的计算频率。在页面中随便移动鼠标都可以轻松达到 10000 次以上的计算量。 一个减少 CSS 表达式计算次数的方法就是使用一次性的表达式，它在第一次运行时将结果