雅虎军规

一、有关服务器端

1.使用CDN

　　CDN工作流程如下：

1.浏览器获得需要访问的资源的域名;

2.通过域名解析得到该域名指向CDN的一个CNAME;

3.为了获得IP地址，需要对CNAME进行域名解析，这时请求就会被发送到CDN的中心服务器，全局负载均衡通过预先设定的规则，同时根据用户访问的地理位置信息，把最合适的边缘服务器IP地址返回；

4.浏览器获得IP地址后，就向边缘服务器发出请求；

5.边缘服务器根据访问域名，首先搜索缓存，查看资源是否存在，存在则直接返回资源给浏览器，直接完成整个资源请求过程，否则就根据缓存内部的DNS解析得到资源实际IP地址（即客户的服务器IP地址），向该IP地址发起资源请求；

6.边缘服务器向客户服务器请求资源成功后，就把该资源加入本身的高速缓存中，并把资源发送给用户。

2.静态资源缓存

Cache-contral/Expires

配置Etag(弱缓存)

　　　　实体标签(EntityTag)是唯一标识了一个组件的一个特定版本的字符串，是web服务器用于确认缓存组件的有效性的一种机制，通常可以使用组件的某些属性来构造它。　

　　　　ETag主要是为了解决Last-Modified无法解决的一些问题：

1. 一些文件也许会周期性的更改，但是他的内容并不改变(仅仅改变的修改时间)，这个时候我们并不希望客户端认为这个文件被修改了，而重新GET;

2. 某些文件修改非常频繁，比如在秒以下的时间内进行修改，(比方说1s内修改了N次)，If-Modified-Since能检查到的粒度是s级的，这种修改无法判断(或者说UNIX记录MTIME只能精确到秒);

3. 某些服务器不能精确的得到文件的最后修改时间。

移动端离线缓存

　　　　manifest 文件可分为三个部分：

　　　　（1） CACHE MANIFEST - 在此标题下列出的文件将在首次下载后进行缓存，等价于CACHE

　　　　（2） NETWORK - 在此标题下列出的文件需要与服务器的连接，且不会被缓存

　　　　（3） FALLBACK - 在此标题下列出的文件规定当页面无法访问时的回退页面

LocalStorage

二、有关网络

1.减少http请求数量(在http2.0中没有效果)

小图片css sprites

组件合并

　　　　注意合并顺序、依赖关系

避免重复资源请求（上面说的静态资源缓存）

2.减少请求带宽

压缩JS、CSS

　　　　尽可能控制DOM节点数；

　　　　精简css、 JavaScript，移除注释、空格、重复css和脚本

压缩图片

Gzip

　　　　Gzip的思想就是把文件先在服务器端进行压缩，且压缩率达到85%，然后再传输，传输完毕后浏览器会重新对压缩过的内容进行解压缩，并执行。。好处在于Gzip的支持已经很好，且爬虫可识别，压缩率达到66%-85%显著减少了文件传输的大小。另外，gzip对pdf文件的压缩效果不大，而且会浪费CPU。

专门主机存静态资源（cookie优化）

3.域名小且独立

　　短小可以减少头部开销，因为域名越短请求头起始行的 URI 就越短。之所以要求独立，因为独立域名不会共享主域的 Cookie，可以有效减小请求头大小，这个策略一般称之为 Cookie-Free Domain；另外一个原因是浏览器对相同域名的并发连接数限制，一般允许同域名并发 6~8 个连接，域名不是越多越好，每个域名的第一个连接都要经历 DNS 查询（DNS Lookup），导致会耗费一定的时间，控制域名使用在2-4个之间。另外注意：同一静态资源在不同页面被散列到不同子域下，会导致无法利用 HTTP 缓存。

4.使用http2.0

　　所有的HTTP2.0的请求都在一个TCP链接上

　　HTTP2.0所有通信都是在一个TCP连接上完成。HTTP 2.0 把 HTTP 协议通信的基本单位缩小为一个一个的帧，这些帧对应着逻辑流中的消息。并行地在同一个 TCP 连接上双向交换消息。就好比，我请求一个页面。页面上所有的资源请求都是客户端与服务器上的一条TCP上请求和响应的！

　　大多数HTTP 连接的时间都很短，而且是突发性的，但TCP 只在长时间连接传输大块数据时效率才最高。HTTP 2.0 通过让所有数据流共用同一个连接，可以更有效地使用TCP 连接，让高带宽也能真正的服务于HTTP的性能提升。

　　同时，单链接多资源的方式，使到至上而下的层面都得到了好处：

　　　　1.可以减少服务链接压力,内存占用少了,连接吞吐量大了

　　　　2.由于 TCP 连接减少而使网络拥塞状况得以改观;

　　　　3.慢启动时间减少,拥塞和丢包恢复速度更快。

三、客户端优化

　　JS方面的可以看我之前JS版面中的优化，下面主要介绍CSS优化及一些补充

1.CSS方面