Yahoo军规 （慕课课程小结）Yslow

第一条、尽可能的减少 HTTP 的请求数 （Make Fewer HTTP Requests ）

什么是htpp请求？

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

我的个人理解是当我们打开网站时，我们所看到的文字，图片，多媒体等等，这一切内容，都是从服务器获取的，每一个内容的获取，就是一个HTTP请求。

http请求是要开销的，想办法减少请求数自然可以提高网页速度。常用的方法，合并css，js（将一个页面中的css和js文件分别合并）以及 Image maps和css sprites等。当然或许将css，js文件拆分多个是因为css结构，共用等方面的考虑。阿里巴巴中文站当时的做法是开发时依然分开开发，然后在后台 对js，css进行合并，这样对于浏览器来说依然是一个请求，但是开发时仍然能还原成多个，方便管理和重复引用。yahoo甚至建议将首页的css和js 直接写在页面文件里面，而不是外部引用。因为首页的访问量太大了，这么做也可以减少两个请求数。而事实上国内的很多门户都是这么做的。

而css sprites是指只用将页面上的背景图合并成一张，然后通过css的background-position属性定义不过的值来取他的背景。淘宝和阿里巴巴中文站目前都是这样做的。有兴趣的可以看下淘宝和阿里巴巴的背景图。

第二条、使用CDN（内容分发网络）: Use a Content Delivery Network

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

简单地讲，通过在现有的Internet中增加一层新的网络架构，将网站的内容发布到最接近用户的 cache服务器内，通过DNS负载均衡的技术，判断用户来源就近访问cache服务器取得所需的内容，杭州的用户访问近杭州服务器上的内容，北京的访问 近北京服务器上的内容。这样可以有效减少数据在网络上传输的时间，提高速度。更详细地内容大家可以参考百度百科上对于CDN的解释。Yahoo!把静态内容分布到CDN减少了用户影响时间20%或更多。

CDN技术示意图：

CDN组网示意图：

so,只有有足够的money,就可以得到多个CDN服务器。

第三条、 添加Expire/Cache-Control 头：Add an Expires Header

现在越来越多的图片，脚本，css，flash被嵌入到页面中，当我们访问他们的时候势必会做许多次的http请求。其实我们可以通过设置Expires header 来缓存这些文件。Expire其实就是通过header报文来指定特定类型的文件在览器中的缓存时间。大多数的图片，flash在发布后都是不需要经常修改的，做了缓存以后这样浏览器以后就不需要再从服务器下载这些文件而是而直接从缓存中读取，这样再次访问页面的速度会大大加快。一个典型的HTTP 1.1协议返回的头信息：

HTTP/1.1 200 OK
Date: Fri, 30 Oct 1998 13:19:41 GMT
Server: Apache/1.3.3 (Unix)
Cache-Control: max-age=3600, must-revalidate
Expires: Fri, 30 Oct 1998 14:19:41 GMT
Last-Modified: Mon, 29 Jun 1998 02:28:12 GMT
ETag: “3e86-410-3596fbbc”
Content-Length: 1040
Content-Type: text/html

其中通过服务器端脚本设置Cache-Control和Expires可以完成。

Cache-control用于控制HTTP缓存（在HTTP/1.0中可能部分没实现，仅仅实现了Pragma: no-cache）

数据包中的格式：

Cache-Control: cache-directive

cache-directive可以为以下：

request时用到：

| "no-cache"| "no-store"| "max-age" "=" delta-seconds| "max-stale" [ "=" delta-seconds ]| "min-fresh" "=" delta-seconds| "no-transform"| "only-if-cached"| "cache-extension"

response时用到：

| "public"| "private" [ "=" <"> field-name <"> ]| "no-cache" [ "=" <"> field-name <"> ]| "no-store"| "no-transform"| "must-revalidate"| "proxy-revalidate"| "max-age" "=" delta-seconds| "s-maxage" "=" delta-seconds| "cache-extension"

