网站前端性能优化

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文件压缩道理亦然如此。

posted @ 2011-05-27 14:44 winxp_520 阅读(...) 评论(...) 编辑 收藏