首页 > 技术文章 > 前端性能优化----yahoo军规

wanghuih 2017-03-04 15:29 原文

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:
1、去除不必要的空白符、格式符、注释符。
2、简写方法名、参数名,压缩JS脚本。
即使用工具压缩 JavaScript 和 CSS
![](http://images2015.cnblogs.com/blog/961272/201703/961272-20170304152429220-2121450659.png)
###11.避免重定向
重定向:重新请求下载资源,增加了http请求
301:请求的页面被移动到另外位置(永久重定向)使搜索引擎智能,不需要从旧地址到新地址,删除旧地址,直接到新地址
302:页面被找到,但不在原始位置(临时重定向)先到旧地址,再到新地址
###12.避免重定向
移除重复的脚本可以减少文件的大小,另外,就是可以避免出现未知的问题!
![](http://images2015.cnblogs.com/blog/961272/201703/961272-20170304152454704-560016770.png)
###13使用entity tag(实体标签)
属于HTTP协议,受web服务支持,使用特殊的字符串 来标识某个请求的资源版本
304
使用一种标志表示一种资源是否做了修改,可以减少服务器的响应,详细点就是:浏览器想服务器要某种资源,服务器一看,判断出了这种资源已经给过浏览器了,并且在服务器端的也没有变化,所以浏览器可以使用他自身就有的,然后告诉浏览器,浏览器回到自身找找,找到啦就用了,这样浏览器和服务器之间会有对话不过不用服务器再重复的给浏览器资源了!
配置实体标签Etag帮助服务器减轻负担
![](http://images2015.cnblogs.com/blog/961272/201703/961272-20170304152524907-2115979645.png)
###14.使AJAX缓存
在不加载网页的情况下,是客户端与服务器进行交换数据
post:每次都执行,不被缓存
get:同一地址不重复执行,可以被缓存
![](http://images2015.cnblogs.com/blog/961272/201703/961272-20170304152539376-1534580085.png)
附录:
![](http://images2015.cnblogs.com/blog/961272/201703/961272-20170304152611360-1311590892.png)
![](http://images2015.cnblogs.com/blog/961272/201703/961272-20170304152626720-2092081232.png)

推荐阅读