首先,看一下最常见的雅虎14条规则(更多详细信息点击这里)

规则

类别

1. 尽可能的减少 HTTP 的请求数

content

2. 使用 CDN(Content Delivery Network)

server

3. 添加 Expires 头(或者 Cache-control )

server

4. Gzip 组件

server

5. 将 CSS 样式放在页面的上方

css

6. 将脚本移动到底部(包括内联的)

javascript

7. 避免使用 CSS 中的 Expressions

css

8. 将 JavaScript 和 CSS 独立成外部文件

javascript css

9. 减少 DNS 查询

content

10. 压缩 JavaScript 和 CSS (包括内联的)

content

11. 避免重定向

server

12. 移除重复的脚本

javascript

13. 配置实体标签(ETags)

css

14. 使 AJAX 缓存

第一,尽可能的减少 HTTP 的请求数

确实yahoo介绍的那样,用户进入一个网站(或者web应用),有80%的响应时间花费在前端。大部分时间都在下载页面中的所有组件,比如图像,样式,脚本,flash等等。减少组件数量,就会减少呈现页面所需要的http请求数量,这是页面响应速度更快的关键。

常用的方法,就是合并css、js以及Image mapscss sprites。在如今前端自动化构建工具(比如webpack、gulp、grunt)盛行的情况下 ,合并css、js已经不是问题。而css sprites是指只用将页面上的背景图合并成一张,然后通过css的background-position属性定义不同的值来取他的背景。大部分网站都是这么搞得。

第二,使用 CDN(Content Delivery Network)

用户与Web服务器的距离对响应时间有影响。在多个地理位置分散的服务器上部署您的内容将使您的网页从用户的角度更快加载。

内容分发网络,其基本思路是尽可能避开互联网上有可能影响数据传输速度和稳定性的瓶颈和环节,使内容传输的更快、更稳定。通过在网络各处放置节点服务器所构成的在现有的互联网基础之上的一层智能虚拟网络,CDN系统能够实时地根据网络流量和各节点的连接、负载状况以及到用户的距离和响应时间等综合信息将用户的请求重新导向离用户最近的服务节点上。其目的是使用户可就近取得所需内容,解决 Internet网络拥挤的状况,提高用户访问网站的响应速度。

说白了,就是北京用户访问北京节点服务器上的内容,上海用户访问上海节点服务器上的内容。

第三,添加 Expires 头(或者 Cache-control)

网页内容越来越丰富,诸如css、js、image、flash等越来越多。首次访问页面可能需要发出多个http请求,如果使用Expires设置缓存时间,即可避免后续页面浏览中不必要的http请求。

做了缓存以后,浏览器以后就不需要再从服务器下载这些文件而是而直接从缓存中读取,这样再次访问页面的速度会大大加快。

第四,Gzip 组件

在服务器端对文件进行压缩,在浏览器端对文件解压缩,可有效减少通信传输的数据量。目前的浏览器都能良好地支持 gzip,而且gzip的压缩比例非常大,文本文件的压缩效率可达到80%以上,因此HTML、CSS、javascript文件启用GZip压缩可达到较好的效果。但是压缩对服务器和浏览器产生一定的压力,在通信带宽良好,而服务器资源不足的情况下要权衡考虑。

从HTTP / 1.1开始,Web客户端通过HTTP请求中的Accept-Encoding标头指示对压缩的支持

    Accept-Encoding:gzip,deflate

Web服务器通过响应中的Content-Encoding标头通知Web客户端。

    内容编码:gzip

第五,将 CSS 样式放在页面的上方

浏览器会在下载完成全部CSS之后才对整个页面进行渲染,因此最好的做法是将CSS放在页面最上面,让浏览器尽快下载CSS。样式表禁止在许多浏览器(包括Internet Explorer)中进行渐进式呈现。将样式表放在文档底部,这些浏览器会阻止渲染,以避免在样式更改时重新绘制页面元素。所以用户就会停留在查看空白页面,用户体验非常不好。

第六,将脚本移动到底部(包括内联的)

将脚本放在页面最下面的目的主要有两点:

  • 1.防止script脚本的执行阻塞页面的下载。在页面加载的过程中,当浏览器读到js执行语句的时候一定会把它全部解释完毕后,才会继续读下面的内容。
  • 2.脚本引起的问题是它们会阻止并行下载。HTTP / 1.1规范建议的浏览器每个主机的并行下载数不超过两个(IE只能为2个,其他浏览器如谷歌、火狐等都是默认设置为2个,不过新出的ie8可以达6个)。如果把图像文件分布到多台机器的话,可以达到超过2个的并行下载。但是当脚本文件下载时,浏览器不会启动其他的并行下载。

第七,避免使用 CSS 中的 Expressions

