yahoo军规笔记摘要内容

1.尽可能减少HTTP请求数；
http请求的定义：从客户端到服务器端的请求消息。包括消息首航中，对资源的请求方法，资源的标识符及使用的协议。
http请求的菜鸟概论：
当你在网页中看到的文字，图片都是你从服务器获取的，每一个内容的获取，都是一个http的请求;每一个内容(如文字、图片、js、css)的获取，就是一个http请求；
·如何优化请求：文字，图片合并，js合并，css合并；
2.使用CDN（内容分发网络Content Delivery Network）；
什么是CDN？
内容分发网络。意思是尽可能避开互联网上有可能影响数据传输速度和稳定性的瓶颈和环节，使内容传输的更快、更稳定。
（在离你最近的地方，放置一台性能好链接顺畅的副本服务器，让你能够以最近的距离，最快的速度获取内容。）
3.添加Expire/Cache-Control头；
expire头的内容是一个时间值，值就是资源在本地的过期时间、存在本地。在本地缓存阶段，找到一个对应的资源值，当前时间还没超过资源的过期时间，就直接使用这一个资源，不会发送 HTTP 请求。
cache-control：是http协议中常用的头部之一，顾名思义，他是负责控制页面的缓存机制，如果该头部指示缓存，缓存的内容也会存在本地，操作流程和expire相似，但也有不同的地方，cache-control有更多的选项，而且也有更多的处理方式。
.如果要对文件添加cache可以通过apache的mod_expire模块
.如果是对网页的缓存就是通过在页面中添加meta标签实现
4.启用Gzip压缩；
将资源在服务端口先进行压缩处理减小体积，然后在浏览器上在解压缩解释执行！
·把文件先压缩，再传输
·流程：原始79--本地压缩--服务器端对已经压缩的再压缩-
·优点：提升文件传输速度；（在服务器端配置）
5.将CSS放在页面最上面；
IE：css放body底部，IE禁止了网页内容的顺序显示，低网速情况下导致空白
FF：不阻止显示，但会导致闪烁重绘
解决：先加载css，放头部提高渲染性能，避免页面空白或者重绘
6.将Script放在页面最下面；
DOM的加载顺序,首先是读取HTML,head,meta,title,style,link,script,body,div,img,
为什么要把JavaScript脚本放在最下面
防止在js死循环中，读不到下面的样式，网页可能是空白一片
7.避免在CSS中使用Expressions（CSS表达式）;
CSS属性后面可以是一段Javascript表达式，CSS属性的值等于Javascript表达式计算的结果。css的属性值是由js计算出来的,用了该属性,页面显示缩放/滚动，鼠标移动,都会对其值进行重新计算,这样会严重影响浏览器效率
我们可以通过expression把Javascript脚本写放在css文件中，通过它来实现一些很方便的功能与效果。
例如:
myDiv{
position:absolute;
left:expression(document.body.offsetWidth-180+"px");
top:expression(document.body.offsetHeight--80+"px");
}
8.将JS和CSS都放在外部文件中；
JS,CSS都放在外部的文件中，单独提取的好处
：提高了JS和CSS的复用性；
：减少了页面的体积；
：提高了JS和CSS的可维护性
缺点：增加请求数，可通过缓存优化
js放在内部的优点
：减少了页面的请求数；
：提升了页面的渲染速度
css和js写在页面的情况：
.只应用于一个页面
.不经常被访问
.脚本和样式很少（少于20行）
9.减少DNS查询；
DNS查找过程：域名对应到一个IP地址，然后通过DNS查找找到IP对应的网址，然后才访问到 解决：缓存
·底层行为
·定义：访问网址，打开之前，转换机制（ip地址），对应网址；
·时间：20ms最少；
·如果同时很多查找过程，会影响速度；因此需要浏览器的缓存；
·IE30m，ff60s，chrome60s，
·缓存长：减少dns重复查找，节省时间；
·缓存短：及时检测服务器的变化，保证正确性；
多域和单域
多域：
不同资源放在不同的ip
单域：
所有资源放在一个IP
10.压缩JS和CSS；
去除不必要的空白符、格式符、注释符；简写方法名、参数名，压缩JS脚本
建议小伙伴们：在正式上线项目前，将 JavaScript 和 CSS 都进行压缩，使线上版本是最轻量级的，大幅提升网站性能。
11.避免重定向；
301：被移动到另外位置（永久重定向）使搜索引擎智能
302：页面被找到，但不在原始位置（临时重定向）先到旧地址，再到新地址
重定向：重新请求下载资源，增加了http请求
对搜索引擎而言：301 是智能的；302 找旧地址，再跳新地址
12.移除重复的脚本；
顾名思义，可以减少文件的大小，另外，就是可以避免出现未知的问题！
13.配置实体标签（ETags）；
配置实体标签（ETag：Entity Tag，属于HTTP协议，受Web服务的支持！使用一种标志表示一种资源是否做了修改，可以减少服务器的响应，详细点就是：浏览器想服务器要某种资源，服务器一看，判断出了这种资源已经给过浏览器了，并且在服务器端的也没有变化，所以浏览器可以使用他自身就有的，然后告诉浏览器，浏览器回到自身找找，找到啦就用了，这样浏览器和服务器之间会有对话不过不用服务器再重复的给浏览器资源了！）
14.使用Ajax缓存
Asynchronous Javascript and XML 异步的JavaScript和XML
post每次执行，不被缓存，get 同一地址不重复执行，可以被缓存

作者： focuspe
链接：http://www.imooc.com/article/13242
来源：慕课网