前端性能优化--yahoo 军规

一.尽可能减少HTTP请求数

http请求的定义:从客户端到服务器端的请求消息。包括消息首航中,对资源的请求方法,资源的标识符及使用的协议。
http请求的菜鸟概论:
当你在网页中看到的文字,图片都是你从服务器获取的,每一个内容的获取,都是一个http的请求;每一个内容(如文字、图片、js、css)的获取,就是一个http请求;

·如何优化请求:文字,图片合并,js合并,css合并;
下图左边没合并,右边合并后:


二.使用CDN(内容分发网络)

什么是CDN CDN(内容分发网络) 意思是尽可能避开互联网上有可能影像数据传输和稳定性的瓶颈和环节,使内容传输的更快,更稳定。 更好地理解:在离你最近的地方,放置一台性能好链接顺畅的副本服务器,让你能够以最近的距离,最快的速度获取内容

三、添加Expire/Cache-Control头

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

四、使用Gzip压缩
Gzip支持压缩文本数据,包括:HTML,PHP,JS,CSS,XML,TXT等等。

GZIP最早由Jean-loup Gailly和Mark Adler创建,用于UNIX系统的文件压缩。后缀为.gz的文件,它们就是GZIP格式的。现今已经成为Internet 上使用非常普遍的一种数据压缩格式,或者说一种文件格式。HTTP协议上的GZIP编码是一种用来改进WEB应用程序性能的技术。大流量的WEB站点常常使用GZIP压缩技术来让用户感受更快的速度。这一般是指WWW服务器中安装的一个功能,一般对纯文本内容可压缩到原大小的40%.这样传输就快了。
使用Gzip:
·把文件先压缩,再传输
·流程:原始79--本地压缩--服务器端对已经压缩的再压缩-
·优点:提升文件传输速度;(在服务器端配置)


五、将CSS放在页面最上面

css(层叠样式表):后面的样式会覆盖前面的,级别高的样式会覆盖级别低的样式。 先加载css,放在头部<head>提高渲染性能,避免页面空白或者重绘。 IE:css放body底部,IE禁止了网页内容的顺序显示,低网速情况下导致空白 FF:不阻止显示,但会导致闪烁重绘

六、将script放在页面最下面
首先看下DOM加载顺序如下图:

将script标签放在页面底部可以让页面内容优先呈现出来,而非先暴露script的bug将Script放在页面的最下面,因为浏览器加载和解释网页的顺序是从左到右从上到下的,如果JavaScript代码有死循环的问题,网页可能是空白一片的,如果放在页面的最下面即使如此,页面也能展现出来,当然这个问题最好避免!

七、避免在CSS中使用Expressions
CSS Expressions 俗称 CSS 表达式,避免使用 CSS Expressions 是前端开发的一个重要指南,为什么要避免使用 CSS Expressions 呢?我们看看雅虎YUI的说明:
表达式的问题就在于它的计算频率要比我们想象的多。不仅仅是在页面显示和缩放时,就是在页面滚动、乃至移动鼠标时都会要重新计算一次。给CSS表达式增加一个计数器可以跟踪表达式的计算频率。在页面中随便移动鼠标都可以轻松达到10000次以上的计算量。

这样会严重影响浏览器效率
八、把JavaScript和CSS都放到外部文件中
当然一下情况js和css也可以写在页面内
CSS、JS写在页面内的情况:
    只应用于一个页面。
    不经常被访问到。
    脚本和样式很少。
JS,CSS都放在外部的文件中,单独提取的好处
1:提高了JS和CSS的复用性;
2:减少了页面的体积;
3:提高了JS和CSS的可维护性
缺点:增加请求数,可通过缓存优化
放在内部的优点
1:减少了页面的请求数;
2:提升了页面的渲染速度
九、减少DNS查询
DNS的查找过程!耗时长