部分说明：根据是否可缓存分为Public  指示响应可被任何缓存区缓存。Private  指示对于单个用户的整个或部分响应消息，不能被共享缓存处理。这允许服务器仅仅描述当用户的部分响应消息，此响应消息对于其他用户的请求无效。no-cache  指示请求或响应消息不能缓存（HTTP/1.0用Pragma的no-cache替换）根据什么能被缓存no-store  用于防止重要的信息被无意的发布。在请求消息中发送将使得请求和响应消息都不使用缓存。根据缓存超时max-age  指示客户机可以接收生存期不大于指定时间（以秒为单位）的响应。min-fresh  指示客户机可以接收响应时间小于当前时间加上指定时间的响应。max-stale  指示客户机可以接收超出超时期间的响应消息。如果指定max-stale消息的值，那么客户机可以接收超出超时期指定值之内的响应消息。Expires 表示存在时间，允许客户端在这个时间之前不去检查（发请求），等同max-age的效果。但是如果同时存在，则被Cache-Control的max-age覆盖。格式：Expires = "Expires" ":" HTTP-date例如Expires: Thu, 01 Dec 1994 16:00:00 GMT （必须是GMT格式）

2.应用通过HTTP的META设置expires和cache-control<meta http-equiv="Cache-Control" content="max-age=7200" /><meta http-equiv="Expires" content="Mon, 20 Jul 2009 23:00:00 GMT" />上述设置仅为举例，实际使用其一即可。这样写的话仅对该网页有效，对网页中的图片或其他请求无效，并不会做任何cache。这样客户端的请求就多了，尽管只是检查Last-modified状态的东西，但是请求一多对浏览速度必定有影响。

如果要对文件添加cache可以通过apache的mod_expire模块，写法为<IfModule mod_expires.c>ExpiresActive OnExpiresDefault "access plus 1 days"

</IfModule>记得ExpiresActive设为On，我起先没设置On，似乎怎样YSlow都查不到缓存机制。这样添加的话就是默认所有的。

如果要针对个别MIME类型则可以：ExpiresByType image/gif "access plus 5 hours 3 minutes"见 Apache Module mod_expires另外，当点击浏览器上的刷新，客户端发送的请求中均是max-age=0，表示validate操作，发送请求到服务器要求检查cache，再更新cache，一般得到的是304 Not Modified，表示没变动。

 
第四条、启用Gzip压缩：Gzip Components
Gzip的思想就是把文件先在服务器端进行压缩，然后再传输。这样可以显著减少文件传输的大小。传输完毕后浏览器会 
重新对压缩过的内容进行解压缩，并执行。目前的浏览器都能“良好”地支持 gzip。不仅浏览器可以识别，而且各大“爬虫”也同样可以识别，
各位seoer可以放下心了。而且gzip的压缩比例非常大，一般压缩率为85%，就是 说服务器端100K的页面可以压缩到25K左右再发送到客户端。具体的Gzip压缩原理大家可以参考csdn上的《gzip压缩算法》 这篇文章。
雅虎特别强调， 所有的文本内容都应该被gzip压缩: html (php), js, css, xml, txt… 这一点我们网站做得不错，是一个A。
以前我们的首页也并不是A，因为首页上还有很多广告代码投放的js，这些广告代码拥有者的网站的js没有经过gzip压缩，也会拖累我们网站。
·流程：原始79--本地压缩--服务器压缩--服务器端对已经压缩的再压缩-·优点：提升文件传输速度；（在服务器端配置）

第五条、将css放在页面最上面 （ Put Stylesheets at the Top）

IE：css放body底部，IE禁止了网页内容的顺序显示，导致空白
FF：不组织，但会导致闪烁重绘，
将css放在页面最上面，这是为什么？因为 ie，firefox等浏览器在css全部传输完全之前不会去渲染任何的东西

解决：先加载css，放头部<head>提高渲染性能，避免页面空白或者重绘

第六条、将script放在页面最下面 （Put Scripts at the Bottom ）

script标签放在页面底部
可以让页面内容优先呈现出来，而非先暴露script的bug
将Script放在页面的最下面，因为浏览器加载和解释网页的顺序是从左到右从上到下的，如果JavaScript代码有死循环的问题，网页可能是空白一片的，如果放在页面的最下面即使如此，页面也能展现出来，当然这个问题最好避免！

第七条.Avoid CSS Expressions 避免CSS表达式

