菜单

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

2019年1月24日 - Json

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. 启用缓存
  4. 减掉下载量
  5. 网络连接上的优化

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

要回应这一个问题,大家就要驾驭当浏览器向服务器发送一个http请求知道获取数据都经历怎么样进程:

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

大家看一下百度首页中的http请求在各等级成本的时刻,上边不一致的水彩代表下图中的差异等级

图片 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则连年建立成功。)

晴儿:那首诗。。。你真正是潇四哥,一萧一剑走人间,千古情愁酒三回。。。

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

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

言归正传,那些进度也是要求费用时间的,在百度首页找到一个极端的例子:图片 2

(点击查看大图)

而等待的小运平日也出乎内容下载的年月,那里同样找到一个最好例子:图片 3

(点击查阅大图)

通过大家可以得出结论:一个http请求绝大部分的光阴消耗在了创设连接跟等待的时光,优化的法门是减掉http请求。

如何升高web性能?

1、减少HTTP请求

一般的话要减弱http请求日常从三个方面起首:收缩图片的呼吁、减弱脚本文件与样式表的伸手

图片的滑坡一般有三种方式:css sprites、内联图片、IconFont。

CSS
Coca Colas:将多张图片合并成一幅单独的图样,使用css的background-position属性,将html元素的背景图片放到sprites
图片中的期望地点上。使用那项技能的增大优点是他大跌了下载量,合并后的图纸比分其余图纸和更小,因为它下跌了图片自身的费用(颜色表、格式音讯等等)。实际项目中css
sprites是一项体力活,因为开发进度中要求对那张大图举行尊敬(添加、裁减图片),张鑫旭同学的稿子中有介绍怎么着保管sprites图片可以视作参考(这里)。如若急需在页面中为背景、链接、导航栏提供大批量的图纸,css
sprites相对是一种非凡的化解方案(干净的价签、较少的图形、较短的响应时间)。

内联图片:通过应用data:URL格局可以再页面中含有图表而无需任何附加的央求。缺点就是IE8以下的浏览器不帮衬那种措施,而IE8在多少大小上有限制,只好辅助23kb以内的数目。对于较小的图片来说能够一贯内联到web页面中,但对此大图片内联到页面里会导致页面变大,聪明的做法是运用css,将内联的图片作为背景使用,并置于外部体制表中,这意味着数据足以缓存在样式表内部。使用外部样式表就算增加了一个http请求,但样式可以被浏览器缓存,拿到额外的获得。其它一些亟需小心:base64是有损压缩。

图片 4

IconFont:图标字体,那是新近新流行的一种以字体代替图片的技术。它可以适应任何分辨率而不会油但是生图片模糊问题,与图片相比它富有更小的容量,更高的油滑(像字体一样可以设置图标大小、颜色、透明度、hover状态、反转等),IE8以上的浏览器都协助该技能。在动用IconFont在此之前,你首先要规定你选则的字体库是不是是收费。详细内容可以参考那篇小说:图标字体化浅谈

削减脚本与样式表的请求首要原则就是合并。在事实上支付中大家根据模块化的条件将代码分散到许多小文件中,依据软件开发的原则那是完全正确的,但对于上线页面来说,每一个文本都会时有暴发一个http请求,严重影响属性。和css
sprites一样,将这一个小文件合并到一个文本中,可以减去http请求的数量并裁减最后用户响应时间。在集合进程中我们还索要利用工具精简(移除不需要的字符以减小文件大小缩减下载时间)和混淆(除了移除不需求字符外,还会改写源代码,比如函数和变量名使用更短的标量名)Javascript代码。对于使用英特尔或CMD进行模块化开发的同室,在集合进度中见怪不怪会将凭借的其余模块打包到一个文件中,而模板html经常以字符串的法子内联到Javascript文件中。如今最常用的前端构建工具就是glup,那里有一篇伊始应用的文章:前端
| gulp 打包 require.js
模块依赖

2、页面内部优化

关于页面内部优化首要趋势:样式表放在顶部、脚本文件放在底部、防止css表达式、把剧本的体裁表放在表面、移除重复脚本

关切性能的工程师都希望页面能不能尽快的突显在用户面前,对于页面中很多内容的页面我们都期待内容可以稳步加载,为用户提供可视化回馈。而将样式表放在尾部会招致浏览器阻止内容日益显现。为防止当页面变化时重绘页面元素,浏览器会阻塞页面突显,直到样式表解析完成(详细内容可以查阅自己的那篇博客)。所以即使将样式表放在顶部并不会缩减资源的加载时间,它裁减的是页面的显现时间。中兴主页已经犯过那样的谬误:图片 5

将样式表放在头部会堵塞页面的日渐显现,而将script文件放在页面顶部同样会阻塞页面的逐月显示。script元素会阻塞后续内容的辨析,因为script中得以同过document.write来改变页面。解决的主意就是将script标签放在页面尾部。那样既可以让内容日益展现,也足以加强下载的并行度。即便大家规定不需求document.write这可以为script标签加上asyn属性(Ie中要抬高defer)进步并行下载度。

CSS表达式是ie扶助的可以用来动态更改css属性的一种办法,大家不要求了然太多,她的书写格局如下,一旦在成品中发觉expression关键字就要干净消灭。

图片 6

拔取外部脚本和体制这一条,我想凡是有点经历的工程师都会那样干。

移除重复脚本:那条说的紧要性是防止在页面中屡屡进入同一份Javascript代码,即使大家的付出中有依靠管理的章程比如AMD、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, 并不在发送响应体。

图片 7

