Yahoo 14条军规

作为网页的使用者,我们总希望很快的打开网站,让网页呈现在我们眼前。而作为网站的建设者,更希望以较低的成本和较快的速度来服务于用户。那么就出现了一个问题,如何能让用户快速的打开自己的网站。
这时互联网的先行者YaHoo就给了我们如何提高网站速度的知识。到目前这些知识一共有35条!而这些知识被技术人员们统称为YaHoo军规。今天主要讲解其中的14条。

1、减少Http请求

那么问题来了,什么是HTTP请求呢

官方给出的解释是:从客户端到服务器端的请求消息。包括消息首行中,对资源的请求方法,资源的标识符及使用协议。

这个解释非常的准确但是不利于我们的理解。

简单的说:当我们打开网页的时候,所看见的所有文字、图片、多媒体等等,这一切的内容都是从服务器上获取的,每一个内容的获取就是Http请求。

通过下面的图片我们可以很直观的看到,在打开一个页面,我们请求了很多文字信息,图片信息、脚本文件和样式文件。
我们可以合并这些文字信息、图片信息、脚本文件和样式文件。这样就大大减少了http请求,这样对服务器的压力就减轻了很多。

Yahoo 14条军规_第1张图片

2、使用CDN(内容分发网络)

那么什么是CDN?

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

看到这我已经晕了,那我们用菜鸟的语言解释一下吧。

简单的说就是:在理你最近的地方放置一台性能更好链接更顺畅的副本服务器,让你能够以最近的距离,最快的速度获取内容。
同样我们通过一张图解释下:

Yahoo 14条军规_第2张图片
很显然这是需要服务器的,也就是需要很多钱才能完成的事。

3、添加Exprire/Cache-Control头

3.1 expire

当用户发送资源请求时,Apache服务器的expire模块在返回资源的同时会返回带有expire的http头。

expire头的内容是一个时间值,这个值就是资源在本地的过期时间、存在本地。在本地缓存阶段,找到一个对应的资源值,当前时间还没有超过资源国旗时间,就直接使用这个资源,不会再发送http请求。


Yahoo 14条军规_第3张图片

3.2 Cache-Control

Cache-Control也是http协议中常用的头部之一,顾名思义,他是负责控制页面的缓存机制。如果该头部知识缓存,换UN的内容也会存在本地,操作流程和expire类似,但也有不同的地方,cache-control有更多的选项,而且也有更多的处理方式。

简单的说:就是服务器在返回请求的时候发了一个时间值,而本机则是通过这个时间值来判断时候重新加载页面。

4、使用Gzip压缩

什么是Gzip压缩呢

Gzip压缩就是文件在服务器上进行压缩,然后在传输。
这样可以显著的减少文件的大小。压缩完毕之后,浏览器会对压缩之后的文件进行解压缩。目前市面上的浏览器都能很好的支持Gzip。
在Yahoo,所有的文件都要求被压缩。

下图是我们使用一个79kb的JavaScript文件进行压缩的例子。
Yahoo 14条军规_第4张图片

这个Gzip需要我们启用我们的智慧在服务器上配置了。

5、将Css放在页面的最上面

Yahoo 14条军规_第5张图片

Css全称 Cascading Style Sheets(层叠样式表单)

问什么将Css放在上面呢

在IE浏览器中,将CSS放在底部,他禁止了页面内容的顺序显示。IE阻止了页面的显示,以免重画元素。在地网速的情况下,用户打开网页就只能看见空白页了。
但是在Firefox浏览其中,虽然不会阻止页面内容的显示 ,但是在加载完CSS样式后,部分元素可能会重画。这就会导致闪错的情况。所以,为了避免页面显示空白或者闪错的问题,我们应该将Css样式放在页面的头部head下。

6、将script放在页面的最下面

7、经量避免使用Css Expressions(CSS表达式)

这个功能只在早期的IE浏览器中可以使用,IE8之后就没有这个功能了。Css Expressions这个共能就是在CSS样式中插入JS代码,他不符合web标准、效率低下、有可能带来安全隐患。

8、将脚本文件和样式文件都放在外部文件中
这个说法并不是绝对的,下面是将CSS单独提取出来和写在页面里面的优缺点。这两个方法我们要学会取舍着用。


