前端优化

【前台页面优化】
前端优化：
一、雅虎十四条前端优化规则
二、减少http请求
1、把js文件和css文件合并压缩
2、吧页面图标类大图做成一个，使用css进行调用
三、对静态资源进行处理
1、静态资源修改过期时间为未来
2、给静态资源独立的域名，

腾讯前端设计的Leader推荐我背熟的。请大家都能好好学习，不要像我一样一扫而过，好好的记下来！

不仅仅是晓得一些CSS xhtml就好了，深刻认识到很多的东西需要学习的。很早就用Firebug，但是却没

听说过Yslow，这叫不喜欢追求。希望大家关注前端设计的，多追求。

有兴趣的同学可以装个 Firebug 下的 Yslow ，测试下自己的网站。

Web 应用性能优化黄金法则：先优化前端程序 (front-end) 的性能，因为 这是 80% 或以上的最终用户

响应时间的花费所在。

法则 1. 【减少 HTTP 请求次数】
80%的最终用户响应时间花在前端程序上，而其大部分时间则花在各种页面元素， 如图像、 样式表、

脚本和 Flash 等，的下载上。 减少页面元素将会减少 HTTP 请求 次数。这是快速显示页面的关键所在

。 一种减少页面元素个数的方法是简化页面设计。 但是否存在其他方式，能做到既 有丰富内容，又能

获得快速响应时间呢？以下是这样一些技术： Image maps 组合多个图片到一张图片中。总文件大小变

化不大，但减少了 HTTP 请求次数从而加快了页面显示速度。 该方式只适合图片连续的情况；同时坐标

的 定义是烦人又容易出错的工作。 CSS Sprites 是更好的方法。它可以组合页面中的图片到单个文件

中，并使用 CSS 的 background-image 和 background-position 属性来现实所需的部分图片。 Inline

images 使用 data: URL scheme 来在页面中内嵌图片。这将增大 HTML 文 件的大小。组合 inline

images 到你的（缓存）样式表是既能较少 HTTP 请求， 又能避免加大 HTML 文件大小的方法。

Combined files 通过组合多个脚本文件到单一文件来减少 HTTP 请求次数。样式 表也可采用类似方法

处理。 这个方法虽然简单，但没有得到大规模的使用。 大 10 美国网站每页平均有 7 个脚本文件和 2

个样式表。当页面之间脚本和样式表变化 很大时，该方式将遇到很大的挑战，但如果做到的话，将能加

快响应时间。 减少 HTTP 请求次数是性能优化的起点。这最提高首次访问的效率起到很重要的 作用。

Tenni Theurer 的文章 Browser Cache Usage – Exposed!描述，40-60% 据 的日常访问是首次访问，

因此为首次访问者加快页面访问速度是用户体验的关 键。

法则 2. 使用 CDN(Content Delivery Network, 内容分发网络 )

用户离 web server 的远近对响应时间也有很大影响。从用户角度看，把内容部 署到多个地理位置分散

的服务器上将有效提高页面装载速度。 但是该从哪里开始 呢？

作为实现内容地理分布的第一步，不要试图重构 web 应用以适应分布架构。 改变 架构将导致多个周期

性任务，如同步 session 状态，在多个 server 之间复制数 据库交易。 这样缩短用户与内容距离的尝

试可能被应用架构改版所延迟，或阻止。 我们还记得 80-90%的最终用户响应时间花在下载页面中的各

种元素上，如图像 文件、 样式表、 脚本和 Flash 等。 与其花在重构系统这个困难的任务上，还不如

先 分布静态内容。 这不仅能大大减少响应时间，而且由于 CDN 的存在，分布静态内 容非常容易实现

。 CDN 是地理上分布的 web server 的集合，用于更高效地发布内容。 通常基于网络 远近来选择给具

体用户服务的 web server。 一些大型网站拥有自己的 CDN，但是使用如 Akamai Technologies,

Mirror Image Internet, 或 Limelight Networks 等 CDN 服务提供商的服务将是划算的。 在 Yahoo!

