雅虎军规
一、有关服务器端
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 连接上双向交换消息。就好比，我请求一个页面http://www.qq.com。页面上所有的资源请求都是客户端与服务器上的一条TCP上请求和响应的！
大多数HTTP 连接的时间都很短，而且是突发性的，但TCP 只在长时间连接传输大块数据时效率才最高。HTTP 2.0 通过让所有数据流共用同一个连接，可以更有效地使用TCP 连接，让高带宽也能真正的服务于HTTP的性能提升。
同时，单链接多资源的方式，使到至上而下的层面都得到了好处：
1.可以减少服务链接压力,内存占用少了,连接吞吐量大了
2.由于 TCP 连接减少而使网络拥塞状况得以改观;
3.慢启动时间减少,拥塞和丢包恢复速度更快。
三、客户端优化
JS方面的可以看我之前JS版面中的优化，下面主要介绍CSS优化及一些补充
1.CSS方面
- 建议使用类选择器，访问比较快；
- 不建议使用很长的base64；
- 避免CSS表达式；
- 避免使用Filters。
2.图片格式的选择
- 颜色较为丰富的图片而且文件比较大的（40KB - 200KB）或者有内容的图片优先考虑 jpg；图标等颜色比较简单、文件体积不大、起修饰作用的图片，优先考虑使用 PNG8 格式；图像颜色丰富而且图片文件不太大的（40KB 以下）或有半透明效果的优先考虑 PNG24 格式。
- 条件允许的，使用新格式WEBP和BPG。
- 用SVG和ICONFONT代替简单的图标。
3.合理分配资源加载时间，按需加载，包括CSS、JS文件以及图片、业务模块等。
根据我们网页最初加载需要的最小内容集推断其他内容延迟加载；无条件提前加载公共内容或根据用户行为推断提前加载某些内容，如根据搜索框输入的文字来判断加载的内容。加载机制如下：
- 预加载
- Dom Ready后加载
- onLoad后加载
- 滚动加载
4.减少DNS 查询
DNS 查询一般需要几毫秒到几百毫秒，移动环境下会更慢。我们可以预先读取DNS，减少用户等待时间。
