YAHOO 军规

一、尽可能减少Http请求

什么是Http请求？
官方回答：从客户端到服务器端的请求消息包括消息首行中对资源的请求方法 资源的标识符及使用协议
菜鸟回答：当你打开网页的时候 所看到的文字图片多媒体等 都是从服务器获取的 每一个内容的获取 就是http请求

把图片、js、css合并

二、使用CDN（内容分发网络）

官方回答：内容分发网络 意思是尽可能避开互联网上有可能影响数据传输速度和稳定性的瓶颈和环节 使内容传输的更快、更稳定
：在离你最近的距离、最快的速度获取内容

三、添加Expire/ Cache-Control头

阿帕奇开启了expire模块 当浏览器发送资源请求的时候 阿帕奇返回资源的同时 会返回一个名为expire的Http头

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

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

四、启用Gzip压缩

什么是Gzip压缩：文件先放服务器压缩 然后在存储 存储完毕以后 浏览器在对压缩过得内容进行解压缩 并执行
目前的浏览器都能很好的支持Gzip
所有的文本内容都要进行Gzip压缩

五、把css放在页面之上

Cascading Style Sheets（层叠样式表单）
为了提高浏览器的渲染性能 避免页面空白或闪烁的问题

六、把js放在页面最底部

如果js出现问题 不会出现空白影响用户浏览

七、避免在css中使用 Expressions

什么是css Expressions：
css Expressions 俗称 css表达式
是用来把css属性 和 js表达式关联起来
（这里的css属性可以是固有属性 也可以是自定义属性
就是说css属性后面可以是js表达式 css的值 = js表达式计算的结果）
css Expressions 计算频率很高
在页面显示和缩放、页面滚动、鼠标移动的时候都会从新计算一次

所有使用css Expressions 浏览器会不停的计算 以至于严重影响性能 及 用户体验

八、把js和css放到外部文件中

单独提取：
提高了js和css的复用性 减少页面体积 提高js和css的可维护性

写在页面里：
减少请求 提升页面渲染速度

写在页面内的情况：
1、js和css只应用于一个页面
2、一个不经常被访问的页面
3、脚本和样式很少的情况（不多于20、30行）

九、减少DNS查找

如：用户打开 www.a.com 这个网址时 计算机是不知道它是什么、在哪里 必须通过一种转换机制才能到达这个页面
这种机制能够将 www.a.com 对应到一个IP地址 10.96.141.1（一个计算机理解的地址）
在通过这个IP地址（使用DNS查找）对应到 www.a.com 这个网站
整个过程就是DNS查找过程

查找的过程中浏览器是得不到任何资源的（这期间浏览器是一片空白）
所以要对这个过程进行缓存 缓存之后就可以减少这种查找过程

不同浏览区缓存时间不同 （IE：30m 火狐：60s 谷歌：60s）
当缓存时间长时：减少DNS的重复查找 节省时间
当缓存时间短时：浏览器会及时检查网站服务器的变化 保证正确性

根据自身情况进行缓存时间的长短
多域：网址 图片 js 分别使用不同的域名
单域：网址 图片 js 使用同一域名

十、压缩js 和 css

1、去除不必要的空白符、格式符、注释（代码格式化）
2、简写方法名参数名压缩js脚本

建议：在正式上线前 将js、css都进行压缩 使线上版本是最轻量级的 大幅提升网址性能

十一、避免重定向

重定向：用户原始请求被重新转向到了其他请求（用户想访问的页面a 被重新 指向了页面b）
重定向状态码：
301 Moved Permanently：用户请求的页面被移动到另外的位置（永久重定向）
302 Found：用户请求的页面被找到了但不在原始位置（临时重定向）
对用户没有什么影响 但对搜索引擎影响就大了 都是从a 跳到 b
301 会识别一次 第二次就会直接跳到 b
302 每次都是 先找a 再跳到 b

为什么避免重定向

无论301还是302都增加了服务器的往返次数
当用户发起访问 a 网站的请求时 服务器收到 由于a 重定向到 b 所以服务器返回一个重定向信息（301 或 302）
并把这个信息写在 header 中 并在 header 中返回一个新的地址（b 的地址）
但是body中是空白的 用户端在收到这个反馈后 就知道地址改了
所以用户的浏览器会再一次请求 请求到b 然后才打开网页 下载资源
用户多了一次获取新地址的过程 必然会增加浏览器到服务器的返回次数
（要尽量减少Http请求 所以要避免使用）

十二、移除重复的脚本

<input type="text" id="test"/>
<script>
    var number = 0
</script>

//外部引入代码
number++;
document.getElementById('test').value = number;
//外部引入两遍 会影响value值

十三、配置实体标签（ETag）

全称Entity Tag（实体标签） 它包含在响应头部中 属于Http协议 受web服务支持
它是使用特殊字符串 来标识某个请求资源版本

当用户通过浏览器来服务器请求资源的时候 服务器会进行比较
如果两遍的ETag一致 那就代表浏览器和服务器的ETag一致 这就意味着该资源没有修改过 和以前是一样的
这时候服务器会返回一个304码 告诉浏览器对比一致 可以使用本地缓存的版本 会帮助服务器减轻很多负担
这就是配置ETag的好处

十四、使用ajax缓存

ajax：不重新加载页面的情况下 使客户端与服务器交换数据 可使网站数据分批加载 也可局部更新

post：每次都执行 不能被缓存
    get：同一地址不重复执行 可以被缓存

辅助工具 Yslow