菜单

Web性能优化:What? Why? How?

2019年1月27日 - Html/Html5

Web性能优化:What? Why? How?

2015/06/23 · HTML5 · 1
评论
·
性能优化

初稿出处: 木的树   

缘何要升迁web性能?

Web性能黄金守则:唯有10%~20%的最后用户响应时间花在了下载html文档上,其他的80%~90%岁月花在了下载页面组件上。

web性能对于用户体验有伙同主要的熏陶,按照有名的2-5-8原则:

全总都亟需研讨,通过正确的钻研大家就可以找到事物的向上规律。那里要谢谢雅虎的工程师总计的14条前端优化法则,使得我们得以站在巨人的肩头上。《高性能网站建设》那本书中的14条优化原则,统计起来首即使以下个方面的优化:

  1. 减少HTTP请求
  2. 页面内部优化
  3. manbetx2.0手机版,启用缓存
  4. 削减下载量
  5. 网络连接上的优化

为啥缩小HTTP请求可以增强Web性能?

要应对那个题目,大家就要询问当浏览器向服务器发送一个http请求知道获取数据都经历什么进度:

翻开一个链接(tcp/ip的三回握手进程) -》 发送请求 -》 等待(网络延迟跟服务器的拍卖时间)-》 下载数据

我们看一下百度首页中的http请求在各阶段花费的时刻,上边差别的颜料代表下图中的不一样等级

manbetx2.0手机版 1

(点击查看大图)

可以看来除了图片之外,其余大部http请求的轩然大波花在了树立连接与等待阶段。

http协议建立在TIC/IP协议之上,在TCP/IP协议中,TCP协议提供可相信的连接服务,选择四回握手建立一个连连。
简单的说一遍握手就是一个地位认同的进程:

(第二回握手:主机A发送位码为syn=1,随机爆发seq
number=1234567的数量包到服务器,主机B由SYN=1知道,A需要确立联合;)

晴儿:你是潇四弟吗,我是晴儿

(第二次握手:主机B收到请求后要确认共同音讯,向A发送ack
number=(主机A的seq+1),syn=1,ack=1,随机发生seq=7654321的包)

潇剑:那货是何人,一箫一剑走人间,下一句是什么?

(第三遍握手:主机A收到后检查ack number是否正确,即首先次发送的seq
number+1,以及位码ack是或不是为1,若正确,主机A会再发送ack
number=(主机B的seq+1),ack=1,主机B收到后确认seq值与ack=1则连年建立成功。)

晴儿:那首诗。。。你实在是潇表弟,一萧一剑走人间,千古情愁酒三遍。。。

潇剑:晴儿,你确实是晴儿。。。。

(啪啪啪啪啪啪啪啪啪啪啪啪啪啪啪。。。。。。。。。。。。)

言归正传,这几个历程也是亟需开销时间的,在百度首页找到一个无比的例子:manbetx2.0手机版 2

(点击查看大图)

而等待的岁月常常也领先内容下载的小时,这里同样找到一个极端例子:manbetx2.0手机版 3

(点击查看大图)

透过我们得以得出结论:一个http请求绝大部分的年华消耗在了树立连接跟等待的大运,优化的艺术是压缩http请求。

何以进步web性能?

1、减少HTTP请求

诚如的话要缩减http请求经常从七个方面出手:减弱图片的呼吁、裁减脚本文件与样式表的呼吁

图表的减少一般有三种方法:css sprites、内联图片、IconFont。

CSS
7-Ups:将多张图纸合并成一幅单独的图形,使用css的background-position属性,将html元素的背景图片放到sprites
图片中的期望地点上。使用那项技术的叠加优点是她大跌了下载量,合并后的图纸比分其余图纸和更小,因为它下落了图片自身的支付(颜色表、格式音讯等等)。实际项目中css
sprites是一项体力活,因为支付进程中要求对那张大图进行尊敬(添加、收缩图片),张鑫旭同学的篇章中有介绍如何保管sprites图片可以看做参考(这里)。倘诺急需在页面中为背景、链接、导航栏提供大批量的图形,css
sprites相对是一种美好的解决方案(干净的价签、较少的图样、较短的响应时间)。