把静态内容分布到 CDN 减少了用户影响时间 20%或更多。切换到 CDN 的 代码修改工作是很容易的，但

能达到提高网站的速度。

法则 3. 【增加 Expires Header】
网页内容正变得越来越丰富，这意味着更多的脚本文件、样式表、图像文件和 Flash。 首次访问者将不

得不面临多次 HTTP 请求，但通过使用 Expires header， 您可以在客户端缓存这些元素。这在后续访

问中避免了不必要的 HTTP 请求。 Expires header 最常用于图像文件，但是它也应该用于脚本文件、

样式表和 Flash。 浏览器（和代理）使用缓存来减少 HTTP 请求的次数和大小，使得网页加速装载。

Web server 通过 Expires header 告诉客户端一个元素可以缓存的时间长度。 如果服务器是 Apache

的话，您可以使用 ExpiresDefault 基于当期日期来设置 过期日期，如： ExpiresDefault “access

plus 10 years” 设置过期时间为从请求时间开始 计算的 10 年。 请记住，如果使用超长的过期时间

，则当内容改变时，您必须修改文件名称。 在 Yahoo!我们经常把改名作为 release 的一个步骤：版本

号内嵌在文件名中，如 yahoo_2.0.6.js。

法则 4. 【压缩页面元素】
通过压缩 HTTP 响应内容可减少页面响应时间。从 HTTP/1.1 开始，web 客户端在 HTTP 请求中通过

Accept-Encoding 头来表明支持的压缩类型，如：

Accept-Encoding: gzip, deflate. 如果 Web server 检查到 Accept-Encoding 头，它会使用客户端支

持的方法来压 缩 HTTP 响应，会设置 Content-Encoding 头，如：Content-Encoding: gzip。 Gzip 是

目前最流行及有效的压缩方法。 其他的方式如 deflate，但它效果较差， 也不够流行。通过 Gzip，内

容一般可减少 70%。如果是 Apache，在 1.3 版本下需 使用 mod_gzip 模块，而在 2.x 版本下，则需

使用 mod_deflate。 Web server 根据文件类型来决定是否压缩。 大部分网站对 HTML 文件进行压缩。

但 对脚本文件和样式表进行压缩也是值得的。实际上，对包括 XML 和 JSON 在内的 任务文本信息进行

压缩都是值得的。 图像文件和 PDF 文件不应该被压缩，因为它 们本来就是压缩格式保存的。对它们进

行压缩，不但浪费 CPU，而且还可能增加 文件的大小。 因此，对尽量多的文件类型进行压缩是一种减

少页面大小和提高用户体验的简 便方法。
　gzip可以极大的加速网站.有时压缩比率高到80%,近来测试了一下,最少都有40%以上,还是相当不错的.

在Apache2之后的版本，模块名不叫gzip，而叫mod_deflate
　　

首先查看apache是否加载了mod_deflate.so模块，如果没有需要安装加载。找到并下载和当前apache版

本相同的源码文件，解压缩到/home目录下，在apache安装 目录下执行：

/usr/local/apache2/bin/apxs -i -c /home/httpd-2.0.63/modules/filters/mod_deflate.

会自动在 httpd.conf添加

LoadModule deflate_module modules/mod_deflate.so

或者

LoadModuledeflate_modulemodules/mod_deflate.so
LoadModuleheaders_modulemodules/mod_headers.so

打开httpd.conf后，先将上面两行配置前面的#号去掉，这样apache就会启用这两个模块，其中

mod_deflate是压缩模块，就是对要 传输到客户端的代码进行gzip压缩；mod_headers模块的作用是告诉

浏览器页面使用了gzip压缩，如果不开启mod_headers那么浏览 器就会对gzip压缩过的页面进行下载，

而无法正常显示。

在httpd.conf中加入以下代码，可以加到任何空白地方，如果担心加错地方，就放到http.conf文件的最

后一行，如果是虚拟服务器可以写.htaccess文件里面，然后放在项目下即可。

添加如下设置：

