首页vns威尼斯城官网登入 › 主要内容就是网站优化的35条最佳实践,近在学习《高性能网站建设指南》这本书

主要内容就是网站优化的35条最佳实践,近在学习《高性能网站建设指南》这本书

JavaScript关于提高网站性能的几点建议(一),javascript几点建议

近在学习《高性能网站建设指南》这本书,本文算是一个学习笔记,将学到的东西进行整理一下,方便后面查看。

性能黄金法则(Performance Golden
Rule)解释了只有10%~20%的最终用户响应时间花在接受所请求的用户HTML文档上,剩余的80%~90%时间花在为HTML文档所引用的所有组件(图片、脚本、样式表等)进行的HTTP请求上,最终用户响应时间花费在页面组件上

  ——Steve Sounders

1 文件合并(减少HTTP请求数量)

CSS Sprites

  利用css
sprites将网站用到的图片合并成一张图片,通过background-position、width、height控制背景图位置来使用某一个图标,这种方式可以将多个图片请求缩减为一次,生成css
sprites的工具也很多,grunt和gulp中都有相关的插件,CssGaga也不错。

合并js和css

  和精灵图一样,合并css和js文件也是减少HTTP请求很重要的方式,对css文件的合并目前来说没有什么争议,但是对于当前js模块化盛行,将所有js文件合并成一个文件,仿佛是一种倒退。正确的方式是遵守编译型语言的模式,保持js的模块化,在生成过程中只对初始请求用到的js文件生成目标文件。

2 使用内容发布网络(减少HTTP请求时间)

  HTTP请求时间另一个影响因素是你与网站web服务器所处的距离,显然距离越远,请求所需的时间也越久,通过CDN可以大大改善这一点。

  CDN是分布在多个不同地理位置的web服务器,用于更加有效的向用户发布内容。CDN最主要的功能是给终端用户存放静态文件,另外也提供下载、安全服务等功能。

3
设置浏览器缓存(避免重复HTTP请求)

使用Expire/Cache-control

  浏览器通过使用缓存可以避免每次都进行重复的请求,HTTP
1.0和HTTP1.1分别有不同的缓存实现方式,Expires(1.0)和Cache-control(1.1)。Web服务器通过expires告诉客户端在指定的时间内,都使用该文件的缓存副本,不再向服务端重复发出请求,例如:

Expires: Thu, 01 Dec 2016 16:00:00 GMT (GMT格式)

  这个设置意味着截止到2016年12月1日,都可以使用该缓存副本,无需再发出请求。

  Expires这种通过截止日期的方式,存在一个限制:要求客户端和服务端时钟严格同步,而HTTP
1.1引入的Cache-Control通过指定一个以秒为单位的时间指定缓存日期,则不存该限制,例如:

Cache-Control: max-age=31536000

  这个设置意味缓存时间为一年,推荐使用Cache-Control,但是在支持HTTP
1.1的情况下,另外要注意的一点:Cache-Control和Expire同时存在时,Cache-Control具有更高的优先级。

配置或移除ETag

  使用Expire/Cache-Control可以避免第二次访问时,使用本地缓存避免重复HTTP请求,提高网站速度。然而,在用户点击了浏览器刷新或者在expire已过期的情况下,仍然会向服务端发出HTTP
GET请求,而此时如果该文件并没有发生变化,服务端不会返回整个文件而是会返回304
Not Modified状态码。

  服务端判断该文件是否发生变化的依据有两个:Last-Modified(最新修改日期)和ETag(实体标签);

  ETag(Entity Tags)是在HTTP
1.1引入的,与Last-Modified同时存在时要有更高的优先级。服务端通过对比客户端发来的ETag(If-None-Match)和当前ETag,若相同返回304
Not Modifed,否则返回整个文件以及200 OK。

  ETag存在一个问题:当浏览器向一个服务器发送GET请求原始组件,之后又向另一台服务器请求该组件时,ETag是不匹配的,当然,如果你的网站寄宿在一台服务器上不存在这个问题,而现在很多网站使用多台服务器,ETag的存在就大大降低验证有效性的成功率。

  存在这个问题是时的解决办法是对ETag进行配置,移除服务器innode值只保留修改时间戳和大小作为ETag值,或者直接移除ETag,使用Last-Modified来验证文件有效性。