内联图片:通过动用data:URL格局可以再页面中涵盖图表而无需任何额外的哀求。缺点就是IE8以下的浏览器不协理那种格局,而IE8在数据大小上有限制,只好扶助23kb以内的数额。对于较小的图形来说可以直接内联到web页面中,但对此大图片内联到页面里会招致页面变大,聪明的做法是拔取css,将内联的图纸作为背景使用,并置于外部体制表中,那意味数据可以缓存在样式表内部。使用外部样式表就算增加了一个http请求,但样式可以被浏览器缓存,得到额外的拿走。其它一些内需专注:base64是有损压缩。

manbetx2.0手机版 4

IconFont:图标字体,这是近年来新流行的一种以字体代替图片的技巧。它可以适应任何分辨率而不会冒出图片模糊问题,与图片比较它拥有更小的容量,更高的八面后珑(像字体一样可以安装图标大小、颜色、透明度、hover状态、反转等),IE8以上的浏览器都辅助该技术。在运用IconFont以前,你首先要确定你选则的字体库是不是是收费。详细内容可以参见这篇文章:图标字体化浅谈

减去脚本与样式表的呼吁紧要标准就是合并。在骨子里成本中大家依据模块化的标准化将代码分散到许多小文件中,按照软件开发的口径那是完全正确的,但对此上线页面来说,每一个文本都会发出一个http请求,严重影响属性。和css
sprites一样,将那一个小文件合并到一个文书中,可以减小http请求的多少并收缩最后用户响应时间。在统一进度中我们还须求利用工具精简(移除不要求的字符以减小文件大小缩减下载时间)和歪曲(除了移除不要求字符外,还会改写源代码,比如函数和变量名使用更短的标量名)Javascript代码。对于利用英特尔或CMD举行模块化开发的同桌,在统一进度中见惯司空会将借助的此外模块打包到一个文书中,而模板html平常以字符串的法门内联到Javascript文件中。方今最常用的前端构建工具就是glup,那里有一篇开始应用的稿子:前者
| gulp 打包 require.js
模块看重

2、页面内部优化

至于页面内部优化主要矛头:样式表放在顶部、脚本文件放在尾部、防止css表明式、把剧本的体制表放在外部、移除重复脚本

关注性能的工程师都愿意页面能不能尽早的显现在用户眼前,对于页面中广大情节的页面我们都盼望内容可以渐渐加载,为用户提供可视化回馈。而将样式表放在底层会造成浏览器阻止内容日益显示。为幸免当页面变化时重绘页面元素,浏览器会阻塞页面突显,直到样式表解析落成(详细内容能够查看自己的那篇博客)。所以只要将样式表放在顶部并不会回落资源的加载时间,它收缩的是页面的变现时间。三星主页已经犯过那样的错误:manbetx2.0手机版 5

将样式表放在底部会阻塞页面的逐年显现,而将script文件放在页面顶部同样会堵塞页面的日益显现。script元素会阻塞后续内容的解析,因为script中可以同过document.write来改变页面。解决的艺术就是将script标签放在页面底部。那样既可以让内容日益呈现,也可以增长下载的并行度。即使大家规定不须求document.write那可以为script标签加上asyn属性(Ie中要拉长defer)进步并行下载度。

CSS表明式是ie协助的可以用来动态更改css属性的一种方式,大家不须求驾驭太多,她的书写格局如下,一旦在成品中发现expression关键字就要根本消灭。

manbetx2.0手机版 6

动用外部脚本和体裁这一条,我想凡是有点经历的工程师都会如此干。

移除重复脚本:那条说的根本是防止在页面中往往出席同一份Javascript代码,即便大家的支出中有依靠管理的方法比如英特尔、CMD,基本不会现出那种景观。

 

3、启用缓存