<IfModule mod_deflate.c>
<Location />
#Insert filter
SetOutputFilter DEFLATE   #必须的，就像一个开关一样，告诉apache对传输到浏览器的内容进行压缩
# Netscape 4.x has some problems…        Netscape 4.x 有一些问题，所以只压缩文件类型是

text/html的
BrowserMatch ^Mozilla/4 gzip-only-text/html  
# Netscape 4.06-4.08 have some more problems    Netscape 4.06-4.08 有更多的问题，所以不开启

压缩
BrowserMatch ^Mozilla/4.0[678] no-gzip
# MSIE masquerades as Netscape, but it is fine
# BrowserMatch bMSIE !no-gzip !gzip-only-text/html
# NOTE: Due to a bug in mod_setenvif up to Apache 2.0.59
# the above regex won’t work. You can use the following
# workaround to get the desired effect:
# BrowserMatch bMSIE !no-gzip !gzip-only-text/html force-gzip

#IE浏览器会伪装成 Netscape ，但是事实上它没有问题
BrowserMatch bMSIE !no-gzip !gzip-only-text/html

# Don’t compress images and other
SetEnvIfNoCase Request_URI .(?:gif|jpe?g|png)$ no-gzip dont-vary    　　　　　　#设置不对后

缀gif，jpg，jpeg，png的图片文件进行压缩
SetEnvIfNoCase Request_URI .(?:exe|t?gz|zip|bz2|sit|rar)$ no-gzip dont-vary      #同上，就

是设置不对exe，tgz，gz。。。的文件进行压缩
SetEnvIfNoCase Request_URI .(?:pdf|doc)$ no-gzip dont-vary 　　　　　　　　　　#同上，不对

pdf,doc文件压缩
AddOutputFilterByType DEFLATE text/html text/plain text/xml text/css    　　　　  #设置对文

件是文本的内容进行压缩，例如text/html text/css text/plain等
AddOutputFilterByType DEFLATE application/x-javascript
# Make sure proxies don’t deliver the wrong content
Header append Vary User-Agent env=!dont-vary

#DeflateFilterNote ratio ratio_info
#LogFormat '"%v %h %l %u %t “%r" %>s %b "%{Referer}i" "%{User-Agent}i"" (%{ratio}n)'

deflate
#CustomLog logs/deflate_log deflate
</Location>

停止apache服务在命令行模式下输入 apachectl stop 停止apach服务， apachectl restart 重启服务

如果报错如下：

Cannot load /usr/local/apache2/modules/mod_deflate.so into server:

/usr/local/apache2/modules/mod_deflate.so: undefine d symbol: deflate

解决如下：

vi /usr/local/apache2/bin/apr-config
修改LDFLAGS=" " 为 LDFLAGS="-lz"

停止启动服务：仍提示：

DeflateFilterNote not allowed here
CustomLog not allowed here

注释掉后，正常。

在火狐浏览器中使用yslow查看是否正常启动gzip压缩，需要注意的是要将浏览器缓存删除，否则会一直

显示不成功

法则 5. 【把样式表放在头上】
我们发现把样式表移到 HEAD 部分可以提高界面加载速度，因此这使得页面元素 可以顺序显示。 在很

多浏览器下，如 IE，把样式表放在 document 的底部的问题在于它禁止了网 页内容的顺序显示。 浏览

器阻止显示以免重画页面元素，那用户只能看到空白页 了。Firefox 不会阻止显示，但这意味着当样式

表下载后，有些页面元素可能需 要重画，这导致闪烁问题。 HTML 规范明确要求样式表被定义在 HEAD

中，因此，为避免空白屏幕或闪烁问题， 最好的办法是遵循 HTML 规范，把样式表放在 HEAD 中。

法则 6. 【把脚本文件放在底部】
与样式文件一样，我们需要注意脚本文件的位置。 我们需尽量把它们放在页面的 底部，这样一方面能

顺序显示，另方面可达到最大的并行下载。 浏览器会阻塞显示直到样式表下载完毕，因此我们需要把样

式表放在 HEAD 部分。 而对于脚本来说，脚本后面内容的顺序显示将被阻塞，因此把脚本尽量放在底