可以利用浏览器的缓存来减少dns的请求:
·缓存长:减少dns重复查找,节省时间;
·缓存短:及时检测服务器的变化,保证正确性;
减少DNS查找次数,最理想的方法就是将所有的内容资源都放在同一个域(Domain)下面,这样访问整个网站就只需要进行一次DNS查找,这样可以提高性能。上面的理想做法会带来另外一个问题,就是由于这些资源都在同一个域,而HTTP /1.1 中推荐客户端针对每个域只有一定数量的并行度(它的建议是2),那么就会出现下载资源时的排队现象,这样就会降低性能。所以,折衷的做法是:建议在一个网站里面使用至少2个域,但不多于4个域来提供资源。我认为这条建议是很合理的,也值得我们在项目实践中去应用。
十、最小化 JavaScript 和 CSS:
1、去除不必要的空白符、格式符、注释符。
2、简写方法名、参数名,压缩JS脚本。
使用工具压缩 JavaScript 和 CSS
十一、避免重定向
重定向:用户的原始请求(例如请求A)被重定向到其他的请求(例如请求B)


重定向导致重新请求下载资源,增加了http请求,所以要避免
十二、移除重复的脚本
可以减少文件的大小,另外,就是可以避免出现未知的问题!
十三、配置实体标签(ETag)

什么是ETag?

实体标签(EntityTag)是唯一标识了一个组件的一个特定版本的字符串,是web服务器用于确认缓存组件的有效性的一种机制,通常可以使用组件的某些属性来构造它。

条件GET请求

浏览器下载组件的时候,会将它们存储到浏览器缓存中。如果需要再次获取相同的组件,浏览器将检查组件的缓存时间,假如已经过期,那么浏览器将发送一个条件GET请求到服务器,服务器判断缓存还有效,则发送一个304响应,告诉浏览器可以重用缓存组件。



配置实体标签Etag:某个标题的一种标识。一个资源独一无二。
帮助服务器减轻负担
十四、使用AJAX缓存
post:每次都执行,不被缓存
get:同一地址不重复执行,可以被缓存
get和post的异同点,看图


总结:
1、尽可能减少http请求(客户端到服务端的请求消息)——图片合并,js/css合并
2、使用CDN内容分发网络——添加服务器,使请求速度更快
3、添加expire/cache-control头
expire头的内容是一个时间值,即资源在本地的过期时间,存在本地,当时间还没超过资源的过期时间,直接使用这个资源,不会发送http请求
cache-control,http协议中常用的头部之一,负责控制页面的缓存机制,如果指示缓存,内容就会缓存在本地,即服务器在发送内容的时候会添加一个过期时间值,浏览器据此判断是否需要重新获取。
4、使用Gzip压缩——服务器先将文件压缩再传输,浏览器收到文件后先解压缩
5、css放在页面head里
6、script放在body里最下面
7、避免使用css expression/表达式
8、将js/css作为外部文件引用:提高了复用性,减小了html页面体积,提高了js/css可维护性;缺点:增加了http请求数,
写在页面内:只应用于一个页面,不经常被访问,脚本和样式很少。
9、减少DNS查询——当缓存时间长,减少DNS的重复查找,节省时间;当缓存时间短,可以及时检测网站服务器的变化,提高准确性,ie缓存30min,chrome/firefox缓存60s,
单域/多域,采用几个域名配置网站的资源最优?
10、最小化js和css——去除不必要的空格、格式符、注释,简写方法名、函数名
11、避免重定向——原始请求被重新转向了其他请求
http里重定向状态码——301 moved permanently用户所请求的资源被移到了另外的位置,用户端收到反馈后会再发起另外一个请求到新的位置去下载资源,永久重定向;
302 found用户所请求的页面被找到了但不在原始的位置,服务器会返回一个地址,用户端同样会发起另外一个请求去服务器返回的地址里下载所需资源,临时重定向。
对用户没甚区别,对搜索引擎有区别。如果是301搜索引擎就会智能分析,删除原地址记录新地址,而302搜索殷勤无法智能分析,只能从原地址进去新地址。
12、移除重复的脚本
13、配置实体标签——Entity Tag,属于http协议,受web服务支持,使用特殊的字符串来表示请求资源的版本
14、使用ajax缓存——局部更新,离不开它!

yahoohttp://developer.yahoo.com/performance/rules.html
优化网站http://web.zhaicool.net/tag/webxingneng

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值