CSS表达式是动态设置CSS属性的强大(也是危险的)方法。从版本5开始,它们在Internet Explorer中受支持,但从IE8开始已弃用。例如,可以使用CSS表达式将背景颜色设置为每隔一小时交替一次:

    background-color:expression(new Date()).getHours()%2?"#B8D4FF":"#F08A00");

当这段代码执行之后,只是鼠标动来动去,或者滚动条上下拖动几下,就会执行数千次。这些函数需要一次一次的执行,毫无疑问地会拖累页面执行的效率,乃至浏览器的性能。

第八,将 JavaScript 和 CSS 独立成外部文件

在浏览器使用外部文件通常会产生更快的页面,因为浏览器会缓存JavaScript和CSS文件。

每次请求HTML文档时,都会下载HTML文档中内联的JavaScript和CSS。这减少了所需的HTTP请求数量,但增加了HTML文档的大小。另一方面,如果JavaScript和CSS位于浏览器缓存的外部文件中,则HTML文档的大小会减少,而不会增加HTTP请求的数量。

第九,减少 DNS 查询

域名系统(DNS)将主机名映射到IP地址,就像电话本将人名映射到他们的电话号码一样。当您在浏览器中输入www.bamzc.top时,浏览器联系的DNS解析器会返回该服务器的IP地址。DNS是有成本的,DNS通常需要20-120毫秒才能查找给定域名的IP地址。直到DNS查找完成后,浏览器才能从此域名下载内容。

减少域名的数量可减少DNS查找的数量,但是可能会减少页面中发生的并行下载量。避免DNS查找会缩短响应时间,但减少并行下载可能会增加响应时间。所以,yahoo的建议是一个页面所包含的域名尽量控制在2-4个。

第十,压缩 JavaScript 和 CSS (包括内联的)

压缩代码是从代码中删除不必要的字符以缩小其大小从而缩短加载时间的做法。当代码缩小时,所有注释都将被删除,以及不需要的空白字符(空格,换行符和制表符)。

压缩js和css作用很显然,减少页面字节数。容量小页面加载速度自然也就快。

第十一,避免重定向

重定向用于将用户从一个URL重新路由到另一个URL。

常用重定向的类型

  • 301:永久重定向,主要用于当网站的域名发生变更之后,告诉搜索引擎域名已经变更了,应该把旧域名的的数据和链接数转移到新域名下,从而不会让网站的排名因域名变更而受到影响。
  • 302:临时重定向,主要实现post请求后告知浏览器转移到新的URL。
  • 304:Not Modified,主要用于当浏览器在其缓存中保留了组件的一个副本,同时组件已经过期了,这是浏览器就会生成一个条件GET请求,如果服务器的组件并没有修改过,则会返回304状态码,同时不携带主体,告知浏览器可以重用这个副本,减少响应大小。

当页面发生了重定向,就会延迟整个HTML文档的传输。在HTML文档到达之前,页面中不会呈现任何东西,也没有任何组件会被下载。

第十二,移除重复的脚本

在一个页面中包含两次相同的JavaScript文件会使性能受损。这方面来看,不仅是从性能方面考虑,代码规范方面也是这样。其实,编码过程中极有可能会出现重复的代码。因此,选择一个好的css框架或者js框架就比较重要了。

第十三,配置实体标签(ETags)

(这块的话,还是翻译一下吧,熟悉一下原理)实体标签(ETags)是Web服务器和浏览器用来确定浏览器缓存中的组件是否与源服务器上的组件匹配的机制。

(一个“实体”是另一个词“组件”:图像,脚本,样式表等)ETag添加以后,通过提供一种机制来验证最后修改日期的实体。ETag是唯一标识组件特定版本的字符串。唯一的格式约束是字符串被引用。原始服务器使用ETag响应头指定组件的ETag 。

      HTTP/1.1 200 OK
      Last-Modified: Tue, 12 Dec 2006 03:03:59 GMT
      ETag: "10c24bc-4ab-457e1c1f"
      Content-Length: 12195

之后,如果浏览器必须验证组件,它将使用If-None-Match标头将ETag传递回原始服务器。如果ETags匹配,则返回一个304状态码,在此示例中将响应减少12195字节。

      GET /i/yahoo.gif HTTP/1.1
      Host: us.yimg.com
      If-Modified-Since: Tue, 12 Dec 2006 03:03:59 GMT
      If-None-Match: "10c24bc-4ab-457e1c1f"
      HTTP/1.1 304 Not Modified

第十四,使 AJAX 缓存

通过在后台与服务器进行少量数据交换,Ajax 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新,向用户提供即时反馈。

我曾经做过这样一个事儿,通过gulp,对所有的静态资源做版本控制,同时记录到json文件中。然而,网页上面访问的静态资源文件(比如,js,css,img)会初步缓存到页面,每次请求页面会监测版本控制文件内容是否更改,以此来控制静态资源文件是否需要缓存。从而达到提升性能的效果。