部意味着更多内容能被快速显示。 脚本引起的第二个问题是它阻塞并行下载数量。HTTP/1.1 规范建议

浏览器每个 主机的并行下载数不超过 2 个。 因此如果您把图像文件分布到多台机器的话，您

可以达到超过 2 个的并行下载。 但是当脚本文件下载时，浏览器不会启动其他的 并行下载，甚至其他

主机的下载也不启动。 在某些情况下，不是很容易就能把脚本移到底部的。如，脚本使用

document.write 方法来插入页面内容。 同时可能还存在域的问题。 不过在很多情 况下，还是有一些

方法的。 一个备选方法是使用延迟脚本（deferred script）。DEFER 属性表明脚本未包 含

document.write，指示浏览器刻继续显示。不幸的是，Firefox 不支持 DEFER 属性。 IE 中，脚本可能

被延迟执行，但不一定得到需要的长时间延迟。 在 不过从 另外角度来说，如果脚本能被延迟执行，那

它就可以被放在底部了。

法则 7. 【避免 CSS 表达式】
CSS 表达式是功能强大的(同时也是危险的)用于动态设置 CSS 属性的方式。IE， 从版本 5 开始支持

CSS 表达式，如 backgourd-color: expression((new Date()).getHours()%2?”#B8D4FF”:”#F08A00

”)，即背景色每个小时切换一 次。 CSS 表达式的问题是其执行次数超过大部分人的期望。 不仅页面

显示和 resize 时 计算表达式，而且当页面滚屏，甚至当鼠标在页面上移动时都会重新计算表达 式。

一种减少 CSS 表达式执行次数的方法是一次性表达式，即当第一次执行时就以 明确的数值代替表达式

。如果必须动态设置的话，可使用事件处理函数代替。如 果您必须使用 CSS 表达式的话，请记住它们

可能被执行上千次，从而影响页面 性能。

法则 8. 【把 JavaScript和 CSS 放到外部文件中】

上述很多性能优化法则都基于外部文件进行优化。 现在，我们必须问一个问题： JavaScript 和 CSS

应该包括在外部文件，还是在页面文件中？ 在现实世界中，使用外部文件会加快页面显示速度，因为外

部文件会被浏览器 缓存。如果内置 JavaScript 和 CSS 在页面中虽然会减少 HTTP 请求次数，但增大

了页面的大小。 另外一方面，使用外部文件，会被浏览器缓存，则页面大小会减 小，同时又不增加

HTTP 请求次数。 因此，一般来说，外部文件是更可行的方式。 唯一的例外是内嵌方式对主页更有 效

，如 Yahoo!和 My Yahoo!都使用内嵌方式。一般来说，在一个 session 中，主 页访问此时较少，因此

内嵌方式可以取得更快的用户响应时间。

法则 9.【 减少 DNS 查询次数】
DNS 用于映射主机名和 IP 地址，一般一次解析需要 20～120 毫秒。 为达到更高的 性能，DNS 解析通

常被多级别地缓存，如由 ISP 或局域网维护的 caching server，本地机器操作系统的缓存（如

windows 上的 DNS Client Service）， 浏览器。 的缺省 DNS 缓存时间为 30 分钟，Firefox 的缺省

缓冲时间是 1 分钟。 IE 减少主机名可减少 DNS 查询的次数，但可能造成并行下载数的减少。避免

DNS 查 询可减少响应时间，而减少并行下载数可能增加响应时间。 一个可行的折中是把 内容分布到至

少 2 个，最多 4 个不同的主机名上。

法则 10. 【最小化 JavaScript代码】

最小化 JavaScript 代码指在 JS 代码中删除不必要的字符，从而降低下载时间。 两个流行的工具是

JSMin 和 YUI Compressor。 混淆是最小化于源码的备选方式。 象最小化一样，它通过删除注释和空格

来减少 源码大小，同时它还可以对代码进行混淆处理。 作为混淆的一部分，函数名和变 量名被替换成

