了解常见的网站性能优化技巧

首先我们要学一些优化网站性能和体验的理论和基础知识，雅虎已经帮我们总结好了，详见参考链接中的几篇文章，有好心人已经给翻译成中文了。这里面提到的一些技巧可操作性都很强，建议每一个网站开发人员都仔细学习并进行实践，可以说不了解这里面说的优化技巧，提升网站前端性能就无从谈起。

诊断网站性能

要想优化网站的前端性能，首先要查看最影响前端性能的瓶颈是哪些？最常用的工具就是Google的Page Sped和Yahoo的YSlow，这两个工具都是在Firefox下使用的，并且是基于FireBug的，FireBug是前端开发人员必备的一个插件了。这两个工具可以帮你诊断你的页面的性能瓶颈在哪里，比如打开你的站点首页共消耗了多少网络流量，进行了多少次HTTP请求，每个页面组件是否可以进行缓存，页面加载的各个执行过程各占用了多少时间，加载中是否有阻塞情况，页面组件并行加载情况如何，图片是否还可以进行无损压缩，脚本和样式放置的位置是否合理，是否删除了不必要的空白，是否进行了gzip的压缩等等。知道了这些信息，你就可以有针对性的进行网站性能优化，先把最影响性能的地方优化掉。

这两个工具使用起来也很简单，详见参考链接中的两篇文章。

进行优化实践

根据我对网站优化的学习和实践，总结出来一些经验：一般网站性能消耗都集中在网络下载上，包括页面本身的HTML以及图片，脚本，样式等组件的下载，尤其是在网速比较慢的时候，下载这些东西要花费整个网页呈现的大部分时间，这些东西下载完成后，本地的渲染和展现一般会很快，除非有很复杂的效果或脚本，而服务端执行的快慢要看具体服务器的逻辑，优化起来复杂度较高，往往站点本身还要访问后端的其它服务器，数据库等。

解决这个首先有两点可以入手，一是对页面组件进行压缩，web用的图片一般本身就是压缩格式，所以压缩空间不太大，还会额外占用服务器CPU，但脚本，样式，HTML这些文本内容用GZIP压缩的压缩比就非常大了，而且现在大多数浏览器都支持GZIP压缩。另一方面是对脚本，样式，图片加Http Expire头，加上这个过期头，网站只需要第一次打开时需要下载这些网页组件，之后再打开甚至连HTTP请求都不用发起，直接在本地加载了，当然脚本和样式服务端有可能以后还会变化，我们需要利用URL重写进行脚本和样式引用的自动改名，以便在脚本和页面更新后刷新利览器缓存。

可喜的是要做到这两点，在IIS7里非常简单，首先说压缩，在win7里利用“打开或关闭windows功能”里打开IIS性能工具里的“动态内容压缩”和“静态内容压缩”，如图1。

然后在IIS管理器里，选中要压缩的网站，双击压缩按钮把动态压缩和静态压缩的勾加上就行了，默认会对mimetype为text/*和application/x-javascript进行压缩，一般这就够用了，但IIS7默认对.js文件使用application/x-javascript的mimetype，而默认对application/x-javascript进行的是动态压缩，动态压缩和静态压缩的区别就是不会被IIS的缓存机制缓存，每次访问都会去读取文件或路由请求到后面的模块，所以我们要把.js的mimetype改成application/javascript，如图2

然后对application/x-javascript进行动态压缩，对application/javascript进行静态压缩，需要配置C：\Windows\System32\inetsrv\config\applicationHost.config，如下图3

对页面组件进行了压缩有已经减少了不少网络流量，提升了很大的性能，但是一些脚本和样式一般情况下很少改变，每次访问网页都要重新下载还是会消耗不少网络流量，这就需要配置静态文件的过期时间了。

IIS7的管理器里有个HTTP响应标头的功能，一般网站的脚本、样式和图片分别放在scripts，styles，images目录下，我们直接为这几个目录下的文件设置过期时间为100天就可以了，在IIS7的管理器里直接可以进行操作，具体见参考链接，就不重复了，设置成功后会在这3个子目录里分别生成一个web.config文件，并设置cacheControlMode=UseMaxAge，cacheControlMaxAge=100.00:00:00这样设置以后优化效果就很好了，第一次打开网页后，再次打开网页要比以前快好多倍，但是有一个问题就是如果你的样式或脚本修改后，如果客户端不刷新页面，就不会生效了。解决这个问题利用URL Rewrite把样式，脚本的引用路径加一个时间戳，如果脚本改动了后，时间戳就改动了，引用的文件名就变了，浏览器就会下载新的样式了，而新的样式实际上经过url rewrite后还是以前的名字，比如/scripts/base.201001111502.js实际上就是/scripts/base.js，具体操作见参考文章。

但文章里说的是iis6.0用的是URLRewrite组件，在IIS7里有一个免费的rewrite模块，在微软网站下载下来安装上就行了，它的配置规则和URLRewrite不太一样，最重要的区别就是对正则分组匹配不是用$1，$2引用，而是用{R:1}这种格式引用，还有就是目标url的配置不需要正则转义符，比如“。”就是“。”，不需要是“\。”，如果不注意这个就等着404吧，具体IIS7.5下的重写模块使用和注意事项可看后面的参考链接，我这里的配置如下
复制代码 代码如下:
{{{
<rewrite>
<rules>
<rule name="static_file_auto_version">
<match url="^(scripts|styles|images)/(.*?)\.[0-9]+\.(css|js|gif|png|jpg)" />
<action type="Rewrite" url="{R:1}/{R:2}.{R:3}" />
</rule>
</rules>
</rewrite>
}}}

小节

进行了这两处优化后，网站性能已经提升了不少了，接下来再按照雅虎提供的优化原则和page speed的提示看看还有哪些是可以比较简单而有效的进行优化的。（来源：蛙蛙池塘）