CSS表达式很可怕，这个只被IE支持的东西执行时候的运算量非常大，你移动一下鼠标它都要进行重计算的，但有时候为了做浏览器的兼容必须要用到这个||| IE6去死去死！~

页面显示和缩放，滚动、乃至移动鼠标时，CSS表达式的计算频率是我们要关注的。可以考虑一次性的表达式或者使用事件句柄来代替CSS表达式。(没啥注意的，已经淘汰了)

第八条：将CSS和JS放到外部文件中

我们需要权衡内置代码带来的HTTP请求减少与通过使用外部文件进行缓存带来的好处的折中点。

第九条：减少DNS查找次数

我们需要权衡减少 DNS查找次数和保持较高程度并行下载两者之间的关系。据官方统计，DNS查找大概20ms,

定义：访问网址，打开之前，转换机制（ip地址），对应网址；·如果同时很多查找过程，会影响速度；因此需要浏览器的缓存；
·IE30m，ff60s，chrome60s，
·缓存长：减少dns重复查找，节省时间；
·缓存短：及时检测服务器的变化，保证正确性；

采用多域和单域来解决：
多域：不同资源放在不同的ip
单域：所有资源放在一个IP

第10条.Minify JavaScript and CSS 减小JS和CSS的体积

写JS和CSS都是有技巧的，用最少的代码实现同样的功能，减少空白，增强逻辑性，用缩写方式等等，当然也有不少工具也能够帮你实现这一点，可考虑压缩工具JSMin和YUI Compressor。

1、去除不必要的空白符、格式符、注释符；
2、简写方法名、方法参数脚本

第11条. Avoid Redirects 避免重定向

在写入链接时，虽然”http://www. today-s-ooxx. com”和”http://www. today-s-ooxx. com/” 仅有一个最后的”/”只差，但是结果是不同的，服务器需要花时间把前者重定向为后者然后进行跳转.

为了确保“后退”按钮可以正确地使用，使用标准的 3XXHTTP状态代码；同域中注意避免反斜杠 “/” 的跳转；
跨域使用 Alias或者 mod_rewirte建立 CNAME（保存一个域名和另外一个域名之间关系的DNS记录）

重定向状态码：301被移动到了另外的位置 永久重定向 302 用户请求页面被找到单不在原始位置；临时重定向.

搜索引擎性能：
（1）蜘蛛网：发现是301，会智能地更新地址；
（2）蜘蛛网发现是302，机械跳转
弊端：增加服务器到浏览器的访问次数；

第12条.移除重复的脚本

重复调用脚本，除了增加额外的HTTP请求外，多次运算也会浪费时间。在IE和Firefox中不管脚本是否可缓存，它们都存在重复运算JavaScript的问题。所以，移除重复的脚本，顾名思义，可以减少文件的大小，另外，就是可以避免出现未知的问题！

第13条.Configure ETags 配置实体标签ETags

Entity tags（ETags）（实体标签）是web服务器和浏览器用于判断浏览器缓存中的内容和服务器中的原始内容是否匹配的一种机制（“实体”就是所说的“内 容”，包括图片、脚本、样式表等），是比last-modified date更更加灵活的机制，单位时间内文件被修过多次，Etag可以综合Inode(文件的索引节点(inode)数)，MTime(修改时间)和Size来精准的进行判断，避开UNIX记录MTime只能精确到秒的问题。 服务器集群使用，可取后两个参数。使用ETags减少Web应用带宽和负载。属于HTTP协议。

·用特殊的字符串，来表示某个请求资源版本
·用户通过浏览器向服务器进行请求资源的时候，比对ETAG，如果浏览器的和服务器的etag一样，那就用本地的ETages.
·帮助服务器减轻负担

第15条、使AJAX可缓存

Ajax是实时响应的，在浏览器接收到新的数据前，旧的数据被缓存，这样能够更好的提高效率。

利用时间戳，更精巧的实现响应可缓存与服务器数据同步更新。

最后一条、插件，网站性能分析Yslow：
·YSlow（基于浏览器执行），在ff下执行的最好
·对网站进行分析，给出优化报告
· 1 安装fireBug 2 YSlow