4 压缩组件(减小HTTP请求大小)

  通过对HTTP传输的文件进行压缩减小HTTP请求的大小,提高请求速度,GZIP是目前最常用也是最有效的压缩方式。

  然而,并非所有的资源文件都需要压缩,压缩的成本包括服务端需要花费CPU周期进行压缩,而客户端也需要对压缩文件进行解压缩,必须结合自己网站进行权衡。现在绝大多数网站都对其HTML文档进行压缩,部分网站选择对js、css进行压缩,几乎没有网站对图片、PDF等文件进行GZIP压缩,原因在于这些文件是已经被压缩过的,采用HTTP压缩已经被过压缩的东西并不能使它更小。事实上,添加标头,压缩字典,并校验响应体实际上使它变得更大,而且还浪费了CPU。

  如何对网站开启GZIP,需要在所使用的web服务器(IIS、Nginx、Apache等)中进行设置。

5 CSS文件放在首部

  将CSS文件放在首部和放在尾部,并不影响HTTP请求,因此从请求时间上来讲是一致的,然而从用户体验的角度,将CSS文件放在首部,会获得更好的用户体验。

  原因在于浏览器是从上到下依次解析html文档,将CSS文件置于头部,页面会首先对CSS文件发出请求,随后加载DOM树并对其进行渲染,页面会逐步呈现在用户面前。

  而与之相反,如果将CSS文件放置在尾部,页面加载完整DOM之后请求CSS文件,然后对整个DOM树渲染并呈现给用户,从用户的角度,在css文件没有请求完成之前,整个页面是出于白屏状态的,白屏是浏览器的一种行为,David
Hyatt对其的解释是这样的

在样式树没有完全加载之前,渲染dom树就是一种浪费,因为在样式树加载完成之后会再次渲染,出现FOUC(无样式内容闪烁)问题。

  另外要注意的一点,使用link而不是@import引入css样式表,使用@import引入的样式即使写在首部,也会在文档最后加载。

6 JS文件放在尾部

  HTTP请求是并行的,不同浏览器并行下载的数目也不一样(2、4、或者8个),并行下载提高了HTTP请求的速度。而将JS文件放在首部,不仅会阻塞后面文件的下载而且会阻塞页面的渲染。

  为什么会这样呢?原因有两个:

JS文件中可能存在document.write修改页面的内容,因此页面会在脚本执行完成之后才可使渲染。

不同JS文件不管大小如何,可能存在依赖关系,因此必须按照顺序进行执行,因此在加载脚本的时候并行下载是禁止的。

所以,最好的方式是讲js文件放置在尾部,等页面所有可视化组件加载完成之后再进行请求,提高用户体验。

以上所述是小编给大家介绍的JavaScript关于提高网站性能的几点建议(一),希望对大家有所帮助,如果大家想了解更多内容,敬请关注帮客之家。在下篇文章小编给大家介绍javascript提高网站性能优化的建议(二)

近在学习《高性能网站建设指南》这本书,本文算是一个学习笔记,将学到的...

  最近在学习《高性能网站建设指南》这本书,本文算是一个学习笔记,将学到的东西进行整理一下,方便后面查看。

近在学习《高性能网站建设指南》这本书,本文算是一个学习笔记,将学到的东西进行整理一下,方便后面查看。

网站优化离不开前后端的互相协作,但是对于前端工程师来说,在保证后端技术方案不变时,能不能只利用前端技术来优化网站呢?答案是肯定。雅虎的邮件团队总结了常用的35条网站优化最佳实践,其中就有很多实践,只要我们前端人员在日常开发过程中遵循这些实践,就可以在一定程度优化网站加载速度。

性能优化问题

  性能黄金法则(Performance Golden
Rule)解释了只有10%~20%的最终用户响应时间花在接受所请求的用户HTML文档上,剩余的80%~90%时间花在为HTML文档所引用的所有组件(图片、脚本、样式表等)进行的HTTP请求上,最终用户响应时间花费在页面组件上
  ——Steve Sounders

