网站前端性能优化
1 . 减少 HTTP 请求
减少HTTP 请求可能是大家都能理解的，可以有效的减少服务器的压力。尽量合并 JS 文件、 CSS 文件，和图片文件。这可能不太合符软件工程所推荐的模块化开化，增加维护成本，但适量的合并文件是必须的。图片则可以使用 CSS Sprites ，将多幅图片合并为一幅单独的图片，这样就可以将多次图片请求减少到一次，具体 CSS Sprites 的实现可以自己搜索。有人可能会认为合并图片会使图片总体积变大，其实合并后的图片比原来分离的图片的总和还要小，因为它减少了图片自身的颜色表、格式信息的开销。相信你在各大门户网站经常会看到使用这种手法写的 CSS。
2. 使用 HTTP Cache
使用HTTP Cache ，可以有效的减少 HTTP 请求次数。不了解的可以看这篇文件 http://longrujun.name/index.php/2009/03/04/etag%E5%92%8Cexpires/ 。在 PHP 中可以使用 header() 函数，如：
header(“Last-Modified: $modifiedTime”); // $modifiedTime 通常是内容最后修改时间
$time = date(‘D, d M Y H:i:s’, time() + $seconds) . ’ GMT’;
header(“Expires: $time”);
使用header(“ Cache-control: max-age=5 “)，可能会比使用 header(“Expires: $time”) 更好，因为前者直接告诉浏览器5 秒钟内不需要重新访问服务器，而后者必须还必须发送一次 HTTP 请求，比较 $time 与服务器时间，然后才觉得是否重新返回新的数据。
3. 使用服务器 gzip 压缩文件
现在浏览器在HTTP 请求中都是传递一个 Accept-Encodingd 的参数，告诉服务端它支持什么样的压缩协议，通常有 gzip,deflate 。在服务器端，你也必须配置你的 web 服务器告诉它需要压缩什么文件，比如 CSS,JS 等（图片就不需要了，因为图片本来就已经压缩过了）。 Nginx 中使用 gzip 指令配置，详情见 http://wiki.nginx.org/NginxChsHttpGzipModule 。
4. 请将 CSS 文件放在头部标签 <head></head> 之间，哪怕是暂时用不着表现的 CSS 文件
有人会觉得页面加载后暂时不呈现给用户的CSS 文件可以放在页面的底部，可以让其它 CSS 文件先加载渲染，可加快访问页面呈现给用户的速度，其实却不然。浏览器确实是从头到尾逐步加载 CSS ， JS 等文件，但是它会等到所有 CSS 文件都加载完成之后，才开始渲染页面，因为可以避免样式变化而重绘页面元素。
5. 请将JS 脚本放在页面底部
这跟前面一条恰恰相反。原因在于：在下载JS 脚本文件时，浏览器会禁用并行下载，这样如果该 JS 没有下载下来，浏览器会一直等待。浏览器这样做的目的很明确：（ 1 ）放在 JS 会使用 document.write() 修改页面，确保页面恰当的布局；（ 2 ）如果有多个 JS 文件要下载，可以防止未下载的 JS 文件中的变量函数在已经下载的 JS 文件中执行，导致错误。
6. 避免使用CSS 表达式
CSS表达式是强大的设置动态 CSS 属性的方式。如在 IE 中 CSS 没有 min-width 属性，可以使用这样：
div{
width:expression( document.body.clientWidth<600?”600px”:”auto”);
min-width:600px;
}
Firefox等标准 DOM 浏览器会忽略 width 属性，而使用 min-width 。而 IE 刚刚相反，这样就实现了再 IE 上实现 min-width 属性。问题在于，当页面更新如鼠标移过，页面滚动都会运行该表达式，可能会导致上万次的求值。最好的方法是不是用改表达式，改用 JS 绑定标签事件，使用 JS 来动态改变该标签的 CSS 值。
7. 建议使用外部JavaScript 和 CSS
虽然使用外部JS 和 CSS 文件会增加 HTTP 请求，但是如果在网站的多个页面中用到该文件，并且对该文件设置了浏览器缓存，在下次请求时，就无需重新加载了。
8. 压缩JS 和 CSS 文件
压缩JS 文件可以精简 JS 文件体积，这对提供大文件下载速度是不言而喻的。另外压缩后的 JS 不容易被阅读，这也提高了 JS 的代码安全。但是对于开发人员来说维护成本就会较高。具体的压缩软件可以自己去搜索，推荐一个 Js Min 。 CSS文件压缩道理亦然如此。