Expries:尽管应用条件GET和304响应可以节省时间,但浏览器跟服务器端照旧要发送三遍呼吁举办确认。通过明确设置副本的过期时间可以幸免条件GET。当浏览器发现响应头中的expires时,会将过期日子和文件一起保存到缓存中去。在逾期事先一贯从缓存中读取。expires头使用一个特定的小时来指定缓存的有效期,他须求浏览器与服务器时间完全一致。而且假诺过期,服务器端配置中须要重新设顶一个逾期时刻。

图片 8

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格式

图片 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),浏览器。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
评论

图片 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请求在各阶段花费的时光,上边分歧的颜色代表下图中的不相同等级

图片 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则一而再建立成功。)

晴儿:那首诗。。。你确实是潇小弟,一萧一剑走人间,千古情愁酒一次。。。

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

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

  言归正传,那些进度也是内需开销时间的,在百度首页找到一个万分的例证:图片 12

  而等待的日子一般也超越内容下载的光阴,那里同样找到一个最好例子:图片 13

  因此大家得以得出结论:一个http请求绝大部分的岁月开销在了树立连接跟等待的小时,优化的方式是缩减http请求。

 

怎么增强web性能?

  1、减少HTTP请求

  一般的话要减弱http请求平日从八个地方入手:裁减图片的哀求、减弱脚本文件与样式表的哀求

  图片的减弱一般有二种办法:css sprites、内联图片、IconFont。

  CSS
七喜s:将多张图片合并成一幅单独的图样,使用css的background-position属性,将html元素的背景图片放到sprites
图片中的期望地点上。使用那项技能的增大优点是他大跌了下载量,合并后的图形比分其余图形和更小,因为它下降了图片自身的支出(颜色表、格式音讯等等)。实际项目中css
sprites是一项体力活,因为开发进度中需求对那张大图进行保险(添加、减少图片),张鑫旭同学的稿子中有介绍怎样保管sprites图片可以作为参照(这里)。倘若须要在页面中为背景、链接、导航栏提供大批量的图样,css
sprites相对是一种良好的缓解方案(干净的竹签、较少的图纸、较短的响应时间)。

  内联图片:通过选拔data:URL格局可以再页面中包含图表而无需任何附加的哀求。缺点就是IE8以下的浏览器不协助这种措施,而IE8在数额大小上有限制,只好匡助23kb以内的数量。对于较小的图形来说可以直接内联到web页面中,但对此大图片内联到页面里会促成页面变大,聪明的做法是拔取css,将内联的图纸作为背景使用,并内置外部体制表中,那代表数据能够缓存在样式表内部。使用外部样式表尽管扩展了一个http请求,但样式可以被浏览器缓存,获得额外的拿走。别的一些内需专注:base64是有损压缩。

图片 14

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

  减弱脚本与样式表的呼吁首要标准就是合并。在其实付出中大家根据模块化的口径将代码分散到广大小文件中,根据软件开发的尺度那是完全正确的,但对此上线页面来说,每一个文件都会爆发一个http请求,严重影响属性。和css
sprites一样,将那一个小文件合并到一个文本中,可以减掉http请求的数额并缩小末了用户响应时间。在集合进程中大家还索要采纳工具精简(移除不必要的字符以减小文件大小缩减下载时间)和混淆(除了移除不要求字符外,还会改写源代码,比如函数和变量名使用更短的标量名)Javascript代码。对于利用英特尔或CMD举办模块化开发的同班,在集合进程中一般会将借助的其余模块打包到一个文本中,而模板html平日以字符串的办法内联到Javascript文件中。近年来最常用的前端构建工具就是glup,这里有一篇开端应用的稿子:前者
| gulp 打包 require.js
模块看重

  

  2、页面内部优化

  关于页面内部优化首要趋势:样式表放在顶部、脚本文件放在尾部、避免css表明式、把剧本的样式表放在外表、移除重复脚本

  关注性能的工程师都期待页面能如故不能尽早的显现在用户眼前,对于页面中很多情节的页面咱们都希望内容可以渐渐加载,为用户提供可视化回馈。而将样式表放在底层会造成浏览器阻止内容日益展现。为防止当页面变化时重绘页面元素,浏览器会阻塞页面显示,直到样式表解析达成(详细内容可以查阅自己的那篇博客)。所以只要将样式表放在顶部并不会缩减资源的加载时间,它减弱的是页面的变现时间。金立主页已经犯过那样的荒唐:图片 15

  将样式表放在底层会阻塞页面的逐月显示,而将script文件放在页面顶部同样会堵塞页面的逐年突显。script元素会阻塞后续内容的剖析,因为script中得以同过document.write来改变页面。解决的法子就是将script标签放在页面尾部。那样既能够让内容日益显现,也足以提升下载的并行度。借使大家规定不须要document.write那可以为script标签加上asyn属性(Ie中要添加defer)进步并行下载度。

  CSS表明式是ie援救的可以用来动态更改css属性的一种艺术,大家不须要明白太多,她的书写格局如下,一旦在产品中发现expression关键字就要根本扑灭。

  图片 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, 并不在发送响应体。

图片 17

图片 18

  Expries:即使使用规范GET和304响应可以节省时间,但浏览器跟服务器端仍旧要发送四回呼吁举行确认。通过明确设置副本的超时时间可以防止条件GET。当浏览器发现响应头中的expires时,会将过期时刻和文件一起保存到缓存中去。在逾期事先一向从缓存中读取。expires头使用一个特定的年华来指定缓存的有效期,他需要浏览器与服务器时间完全一致。而且若是过期,服务器端配置中需要重新设顶一个逾期时刻。

图片 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格式

  图片 20图片 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地图