性能黄金法则(Performance Golden
Rule)解释了只有10%~20%的最终用户响应时间花在接受所请求的用户HTML文档上,剩余的80%~90%时间花在为HTML文档所引用的所有组件(图片、脚本、样式表等)进行的HTTP请求上,最终用户响应时间花费在页面组件上

本文篇幅较长,主要内容就是网站优化的35条最佳实践,以及对每条最佳实践的说明。技术文章看起来都是很枯燥,特别对于这种篇幅较长的文章,这里先列出来有哪些实践,不是每条实践的说明都要看,才能明白这个实践的意思。

代码层面:避免使用css表达式,避免使用高级选择器,通配选择器。

1 文件合并(减少HTTP请求数量)

  • CSS Sprites

  利用css
sprites将网站用到的图片合并成一张图片,通过background-positionwidthheight控制背景图位置来使用某一个图标,这种方式可以将多个图片请求缩减为一次,生成css
sprites的工具也很多,grunt和gulp中都有相关的插件,CssGaga也不错。

  • 合并js和css

  和精灵图一样,合并css和js文件也是减少HTTP请求很重要的方式,对css文件的合并目前来说没有什么争议,但是对于当前js模块化盛行,将所有js文件合并成一个文件,仿佛是一种倒退。正确的方式是遵守编译型语言的模式,保持js的模块化,在生成过程中只对初始请求用到的js文件生成目标文件。

  ——Steve Sounders

1.最小化HTTP请求 2.使用内容分发网络(CDN)
3.增加Expires或者Cache-Control头 4.Gzip压缩内容
5.把CSS文件放到顶部 6.把Js文件放到底部
7.避免CSS表达式 8.保持Js和CSS外部引用
9.减少DNS查询路径 10.压缩js和css
11.避免重定向 12.删除重复Scripts
13.配置Etags 14.使Ajax请求可缓存
15.尽早刷新缓存 16.使用GET方式的Ajax请求
17.延迟加载内容 18.预加载组
19.减少DOM元素数量 20.跨域分离内容
21.减少iframe 22.不要404
23.减少Cookie大小 24.内容使用没有cookie的域
25.减少DOM访问次数 26.优化事件处理
27.选择<link>而不是@import 28.避免Filter
29.优化Images 30.优化CSS Sprites
31.不要在HTML中使用过大的Images 32.favicon.ico最小化以及可缓存
33.内容保持在25K以下 34.把内容打包成一个复合文档
35.避免空的Image src

缓存利用:缓存Ajax,使用CDN,使用外部js和css文件以便缓存,添加Expires头,服务端配置Etag,减少DNS查找等

2 使用内容发布网络(减少HTTP请求时间)

  HTTP请求时间另一个影响因素是你与网站web服务器所处的距离,显然距离越远,请求所需的时间也越久,通过CDN可以大大改善这一点。

  CDN是分布在多个不同地理位置的web服务器,用于更加有效的向用户发布内容。CDN最主要的功能是给终端用户存放静态文件,另外也提供下载、安全服务等功能。

1 文件合并(减少HTTP请求数量)

下面就是这些实践的详细说明。

请求数量:合并样式和脚本,使用css图片精灵,初始首屏之外的图片资源按需加载,静态资源延迟加载。

3 设置浏览器缓存(避免重复HTTP请求)

  • 使用Expire/Cache-control

  浏览器通过使用缓存可以避免每次都进行重复的请求,HTTP
1.0和HTTP1.1分别有不同的缓存实现方式,Expires(1.0)和Cache-control(1.1)。Web服务器通过expires告诉客户端在指定的时间内,都使用该文件的缓存副本,不再向服务端重复发出请求,例如:

    Expires: Thu, 01 Dec 2016 16:00:00 GMT (GMT格式)

  这个设置意味着截止到2016年12月1日,都可以使用该缓存副本,无需再发出请求。

  Expires这种通过截止日期的方式,存在一个限制:要求客户端和服务端时钟严格同步,而HTTP
