网站性能优化

面试中经常会被问到这类问题，这里做一个总结，可能不会非常全面，希望大家可以一起交流。

首先，想跟大家推荐一个浏览器插件YSlow，安装之后浏览器地址栏后面会有一个类似于表盘的图标，如下图：

如何使用呢？
比如要测一下淘宝页面的网站性能，首先打开淘宝页面，然后点击YSlow的小图标，会弹出一个新的浏览器页面，点击Run Test

评估结果如下图所示：

这里不仅有整个的评级，也有各个方面的评级，以及评级低的时候哪里需要改进。当然，我个人觉得这只是一个参考，不是那么绝对的，因为毕竟我们实际开发中遇到的问题会很多很多，往往需要我们去全局去权衡。

下来我想对上面评估的每一条做一个分析。从评估页面可以看到，整个评估分为6个大的部分，分别是

ContentCSSJavaScriptImageCookieServer

Content

优化一：尽量减少Http请求数量

大家都知道Http请求是基于TCP连接的，每次TCP连接则需要三次握手来建立，这个过程显然是需要耗费时间的，如果在网络不太理想的情况下，可能需要更长的时间。

优化二： 减少DNS查询

什么是DNS查询？当我们访问一个域名时，在浏览器输入一串字符，但其实最终是根据IP地址来发送到对应服务器的，所以DNS解析就是为了将我们输入的域名解析成对应的IP地址，从而经过路由找到对应服务器。那么DNS查询过程是怎么一个过程？首先会在浏览器缓存中找是否有该域名对应的IP地址，如果没有就去操作系统的缓存中查找，如果操作系统缓存中没有，就去最顶级的域名服务器去一级一级查询，直到找到该域名对应的地址。找到之后就将对应IP返回，并记录在缓存中，以便下一次查询时能够节省时间。所以，我们要尽量减少DNS查询，查询的次数多了，那么需要的时间就会长。

优化三：避免URL重定向

我们有时候在浏览网页时，也会遇到过网页被重定向的情况，通常都是在原始页面会有提示说是重定向到另外的页面，正在跳转，这个过程我们都可以体会到比较慢，因为当我们请求了原始页面并刷出来之后，会接收到一个302或301的状态码，然后向重定向的服务器发送一个请求，在这个过程中，网页中一般是不会显示什么内容的。因此减少重定向可以有效提升网站性能。

CSS和JavaScript

优化一： CSS尽量放在顶部（Head里面），JS尽量放在底部（Body结束之前）

CSS文件描述的是网页的样式，如果放在前面，就可以在HTML文档加载的时候，就顺便渲染出CSSOM树；而JavaScript文件具有阻塞性，如果放在前面，有可能会阻塞body里面内容的显示，因此比较好的方式是这样放置。

优化二： 减小JS和CSS文件

我的理解是，将JS和CSS文件进行压缩，好像可以利用Utify这个工具。

Cookie

优化一： 减少Cookie的大小

优化二： 使用Cookie-free域名

上面两种优化方式都是基于Cookie要随着Http报文传输到服务端的这一个事实，所以如果Cookie过大，那么传输就会比较慢；另外，如果服务端并不需要Cookie信息，那么就可以利用Cookie-free域名，不用传输cookie。

Server

Server端的优化主要在压缩，HTTP缓存这些方面。
我想说的是第一点，避免空的src和href，貌似现在的浏览器遇到这种情况不会请求服务器，但是在比较旧的浏览器中还是会请求的，我们并不能防止别人不去用低版本的浏览器，所以这一点还需要保留。

Images

优化一： 不要缩放图片

在浏览器解析HTML页面时，遇到设置了大小的图片节点，一般会预留一定的位置，而如果真实图片跟预留的图片大小不一样，势必会造成不必要的重绘和回流，这个在浏览器中开销还是比较大的。

除了上面Yahoo推出的几个方面，我个人还有一些总结：
比如利用JS事件委托；减少作用域链的查找；使用更快的算法等等都是优化的方式。