短的字符串，这使得代码更紧凑，同时也更难读，使得难于被反 向工程。Dojo Compressor

(ShrinkSafe)是最常见的混淆工具。 最小化是安全的、直白的过程，而混淆则更复杂，而且容易产生问

题。从对美国 10 大网站的调查来看，通过最小化，文件可减少 21%，而混淆则可减少 25%。 除了最小

化外部脚本文件外，内嵌的脚本代码也应该被最小化。 即使脚本根据法 则 4 被压缩后传输，最小化脚

本刻减少文件大小 5%或更高。

法则 11. 【避免重定向】
重定向功能是通过 301 和 302 这两个 HTTP 状态码完成的，如： HTTP/1.1 301 Moved Permanently

Location: http://example.com/newuri Content-Type: text/html 浏览器自动重定向请求到 Location

指定的 URL 上，重定向的主要问题是降低了 用户体验。 一种最耗费资源、经常发生而很容易被忽视的

重定向是 URL 的最后缺少/，如访 问 http://astrology.yahoo.com/astrology 将被重定向到
http://astrology.yahoo.com/astrology/。在 Apache 下，可以通过 Alias，mod_rewrite 或

DirectorySlash 等方式来解决该问题。

法则 12. 【删除重复的脚本文件】
在一个页面中包含重复的 JS 脚本文件会影响性能，即它会建立不必要的 HTTP 请求和额外的 JS 执行

。 不必要的 HTTP 请求发生在 IE 下，而 Firefox 不会产生多余的 HTTP 请求。 额外的 JS 执行，不

管在 IE 下，还是在 Firefox 下，都会发生。 一个避免重复的脚本文件的方式是使用模板系统来建立

脚本管理模块。 除了防止 重复的脚本文件外，该模块还可以实现依赖性检查和增加版本号到脚本文件

名 中，从而实现超长的过期时间。

法则 13. 配置 ETags  在使用多服务器集群和镜像时需要去掉ETag验证，一台服务器时可以使用
ETags 是用于确定浏览器缓存中元素是否与 Web server 中的元素相匹配的机制， 它是比 last-

modified date 更灵活的元素验证机制。ETag 是用于唯一表示元素 版本的字符串，它需被包括在引号

中。Web server 首先在 response 中指定 ETag： HTTP/1.1 200 OK < 03:03:59 2006 Dec 12>

10c24bc-4ab-457e1c1f” Content-Length: 12195 后来，如果浏览器需要验证某元素，它使用 If-

None-Match 头回传 ETag 给 Web server，如果 ETag 匹配，则服务器返回 304 代码，从而节省了下载

时间： GET /i/yahoo.gif HTTP/1.1 Host: us.yimg.com < 03:03:59 2006 Dec 12> 10c24bc-4ab-

457e1c1f” HTTP/1.1 304 Not Modified ETags 的问题在于它们是基于服务器唯一性的某些属性构造的

，如 Apache1.3 和 2.x，其格式是 inode-size-timestamp，而在 IIS5.0 和 6.0 下，其格式是

Filetimestamp:ChangeNumber。这样同一个元素在不同的 web server 上，其 ETag 是不一样的。这样

在多 Web server 的环境下，浏览器先从 server1 请求某 元素，后来向 server2 验证该元素，由于

ETag 不同，所以缓存失效，必须重新 下载。

因此，如果您未用到 ETags 系统提供的灵活的验证机制，最好删除 ETag。删除 ETag 会减少 http

response 及后续请求的 HTTP 头的大小。微软支持文章描述了 如何删除 ETags，而在 Apache 下，只

要在配置文件中设置 FileETag none 即可。
配置ETags

在yslow中有一个选项，Configure entity tags (ETags) / 配置ETags。什么是ETag？ETag是用于服务

器和浏览器间文档校验的一种手段，如果匹配就使用缓存版本，不匹配的话，重新下载。

但是使用CDN的时候，不同镜像间的ETag是不一样的，这就导致了ETag的失灵。删除ETag,网页速度将得

到极大的提升。