1.1引入的Cache-Control通过指定一个以秒为单位的时间指定缓存日期,则不存该限制,例如:

    Cache-Control: max-age=31536000

  这个设置意味缓存时间为一年,推荐使用Cache-Control,但是在支持HTTP
1.1的情况下,另外要注意的一点:Cache-Control和Expire同时存在时,Cache-Control具有更高的优先级

  • 配置或移除ETag

  使用Expire/Cache-Control可以避免第二次访问时,使用本地缓存避免重复HTTP请求,提高网站速度。然而,在用户点击了浏览器刷新或者在expire已过期的情况下,仍然会向服务端发出HTTP
GET请求,而此时如果该文件并没有发生变化,服务端不会返回整个文件而是会返回304
Not Modified状态码。

  服务端判断该文件是否发生变化的依据有两个:Last-Modified(最新修改日期)和ETag(实体标签);

  ETag(Entity Tags)是在HTTP
1.1引入的,与Last-Modified同时存在时要有更高的优先级。服务端通过对比客户端发来的ETag(If-None-Match)和当前ETag,若相同返回304
Not Modifed,否则返回整个文件以及200 OK。

  ETag存在一个问题:当浏览器向一个服务器发送GET请求原始组件,之后又向另一台服务器请求该组件时,ETag是不匹配的,当然,如果你的网站寄宿在一台服务器上不存在这个问题,而现在很多网站使用多台服务器,ETag的存在就大大降低验证有效性的成功率。

  存在这个问题是时的解决办法是对ETag进行配置,移除服务器innode值只保留修改时间戳和大小作为ETag值,或者直接移除ETag,使用Last-Modified来验证文件有效性。

CSS Sprites

1.最小化HTTP请求

请求带宽:压缩文件,开启GZIP,

4 压缩组件(减小HTTP请求大小)

  通过对HTTP传输的文件进行压缩减小HTTP请求的大小,提高请求速度,GZIP是目前最常用也是最有效的压缩方式。

  然而,并非所有的资源文件都需要压缩,压缩的成本包括服务端需要花费CPU周期进行压缩,而客户端也需要对压缩文件进行解压缩,必须结合自己网站进行权衡。现在绝大多数网站都对其HTML文档进行压缩,部分网站选择对js、css进行压缩,几乎没有网站对图片、PDF等文件进行GZIP压缩,原因在于这些文件是已经被压缩过的,采用HTTP压缩已经被过压缩的东西并不能使它更小。事实上,添加标头,压缩字典,并校验响应体实际上使它变得更大,而且还浪费了CPU。

  如何对网站开启GZIP,需要在所使用的web服务器(IIS、Nginx、Apache等)中进行设置。

  利用css
sprites将网站用到的图片合并成一张图片,通过background-position、width、height控制背景图位置来使用某一个图标,这种方式可以将多个图片请求缩减为一次,生成css
sprites的工具也很多,grunt和gulp中都有相关的插件,CssGaga也不错。

80%的终端响应时间花费在前端,这其中的大部分时间又浪费在下载页面内容上,页面内容包括图片,样式表,脚本,flash等等。减少页面内容的数量,转而就减少了渲染页面需要的HTTP请求数量。这是优化页面的关键。

代码层面的优化

5 CSS文件放在首部

  将CSS文件放在首部和放在尾部,并不影响HTTP请求,因此从请求时间上来讲是一致的,然而从用户体验的角度,将CSS文件放在首部,会获得更好的用户体验。

  原因在于浏览器是从上到下依次解析html文档,将CSS文件置于头部,页面会首先对CSS文件发出请求,随后加载DOM树并对其进行渲染,页面会逐步呈现在用户面前。

  而与之相反,如果将CSS文件放置在尾部,页面加载完整DOM之后请求CSS文件,然后对整个DOM树渲染并呈现给用户,从用户的角度,在css文件没有请求完成之前,整个页面是出于白屏状态的,白屏是浏览器的一种行为,David Hyatt对其的解释是这样的

在样式树没有完全加载之前,渲染dom树就是一种浪费,因为在样式树加载完成之后会再次渲染,出现FOUC(无样式内容闪烁)问题。

  另外要注意的一点,使用link而不是@import引入css样式表,使用@import引入的样式即使写在首部,也会在文档最后加载。

