前端性能优化----yahoo军规

1.减小http请求

2.使用cdn内容分发网络

3 添加 Expire/Cache-Control 头：

expire头的内容是一个时间值，值就是资源在本地的过时时间、存在本地。在本地缓存阶段，找到一个对应的资源值，当前时间还没超过资源的过时时间，就直接使用这一个资源，不会发送 HTTP 请求。
cache-control：是http协议中经常使用的头部之一，顾名思义，他是负责控制页面的缓存机制，若是该头部指示缓存，缓存的内容也会存在本地，操做流程和expire类似，但也有不一样的地方，cache-control有更多的选项，并且也有更多的处理方式。

4 使用Gzip压缩

将资源在服务端口先进行压缩处理减少体积，而后在浏览器上在解压缩解释执行！
·把文件先压缩，再传输
Gzip支持压缩文本数据，包括：HTML,PHP,JS,CSS,XML,TXT等等。
·流程：原始79--本地压缩--服务器端对已经压缩的再压缩-
·优势：提高文件传输速度；（在服务器端配置）
Gzip压缩
服务端配置Gzip压缩怎么作呢？有没有知道的
去看看运维命令就知道了，有gzip压缩命令的

5.把css放在页面最上面。层叠样式表单。

css（层叠样式表）：后面的样式会覆盖前面的，级别高的样式会覆盖级别低的样式。
先加载css，放在头部提升渲染性能，避免页面空白或者重绘。
IE：css放body底部，IE禁止了网页内容的顺序显示，低网速状况下致使空白
FF：不阻止显示，但会致使闪烁重绘
解决：先加载css，放头部提升渲染性能，避免页面空白或者重绘

6.将script标签放在页面底部

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

7.避免使用css expression,即CSS表达式

CSS属性后面能够是一段Javascript表达式，CSS属性的值等于Javascript表达式计算的结果。

咱们能够经过expression把Javascript脚本写放在css文件中，经过它来实现一些很方便的功能与效果。
例如:
#myDiv{ position:absolute; left:expression(document.body.offsetWidth-180+"px"); top:expression(document.body.offsetHeight--80+"px"); }0
她会将本身的属性（固有属性和自定义属性）与JavaScript结合起来一块儿使用，这样会比较占资源，影响浏览器的性能影响用户的使用体验度！
不加css expression的缘由:1页面显示和缩放;2页面滚动;3鼠标滚动时候都会从新进行计算

8.将JavaScript和CSS都放在外部的文件中

将JavaScript和CSS都放在外部的文件中，单独提取的好处
1：提升了JS和CSS的复用性；
2：减小了页面的体积；
3：提升了JS和CSS的可维护性
js放在内部的优势
1：减小了页面的请求数；
2：提高了页面的渲染速度
css和js写在页面的状况：
1.只应用于一个页面
2.不常常被访问
3.脚本和样式不多（少于20行）

9.减小DNS查询：

10. 最小化 JavaScript 和 CSS：

一、去除没必要要的空白符、格式符、注释符。
二、简写方法名、参数名，压缩JS脚本。
即便用工具压缩 JavaScript 和 CSS

11.避免重定向

重定向：从新请求下载资源，增长了http请求
301：请求的页面被移动到另外位置（永久重定向）使搜索引擎智能,不须要从旧地址到新地址，删除旧地址，直接到新地址
302：页面被找到，但不在原始位置（临时重定向）先到旧地址，再到新地址

12.避免重定向

移除重复的脚本能够减小文件的大小，另外，就是能够避免出现未知的问题！

13使用entity tag(实体标签)

属于HTTP协议，受web服务支持，使用特殊的字符串 来标识某个请求的资源版本
304
使用一种标志表示一种资源是否作了修改，能够减小服务器的响应，详细点就是：浏览器想服务器要某种资源，服务器一看，判断出了这种资源已经给过浏览器了，而且在服务器端的也没有变化，因此浏览器可使用他自身就有的，而后告诉浏览器，浏览器回到自身找找，找到啦就用了，这样浏览器和服务器之间会有对话不过不用服务器再重复的给浏览器资源了！
配置实体标签Etag帮助服务器减轻负担

14.使AJAX缓存

在不加载网页的状况下，是客户端与服务器进行交换数据
post:每次都执行，不被缓存
get:同一地址不重复执行，能够被缓存

附录：