Yahoo 14条军规_第6张图片

Yahoo 14条军规_第7张图片

9、减少DNS查找

如下图是DNS查找过程,既然是查找必定户消耗时间的,通常这个过程会消耗20ms左右的时间。在这段时间我们的浏览器是得不到任何相应的,所以浏览器显示一片空白。


Yahoo 14条军规_第8张图片
DNS查找过程.png

现在的浏览器做的比较好,都有个缓存机制。但是主流的三大浏览器的缓存时间不同。他们的缓存时间如图。


Yahoo 14条军规_第9张图片

缓存时间长短有什么不同呢?

缓存时间长时:减少DNS的重复查找,节省时间。
缓存时间短时:能够及时检测到网站服务器的变化,保证正确性。

10、最小化JavaScript和Css

从字面意思就可以理解,就是减少JavaScript和Css文件大小。文件体积小了,下载速度了就快了。
减小文件体积的方法

  • 去除不必要的空白符、格式符、注释符
  • 简写方法名、参数压缩JS脚本

11、避免重定向

重定向就是原始的请求重新转向了其他请求

通俗的说就是用户想访问的页面A被重新指向了页面B

因为重定向尤其存在的意义,所以在HTTP协议中有两个状态码来标识。分别是301和302.

301状态码:表示用户请求的页面,比如a.com被移动到另外的位置 b.bom。用户需要去另外一个位置去下载内容。

302状态码:表示所请求的页面被找到了,但不在原始位置。服务器会回复用户一个地址,然后浏览器在通过这个地址找到相应的资源。
即:301表示永久的重定向,302表示临时的重定向。

对于我们用户来说,301和302没有什么区别,都是但是对于搜索引擎来说的完全不同的两个概念。
我们知道互联网会不定期的对网站的内容进行扫描(俗称蜘蛛爬网),来完善索引机构。如果网站用的是301永久重定向,那么蜘蛛在爬网的过程中,会只能分析,删除老的地址,添加新的地址。如果是302重定向,蜘蛛只会认为是普通的链接跳转。


Yahoo 14条军规_第10张图片

为什么要使用重定向呢,其实无论是301还是302重定向都增加了浏览器到服务器的之间的往返次数,增加了访问时间。

12、移除重复的脚本

13、配置实体标签ETag

ETag 全称EntityTag (实体标签)。它包含在响应头当中,从字面意思来讲就是某个实体的标识。属于Http协议,自然所有的web服务都支持。

ETag:使用特殊的字符串来标识某个请资源版本

当用户向服务器发从请求时,服务器会对比两边的ETag,如果两边的ETag一致就意味着该资源没有被修改过,和以前是一样的。这时服务器会返回304码,告诉浏览器对比一致,可以使用以前的资源。


Yahoo 14条军规_第11张图片

这就是配置ETag的好处,它减轻了服务器的负担。

14、使用Ajax缓存

全称 Asynchronous javaScript and XML
他可以使网站在不刷新页面的情况下加载数据,可以使网站分批加载,实现局部更新。
Ajax仍然是通过发送数据请求的方式向服务器索要数据,实现局部的刷新。所以在这里我们对数据也是有必要进行缓存的,但是不是所有的ajax数据都进行缓存的,如果所有的数据请求都进行缓存,那么ajax就没有它存在的必要了,和默默无闻的静态数据没有什么区别。

首先我们需要账务ajax的两种方法,Post和get

Post
Post请求时每次都要发给服务器请求的,服务器每次都会返回一个状态码200。因为这个方法是每次都需要执行的,所以他是不被缓存的。

Get
get请求,除非制定不同的地址,否知同一个地址不重复执行。它返回的状态码是304 。所以他的数据是被缓存的。

那么什么时候使用Post什么时候使用Get呢,下图列出了Post和Get的区别。
Yahoo 14条军规_第12张图片

YSlow 网站性能分析插件

YSlow是Yahoo研发 的一款插件,专门用来分析网站的性能。他是基于浏览器的一款插件,在Firefox浏览器里兼容性比较好。
YSlow会对浏览器性能做分析,给出意见和规则,让我们一步步的优化我们的网站。

注意:在安装YSlow的同时还要安装firebug插件

你可能感兴趣的:(Yahoo 14条军规)