最近在研究前端优化,在看了雅虎前端优化34条规则后,将最重要的几条加上自己的理解整理如下:

  • 同域名限制。浏览器对同域名的并发请求数有限制,不同浏览器略有不同,但一般都在4-6之间。chrome一个域名同时最多6个请求,为了绕过这个限制,可以对静态资源可以单独设置域名。
  • 减少请求(minimize http requests),研究表明40%-60%是初次访问,可见初次访问比例还是很大的,但是,初次访问不带cache,这样就会给服务器带来比较大的访问量。鉴于此,为了达到良好的体验,通常我们有以下几种方法。
  • 压缩js和css文件,将js压缩到一个文件,将css压缩到一个文件,目的是为了减少http请求。
  • 压缩图片,css sprite雪碧图,将很多小图搞成一个大图,通过backgroud-image和background-position来指定位置。具体的压缩措施,一般通过设置请求头的accept-encoding:gzip、deflate, 浏览器默认都会添加这个请求头,相应的服务器需要开启压缩才能work,这个查查具体服务器设置就知道了。通常来说,一般都会使用gzip压缩算法,因为gzip比delate更流行、压缩的更有效。通常html、xml、json、js、css文件都应该压缩,而image和pdf不应该压缩,以为,压缩这些可能导致文件更大。
  • css和js外部化,也就是将css和js与html文件分离。比如本来css、js都写在a.html中,这种css、js嵌套在html中,会增加html大小,并且每次请求时都会加载。虽然外部化增加了文件个数,增加了http请求次数,但至少有两个好处,一是,便于管理。二是,浏览器可以缓存,加快了访问速度。
  • 使用客户端缓存,比如设置http 请求的Etag、cache-control、Pragma等。
  • 使用CDN,由于CDN的原理能很显著的减少文件下载时间。