合并js和css

减少页面内容的一种方法是简化页面设计。但是是否存在其它方法既可以用丰富的内容来构建页面,又可以获取快速的相应时间呢?下面的几种技术即可以减少HTTP请求数量,又可以支持丰富的页面设计。

用hash-table来优化查找

6 JS文件放在尾部

  HTTP请求是并行的,不同浏览器并行下载的数目也不一样(2、4、或者8个),并行下载提高了HTTP请求的速度。而将JS文件放在首部,不仅会阻塞后面文件的下载而且会阻塞页面的渲染。

  为什么会这样呢?原因有两个:

  • JS文件中可能存在document.write修改页面的内容,因此页面会在脚本执行完成之后才可使渲染。
  • 不同JS文件不管大小如何,可能存在依赖关系,因此必须按照顺序进行执行,因此在加载脚本的时候并行下载是禁止的。

  所以,最好的方式是讲js文件放置在尾部,等页面所有可视化组件加载完成之后再进行请求,提高用户体验。

博文作者:vicfeel
博文出处:
本文版权归作者和博客园共有,欢迎转载,但须保留此段声明,并给出原文链接,谢谢合作!
如果阅读了本文章,觉得有帮助,您可以为我的博文点击“推荐一下”!

  和精灵图一样,合并css和js文件也是减少HTTP请求很重要的方式,对css文件的合并目前来说没有什么争议,但是对于当前js模块化盛行,将所有js文件合并成一个文件,仿佛是一种倒退。正确的方式是遵守编译型语言的模式,保持js的模块化,在生成过程中只对初始请求用到的js文件生成目标文件。

合并文件是一种减少HTTP请求的方式,通过合并多个Js文件到一个Js文件,合并多个CSS文件到一个CSS文件的方式。文件合并是非常有挑战性的,因为每个页面的Script和CSS都不一样,但是如果在你的发布过程中有这个步骤确实可以响应时间。

少用全局变量

2 使用内容发布网络(减少HTTP请求时间)

CSS
Sprites是减少图片请求首选的方法。把你的背景图片合并到一张图片中,使用CSS的background-image和background-position属性来展示期望的图片部分。

用innerHTML代替DOM操作,减少DOM操作次数,优化javascript性能

  HTTP请求时间另一个影响因素是你与网站web服务器所处的距离,显然距离越远,请求所需的时间也越久,通过CDN可以大大改善这一点。

Image maps
合并多个图片到一个图片中。图片总大小是一样的,但是减少了一定数量的HTTP请求,加快了页面展示速度。只有当页面中的图片是连续的,Image
maps才有用,例如导航栏。定义Image
maps的坐标可能非常乏味并且也容易出错,为导航使用Image
maps也不是很方便,所以不推荐这种方式。

用setTimeout来避免页面失去响应

  CDN是分布在多个不同地理位置的web服务器,用于更加有效的向用户发布内容。CDN最主要的功能是给终端用户存放静态文件,另外也提供下载、安全服务等功能。

Inline images 使用data:URL
scheme把图片数据内嵌到当前页面中。这种方式会增加HTML文档的大小。把Inline
images写到(缓存的)样式文件中是减少HTTP请求的同时避免增加页面大小的一种方法。Inline
images还没有被所有的主流浏览器支持。

缓存DOM节点查找的结果

3
设置浏览器缓存(避免重复HTTP请求)

2.使用内容分发网络(Content Delivery Network,CDN)

避免使用CSS Expression

使用Expire/Cache-control

用户跟Web服务器的距离对相应时间是有影响的。从用户的角度来说,把你的内容部署在多个地理位置分散的服务器上有利于页面加载的更快。

避免全局查询

  浏览器通过使用缓存可以避免每次都进行重复的请求,HTTP
1.0和HTTP1.1分别有不同的缓存实现方式,Expires(1.0)和Cache-control(1.1)。Web服务器通过expires告诉客户端在指定的时间内,都使用该文件的缓存副本,不再向服务端重复发出请求,例如:

实施内容分发,首先不要尝试把Web应用重构成分布式架构。根据不同的应用,改变架构可能会有艰巨的任务,比如在不同的服务器之前同步session状态,复制数据库事务。这样的话应用架构这一步可能就会导致这种尝试延迟。

避免使用with(with会创建自己的作用域,会增加作用域链长度)

Expires: Thu, 01 Dec 2016 16:00:00 GMT (GMT格式)

记住80%到90%的终端响应时间花费在下载页面内容上面:iamges,css,js,flash等等,这是性能的黄金法则。而不是以重构web应用架构的艰巨任务开始,最好首先分散静态内容。这样不仅最大化的减少响应时间,而且利用内容分发网络可以变得更简单。

多个变量声明合并

  这个设置意味着截止到2016年12月1日,都可以使用该缓存副本,无需再发出请求。

内容分发网络(CDN)是分布在多个地点的web服务器的集合,可以有效的为用户分发内容。给用户分发内容的服务器是根据网络距离选择的,例如,选择拥有最少网络跳转或者最快相应速度的服务器。

避免图片和iFrame等的空Src。空Src会重新加载当前页面,影响速度和效率

  Expires这种通过截止日期的方式,存在一个限制:要求客户端和服务端时钟严格同步,而HTTP
1.1引入的Cache-Control通过指定一个以秒为单位的时间指定缓存日期,则不存该限制,例如:

3.增加Expires或者Cache-Control头

尽量避免在HTML标签中写Style属性

Cache-Control: max-age=31536000

这个规则有两个方面:

移动端性能优化

  这个设置意味缓存时间为一年,推荐使用Cache-Control,但是在支持HTTP
1.1的情况下,另外要注意的一点:Cache-Control和Expire同时存在时,Cache-Control具有更高的优先级。

对于静态资源:实行"永不过期"策略,通过在header中把Expires设置尽量长点
对于动态资源:使用一个适当的Cache-Control
header帮助浏览器响应条件请求

尽量使用css3动画,开启硬件加速。

配置或移除ETag

页面设计的越来越丰富,这就意味着页面中有更多的js,css,images,falsh等。首次访问页面的用户可能会有几个HTTP请求,但是通过使用Expires
header你可以使这些内容缓存。这样在后续页面访问时可以避免不必要的HTTP请求次数。Expires
header经常和图片一起用,但是js,css,flash都可以使用。

适当使用touch事件代替click事件。

  使用Expire/Cache-Control可以避免第二次访问时,使用本地缓存避免重复HTTP请求,提高网站速度。然而,在用户点击了浏览器刷新或者在expire已过期的情况下,仍然会向服务端发出HTTP
GET请求,而此时如果该文件并没有发生变化,服务端不会返回整个文件而是会返回304
Not Modified状态码。

浏览器(和代理)使用缓存减少HTTP请求数量和大小,加快页面加载速度。web服务器在HTTP响应中使用Expires
header告诉客户端内容可以被缓存多长时间。 下面就是一个Expires
header例子,告诉浏览器这个响应在2010-4-15之前不会过期Expires: Thu, 15 Apr 2010 20:00:00 GMT

避免使用css3渐变阴影效果。

  服务端判断该文件是否发生变化的依据有两个:Last-Modified(最新修改日期)和ETag(实体标签);

如果是Apache服务器,使用ExpiresDefault指令相对当前日期设置过期时间。下面就是设置请求10年过期的例子:ExpiresDefault "access plus 10 years"

可以用transform: translateZ(0)来开启硬件加速。

  ETag(Entity Tags)是在HTTP
1.1引入的,与Last-Modified同时存在时要有更高的优先级。服务端通过对比客户端发来的ETag(If-None-Match)和当前ETag,若相同返回304
Not Modifed,否则返回整个文件以及200 OK。

谨记,如果你使用了Expires
header,那么当你的文件内容有改变时,内容的文件名必须改变。这样内容才会更新。可以再文件名中加版本后,这样每次发布时文件名都会改变。