关于缓存的运用那里介绍两套方案:expires/If-Modified-Since、Cache-Control/Etag;前者是HTTP1.0中的缓存方案,后者是HTTP1.1中缓存方案,若http尾部中并且出现二者,后者的先期级更高。

If-modified-since的主意一般被称之为条件Get。浏览器缓存中保存了一个文书的副本,但要求向服务器询问此副本是或不是可用。If-Modified-Since是浏览器将最后修改时间发送给服务器,服务器相应头中Last-Modified进行对照;若If-Modified-Since
<= Last-Modified 则浏览器读取本地副本。此时响应状态为304 Not
Modified, 并不在发送响应体。

manbetx2.0手机版 7

Expries:即使选拔规则GET和304响应可以节省时间,但浏览器跟服务器端照旧要发送三次呼吁进行确认。通过明确设置副本的晚点时间可以幸免条件GET。当浏览器发现响应头中的expires时,会将过期时间和文件一起保存到缓存中去。在逾期从前一向从缓存中读取。expires头使用一个特定的日子来指定缓存的有效期,他须要浏览器与服务器时间完全一致。而且一旦过期,服务器端配置中需求再行设顶一个超时岁月。

manbetx2.0手机版 8

ETag(实体标签):是服务器用于检查浏览器缓存有效性的一种机制。ETag在HTTP1.1中引入,ETag是唯一标识了一个零部件的一个一定版本的字符串。唯一的格式约束是其一字符串必须运用双引号。如果浏览器要说飞鹤(Friso)个零件是或不是管用他会采纳If-None-Match将etag字符串传送给服务器。假诺ETag是极度的,服务器端会回去304.(要是实体数据须求依据User-Agent或Accept-Language来改变时,ETag提供了更高的百步穿杨)。对于使用服务器集群的网站以来,从一台服务器到另一台服务器,ETag经常是力不从心合作的。那是ETag的题目。而且即便同时使用If-Modified-Since和If-None-Match也并无法完结预期效率。解决措施总是有些:自定义Etag格式

manbetx2.0手机版 9

Cache-Control:HTTP1.1引入了来代替Expires,它利用max-age指令来指定副本被缓存多长时间,该指令以秒为单位定义了一个更新窗,组件从被呼吁初叶到现行的秒数小于设定值,则向来使用副本。避免了四回http请求。相比较Expries,Cache-Control指令提供了更细粒度的主宰。详细内容请看大额同学的小说:因而浏览器看HTTP缓存

 

4、收缩下载量

调减下载量最实用的艺术就是翻开gzip压缩,gzip是GNU开发的一种免费格式。压缩组件通过减小http响应的分寸来增速响应速度。HTTP1.1经过应用DontTrackMeHere来标识协理的收缩,假设服务器看到那几个标识,会接纳请求头中的一种格局来收缩响应。并通过Content-Encoding来布告web客户端。很多网站会压缩html文件,实际上包罗xml跟json在内的别的文件都得以减去,但图片和pdf不应有压缩。依据经验经常可以对领先1kb或2kb的文书举行削减。压缩一般性能将响应的数据量减弱70%。压缩的花费在于:服务器需要消耗额外的cpu进行压缩,客户端要求解压缩。所以需求在cpu的损耗和数据块的大小之间展开抉择。

 

5、优化网络连接

网络连接的优化紧要有三个规则:使用CDN加快、裁减DNS查找、幸免重定向

CDN:CDN是地理上遍布的web
server的汇集,用于更迅捷地公布内容。经常依照网络远近来采用给现实用户服务的web
server。 那裁减了资源的传导响应时间,有效进步web性能。