Add an Expires header已经对浏览器缓存机制中的Cache-Control和Expires进行了配置，这一条评测的

是另外两个：Last-Modified和ETag。简单的说，即使设置了文件的期限，浏览器在访问资源时也会因为

Last-Modified和ETag而重新下载整个资源.

所以简单的做法是关闭Last-Modified和ETag. 在Apache中做如下配置:


FileETag None

Header unset Last-Modified
如果是多服务器负载均衡，可以设置为FileETag MTime Size，apache默认设置为FileETag INode MTime

Size，去掉INode。
ETag如何帮助提升性能？

聪明的服务器开发者会把ETags和GET请求的“If-None-Match”头一起使用，这样可利用客户端（例如浏

览器）的缓存。因为服务器首先产生ETag，服务器可在稍后使用它来判断页面是否已经被修改。本质上

，客户端通过将该记号传回服务器要求服务器验证其（客户端）缓存。

其过程如下：

    客户端请求一个页面（A）。
    服务器返回页面A，并在给A加上一个ETag。
    客户端展现该页面，并将页面连同ETag一起缓存。
    客户再次请求页面A，并将上次请求时服务器返回的ETag一起传递给服务器。
    服务器检查该ETag，并判断出该页面自上次客户端请求之后还未被修改，直接返回响应304（未修改

——Not Modified）和一个空的响应体。

法则 14. 缓存 Ajax
性能优化法则同样适用于 web 2.0 应用。提高 Ajax 的性能最重要的方式是使得 其 response 可缓存

，就象“法则 3 增加 Expires Header”讨论的那样。以下其 他法则同样适用于 Ajax，当然法则 3 是

最有效的方式



【前台css优化】
1、将所有css代码写成一行，删除注释，去除空格，减少字节。可以使用编辑器达到，也可以使用一些

在线的工具进行整理优化如：http://www.css88.com/tool/csstidy/
2、压缩图片，第一步在设计网页时，利用photoshop将图片的色彩及压缩率调整到适合数值再导出，但

这并不是容量最小，压缩率最高的图片，可以利用其他软件再次将其压缩。pngoptimizer软件是用来压

缩png，gif图片的
3、使用简写，Margin、border、padding、background、font、list-style和outline 都是可以进行简

写的属性
4、避免使用@import url()使用link标签
5、将css样式全部放入head头部标签中，浏览器先下载加载样式文件有助于显示页面内容
6、将css放入外部文件中，因为css放在外部可以缓存起来

【前台js脚本优化】
1将外部脚本，何内部脚本全部压缩，即删除空格和注释
2将多个外部脚本合并成一个，减少http请求连接数
3将脚本代码，及脚本连接放在文档最后，脚本很多都是需要等页面加载完成后才会执行的，所以放在文

档最后面再让浏览器去下载加载比放在页头要好，因为有一个下载堵塞的原因，下载脚本的时间里没有

下载css样式文件，页面显示将会不够友好，而且浏览器并行下载链接数只有两个，脚本放在页头那么下

载脚本时就无法下载css文件




【后台mysql数据库优化】
mysql优化：
一、服务优化
1、选择合适的版本：mysql 5.x
2、选择合适的存储引擎：myISAM，表级锁，查询快。InnoDB 行级锁，事务支持，
3、重要的配置：Max_connections,Query_cache,key_buffer,sort_buffer,
Innodb_buffer_pool_size,Innodb_flush_log_at_trx_commit
二、硬件优化：
1、SSD>SAS>SCSI，随机存取
2、使用内存越大越好，多核cpu
三、应用优化：
1、对数据进行分表，分库。垂直切分，按照业务或产品切分。水平切分，按照数据拆分。
2、尽量减少查询。可以缓存的就不要查询数据库，部分数据可以借助Shpinx服务器解决检索需求不用从

数据库中查询。
3、要注意的查询。
给需要的字段加上索引，比如需要where或order by的字段；
不要like "%key%"，不使用索引，可以like"key%"；
如果可以少使用select * from biaoming尽量查询需要的字段。
避免使用join/group by /distinck；
innoDB表不要count统计