不滥用Float。Float在渲染时计算量比较大,尽量减少使用

  ETag存在一个问题:当浏览器向一个服务器发送GET请求原始组件,之后又向另一台服务器请求该组件时,ETag是不匹配的,当然,如果你的网站寄宿在一台服务器上不存在这个问题,而现在很多网站使用多台服务器,ETag的存在就大大降低验证有效性的成功率。

使用Expire
header只会影响已经访问过你站点的用户。如果用户第一次访问站点或者浏览器还没有缓存,它不会减少HTTP请求次数。因此这种性能改善的影响依赖于用户是不是经常访问带缓存的页面。通过使用Expires
header你可以让浏览器增加缓存内容数量,在后续页面访问时重用这些内容而不用在通过网络请求获取。

不滥用Web字体。Web字体需要下载,解析,重绘当前页面,尽量减少使用。

  存在这个问题是时的解决办法是对ETag进行配置,移除服务器innode值只保留修改时间戳和大小作为ETag值,或者直接移除ETag,使用Last-Modified来验证文件有效性。

4.Gzip压缩内容

合理使用requestAnimationFrame动画代替setTimeout

4 压缩组件(减小HTTP请求大小)

前端工程师做出的某些决定可以显著的减少HTTP请求以及响应的网络传输时间。终端用户的带宽速度,网络服务提供商,距网络交换节点的距离这些因素都不受开发团队的控制。但是仍有其它的因素会影响响应时间。比如,通过压缩HTTP响应来减少响应时间。

CSS中的属性(CSS3 transitions、CSS3 3D

  通过对HTTP传输的文件进行压缩减小HTTP请求的大小,提高请求速度,GZIP是目前最常用也是最有效的压缩方式。

从HTTP/1.1开始,web客户端就开始支持HTTP请求的 Accept-Encoding
header。Accept-Encoding: gzip, deflate

transforms、Opacity、Canvas、WebGL、Video)会触发GPU渲染,请合理使用。过渡使用会引发手机过耗电增加

  然而,并非所有的资源文件都需要压缩,压缩的成本包括服务端需要花费CPU周期进行压缩,而客户端也需要对压缩文件进行解压缩,必须结合自己网站进行权衡。现在绝大多数网站都对其HTML文档进行压缩,部分网站选择对js、css进行压缩,几乎没有网站对图片、PDF等文件进行GZIP压缩,原因在于这些文件是已经被压缩过的,采用HTTP压缩已经被过压缩的东西并不能使它更小。事实上,添加标头,压缩字典,并校验响应体实际上使它变得更大,而且还浪费了CPU。

如果web服务器在请求中看到这种header,它就会用客户端列出来的方法来压缩响应内容。web服务器通过响应中的Content-Encoding
header通知web客户端。Content-Encoding: gzip

PC端的在移动端同样适用。

  如何对网站开启GZIP,需要在所使用的web服务器(IIS、Nginx、Apache等)中进行设置。

Gzip是目前最流行以及最有效的压缩方法。其它你有可能看到的压缩格式是deflate,但是它不是很流行以及很有效。

什么是Etag?

5 CSS文件放在首部

Gzip通常可以把响应内容大小减少70%。目前浏览器当中接近90%的网络流量支持gzip。

当发送一个服务器请求时,浏览器首先会进行缓存过期判断。浏览器根据缓存过期时间判断缓存文件是否过期。

  将CSS文件放在首部和放在尾部,并不影响HTTP请求,因此从请求时间上来讲是一致的,然而从用户体验的角度,将CSS文件放在首部,会获得更好的用户体验。

对于浏览器以及代理来说还有一个已知问题就是浏览器期望的内容和它获取的压缩内容可能不匹配。幸运的是,这种情况随着旧版浏览器的使用率越来越低会越来越少。Apache模块通过添加适当的不同响应头来解决这个问题。

情景一:若没有过期,则不向服务器发送请求,直接使用缓存中的结果,此时我们在浏览器控制台中可以看到
200 OK(from cache) ,此时的情况就是完

转载本站文章请注明出处:vns威尼斯城官网登入 http://www.tiec-ccpittj.com/?p=1961

上一篇:

下一篇:

相关文章