DNS用于映射主机名和IP地址,一般一遍解析须要20~120飞秒。浏览器会率先依照页面的主机名进行域名解析,在有ISP重返结果以前页面不会加载任何内容,所以减少DNS查找可以使得下落等待时间。为已毕更高的性能,DNS解析平时被多级别地缓存,如由ISP或局域网维护的caching
server,本地机械操作系统的缓存(如windows上的DNS Client
Service(Service)),浏览器。IE的缺省DNS缓存时间为30分钟,Firefox的缺省缓冲时间是1分钟。 大家能做的是尽量裁减一个页面的主机名,但要在浏览器最大交互下载数跟dns查找之间做衡量。根据雅虎的钻研,最好将主机名控制在2-4个内。

重定向:将一个URL重新路由到另一个URL。重定向效用是透过301和302那四个HTTP状态码完成的,如:
HTTP/1.1 301 Moved Permanently
Location: http://example.com/newuri
Content-Type: text/html

浏览器自动重定向请求到Location指定的URL上,重定向的第一问题是下降了用户体验。 种最费用资源、常常发出而很简单被忽视的重定向是URL的最终缺乏/,导致自动发出结尾斜线的原故是,浏览器在展开get请求是必须指定一些门路;倘若没有途径它就会简单的选用文档根。(主机缺乏结尾斜线是不会爆发重定向:http://www.baidu.com)缺少结尾斜线发生重定向是很多web服务器的默认行为。需要在服务器端设置方可消除。以下图片是豆瓣的一个url请求:![](http://ww1.sinaimg.cn/mw690/6941baebjw1etdvd5ao66j20iq02xt8w.jpg)

雅虎的14条优化规则在很长的一段时间里公布着举足轻重功用,随着技术的升高,单单那十四条标准已经不可能满意前端性能优化。在有些大商店面世了前者工程化这一定义,详细内容可以参见一下这篇作品:前端性能优化工程化进阶

 

参考资料:

web前端性能意思、关心主要、测试方案、

WEB站点性能优化实践(加载速度提高2s)

HTTP协议三回握手进度

高性能WEB开发 –
为何要缩减请求数,怎么样压缩请求数!

自身是哪些对网站CSS进行架构的

图标字体化浅谈

动用ETag缓存优化请求

通过浏览器看HTTP缓存

1 赞 2 收藏 1
评论

manbetx2.0手机版 10

为啥要擢升web性能?

Web性能黄金守则:只有10%~20%的最后用户响应时间花在了下载html文档上,其他的80%~90%日子花在了下载页面组件上。

  web性能对于用户体验有伙同关键的熏陶,按照盛名的`2-5-8`原则:

  凡事都急需商量,通过正确的切磋我们就足以找到事物的开拓进取规律。这里要感谢雅虎的工程师计算的14条前端优化法则,使得我们可以站在巨人的肩膀上。《高性能网站建设》那本书中的14条优化原则,计算起来重如若以下个地点的优化:

  1. 减少HTTP请求
  2. 页面内部优化
  3. 启用缓存
  4. 减去下载量
  5. 网络连接上的优化

  

缘何减弱HTTP请求可以加强Web性能?

  要回应那个问题,我们就要打听当浏览器向服务器发送一个http请求知道获取数据都经历怎么着进程:

  开启一个链接(tcp/ip的一回握手进度) -》 发送请求 -》 等待(网络延迟跟服务器的拍卖时间)-》 下载数据

  我们看一下百度首页中的http请求在各阶段花费的小运,下边不一样的颜料代表下图中的不一样等级

manbetx2.0手机版 11

  可以看到除了图片之外,其他大部分http请求的轩然大波花在了建立连接与等待阶段。

  http共商建立在TIC/IP协议之上,在TCP/IP协议中,TCP协议提供可信的连天服务,采取三回握手建立一个三番五次。
简单的话三遍握手就是一个身价认可的进程:

  (首回握手:主机A发送位码为syn=1,随机暴发seq
number=1234567的多少包到服务器,主机B由SYN=1知道,A需求创建协同;)

晴儿:你是潇小弟吗,我是晴儿

  (第二次握手:主机B收到请求后要认可共同音讯,向A发送ack
number=(主机A的seq+1),syn=1,ack=1,随机发生seq=7654321的包)

潇剑:那货是哪个人,一箫一剑走人间,下一句是怎样?

  (第四次握手:主机A收到后检查ack number是还是不是科学,即首先次发送的seq
number+1,以及位码ack是或不是为1,若正确,主机A会再发送ack
number=(主机B的seq+1),ack=1,主机B收到后确认seq值与ack=1则总是建立成功。)

晴儿:那首诗。。。你真的是潇三弟,一萧一剑走人间,千古情愁酒五次。。。

潇剑:晴儿,你真的是晴儿。。。。

(啪啪啪啪啪啪啪啪啪啪啪啪啪啪啪。。。。。。。。。。。。)

  言归正传,那些进程也是亟需费用时间的,在百度首页找到一个万分的例证:manbetx2.0手机版 12

  而等待的时间一般也超越内容下载的时刻,那里同样找到一个最为例子:manbetx2.0手机版 13

  因而大家可以得出结论:一个http请求绝大部分的大运消耗在了建立连接跟等待的年月,优化的艺术是减掉http请求。

 

怎样增强web性能?

  1、减少HTTP请求

  一般的话要减小http请求寻常从八个地方开首:收缩图片的请求、裁减脚本文件与样式表的伏乞

  图片的缩减一般有三种艺术:css sprites、内联图片、IconFont。

  CSS
Sprites:将多张图纸合并成一幅单独的图片,使用css的background-position属性,将html元素的背景图片放到sprites
图片中的期望地方上。使用那项技术的附加优点是她大跌了下载量,合并后的图样比分其他图片和更小,因为它下跌了图片自身的开发(颜色表、格式音讯等等)。实际项目中css
sprites是一项体力活,因为开发进度中需求对那张大图举行爱惜(添加、收缩图片),张鑫旭同学的篇章中有介绍怎样保管sprites图片可以看做参考(这里)。如若急需在页面中为背景、链接、导航栏提供大批量的图形,css
sprites相对是一种可以的缓解方案(干净的标签、较少的图片、较短的响应时间)。

  内联图片:通过选择data:URL格局可以再页面中包涵图表而无需任何附加的呼吁。缺点就是IE8以下的浏览器不支持那种情势,而IE8在数量大小上有限制,只好接济23kb以内的数据。对于较小的图样来说可以一向内联到web页面中,但对于大图片内联到页面里会造成页面变大,聪明的做法是利用css,将内联的图形作为背景使用,并置于外部体制表中,那表示数据可以缓存在样式表内部。使用外部样式表尽管增加了一个http请求,但样式能够被浏览器缓存,得到额外的收获。其它一些内需留意:base64是有损压缩。

manbetx2.0手机版 14

  IconFont:图标字体,那是多年来新流行的一种以字体代替图片的技能。它可以适应任何分辨率而不会晤世图片模糊问题,与图片相比较它拥有更小的容量,更高的灵活性(像字体一样可以设置图标大小、颜色、透明度、hover状态、反转等),IE8以上的浏览器都协理该技术。在选拔IconFont此前,你首先要规定你选则的字体库是还是不是是收费。详细内容可以参照那篇小说:图标字体化浅谈

  减弱脚本与样式表的乞求紧要条件就是合并。在事实上用度中大家根据模块化的规范将代码分散到广大小文件中,根据软件开发的原则这是完全正确的,但对此上线页面来说,每一个文书都会时有发生一个http请求,严重影响属性。和css
sprites一样,将这个小文件合并到一个文书中,可以减掉http请求的数目并缩小最终用户响应时间。在集合进程中大家还亟需选择工具精简(移除不须求的字符以减小文件大小缩减下载时间)和歪曲(除了移除不必要字符外,还会改写源代码,比如函数和变量名使用更短的标量名)Javascript代码。对于使用AMD或CMD进行模块化开发的同校,在集合进程中一般会将凭借的别样模块打包到一个文书中,而模板html经常以字符串的主意内联到Javascript文件中。如今最常用的前端构建工具就是glup,那里有一篇初始应用的稿子:前者
| gulp 打包 require.js
模块器重

  

  2、页面内部优化

  关于页面内部优化主要矛头:样式表放在顶部、脚本文件放在底部、防止css表达式、把剧本的样式表放在外表、移除重复脚本

  关切性能的工程师都梦想页面能或不能尽快的变现在用户眼前,对于页面中很多内容的页面大家都盼望内容可以逐步加载,为用户提供可视化回馈。而将样式表放在底层会造成浏览器阻止内容日益显现。为幸免当页面变化时重绘页面元素,浏览器会阻塞页面呈现,直到样式表解析完结(详细内容可以查阅自己的那篇博客)。所以只要将样式表放在顶部并不会减小资源的加载时间,它减少的是页面的表现时间。魅族主页已经犯过这样的失实:manbetx2.0手机版 15

  将样式表放在底层会阻塞页面的日益彰显,而将script文件放在页面顶部同样会卡住页面的逐级显现。script元素会阻塞后续内容的剖析,因为script中得以同过document.write来改变页面。解决的措施就是将script标签放在页面尾部。那样既可以让内容日益显现,也可以增进下载的并行度。假如大家规定不必要document.write这可以为script标签加上asyn属性(Ie中要丰硕defer)升高并行下载度。

  CSS表达式是ie支持的可以用来动态更改css属性的一种艺术,大家不须求明白太多,她的书写格局如下,一旦在产品中窥见expression关键字就要彻底扑灭。

  manbetx2.0手机版 16

  使用外部脚本和样式这一条,我想凡是有点经历的工程师都会如此干。

  移除重复脚本:那条说的重若是避免在页面中多次加盟同一份Javascript代码,即使我们的支出中有依靠管理的不二法门比如英特尔、CMD,基本不会产出那种情形。

 

  3、启用缓存

  关于缓存的行使那里介绍两套方案:expires/If-Modified-Since、Cache-Control/Etag;前者是HTTP1.0中的缓存方案,后者是HTTP1.1中缓存方案,若http尾部中并且现身二者,后者的先期级更高。

  If-modified-since的办法一般被喻为条件Get。浏览器缓存中保存了一个文件的副本,但要求向服务器询问此副本是或不是可用。If-Modified-Since是浏览器将最终修改时间发送给服务器,服务器相应头中Last-Modified举行对照;若If-Modified-Since
<= Last-Modified 则浏览器读取本地副本。此时响应状态为304 Not
Modified, 并不在发送响应体。

manbetx2.0手机版 17

manbetx2.0手机版 18

  Expries:就算选用规范GET和304响应可以节省时间,但浏览器跟服务器端依旧要发送三回呼吁举办确认。通过明确设置副本的逾期时间足以幸免条件GET。当浏览器发现响应头中的expires时,会将过期时刻和文书一起保存到缓存中去。在逾期事先一向从缓存中读取。expires头使用一个一定的时日来指定缓存的有效期,他必要浏览器与服务器时间完全一致。而且只要过期,服务器端配置中须求再度设顶一个过期时刻。

manbetx2.0手机版 19

  ETag(实体标签):是服务器用于检查浏览器缓存有效性的一种体制。ETag在HTTP1.1中引入,ETag是绝无仅有标识了一个组件的一个一定版本的字符串。唯一的格式约束是以此字符串必须利用双引号。假诺浏览器要说多美滋个组件是或不是管用他会采纳If-None-Match将etag字符串传送给服务器。借使ETag是非常的,服务器端会回去304.(假使实体数据必要根据User-Agent或Accept-Language来改变时,ETag提供了更高的布帆无恙)。对于使用服务器集群的网站以来,从一台服务器到另一台服务器,ETag经常是无能为力合作的。那是ETag的题目。而且就是同时采纳If-Modified-Since和If-None-Match也并无法达标预期效果。解决方法总是有些:自定义Etag格式

  manbetx2.0手机版 20manbetx2.0手机版 21

  Cache-Control:HTTP1.1引入了来代替Expires,它拔取max-age指令来指定副本被缓存多长期,该指令以秒为单位定义了一个更新窗,组件从被呼吁开始到现在的秒数小于设定值,则一向选取副本。幸免了四次http请求。相比较Expries,Cache-Control指令提供了更细粒度的控制。详细内容请看大额同学的稿子:经过浏览器看HTTP缓存

 

  4、减弱下载量

  收缩下载量最实惠的法子就是打开gzip压缩,gzip是GNU开发的一种免费格式。压缩组件通过减小http响应的大小来增速响应速度。HTTP1.1透过动用Accept-Encoding来标识辅助的缩减,如若服务器看到那些标识,会拔取请求头中的一种方法来减弱响应。并经过Content-Encoding来打招呼web客户端。很多网站会压缩html文件,实际上包蕴xml跟json在内的别的祖父文都足以收缩,但图片和pdf不该收缩。依据经验平常可以对超过1kb或2kb的文书进行压缩。压缩普通能将响应的数据量缩短70%。压缩的资金在于:服务器要求费用额外的cpu进行削减,客户端须求解压缩。所以需求在cpu的花费和数据块的深浅之间举办分选。

 

  5、优化网络连接

  网络连接的优化主要有八个规则:使用CDN加速、裁减DNS查找、防止重定向

  CDN:CDN是地理上遍布的web
server的联谊,用于更火速地揭露内容。平时按照网络远近日接纳给现实用户服务的web server。 那减少了资源的传导响应时间,有效拉长web性能。

  DNS用于映射主机名和IP地址,一般四回解析必要20~120阿秒。浏览器会率先按照页面的主机名举办域名解析,在有ISP重返结果从前页面不会加载任何内容,所以收缩DNS查找可以使得下降等待时间。为已毕更高的属性,DNS解析寻常被多级别地缓存,如由ISP或局域网维护的caching
server,本地机械操作系统的缓存(如windows上的DNS Client 瑟维斯(Service)),浏览器。IE的缺省DNS缓存时间为30分钟,Firefox的缺省缓冲时间是1分钟。 大家能做的是尽量减弱一个页面的主机名,但要在浏览器最大交互下载数跟dns查找之间做衡量。按照雅虎的商讨,最好将主机名控制在2-4个内。

  重定向:将一个URL重新路由到另一个URL。重定向成效是通过301和302那四个HTTP状态码达成的,如: 
   HTTP/1.1 301 Moved Permanently 
   Location: http://example.com/newuri 
   Content-Type: text/html 

  浏览器自动重定向请求到Location指定的URL上,重定向的关键问题是下落了用户体验。 种最用度资源、常常发出而很简单被忽视的重定向是URL的尾声缺乏/,导致自动发出结尾斜线的由来是,浏览器在举行get请求是必须指定一些路子;假若没有路子它就会简单的行使文档根。(主机紧缺结尾斜线是不会生出重定向:http://www.baidu.com)缺少结尾斜线发生重定向是很多web服务器的默认行为。需要在服务器端设置方可消除。以下图片是豆瓣的一个url请求:![](https://images0.cnblogs.com/blog2015/412020/201506/210217444667003.png)

 

  雅虎的14条优化规则在很长的一段时间里发布着首要功用,随着技术的升华,单单那十四条标准已经不可见满意前端性能优化。在一部分大商厦出现了前者工程化这一概念,详细内容可以参见一下那篇小说:前者性能优化工程化进阶

 

  参考资料:

web前端性能意思、关心主要、测试方案、

WEB站点性能优化实践(加载速度提高2s)

HTTP协议五遍握手进程

高性能WEB开发 –
为何要削减请求数,怎样压缩请求数!

本身是什么样对网站CSS进行架构的

图标字体化浅谈

动用ETag缓存优化请求

通过浏览器看HTTP缓存

Web应用性能优化黄金法则——转

http://www.cnblogs.com/dojo-lzz/p/4591446.html

相关文章

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图