提升网站页面速度的14条最佳实践

时间: 2019-05-21阅读: 224标签: 优化

《高性能网站建设指南》一书共列举了14条提升网站速度的方法。性能黄金法则:只有10%-20%的最终用户响应时间花在了下载HTML文档上,其余80%-90%时间花在了下载页面中的所有组件上。  


一、减少http请求

1.图片地图
2.CSS Sprites
3.内联图片 
4.合并脚本和样式表


二、使用内容发布网络

内容发布网络(CDN)是一组分布在不同地理位置的web服务器,用于更加有效地像用户发布内容。即利用就近原则,响应发送给用户需要的数据,进而缩短响应时间,来提高网站性能。


三、添加Expires头

浏览器(和代理)使用缓存来减少HTTP请求的数量,并减少HTTP响应的大小,使web页面加载得更快。web服务器使用Expires头来告诉web客户端它可以使用一个组件的当前副本。

注意:Expires头使用的是一个特定的时间,它要求客户端与服务器的时钟严格同步,一旦两个时间统一,Expires头的时间将没有意义。

为了解决Expires头的限制,HTTP1.1 引入了Cache-Control使用max-age指令指定组件缓存多久。它以秒为单位定义更新窗。如果从组件请求开始过去的秒数小于max-age,浏览器就可以使用缓存的版本。

注意: 
 1.在小于HTTP1.1版本之前仍需要设置Expires头,为了做更好的兼容,最好同时使用HTTP1.1和max-age,在支持max-age的版本中,如果两者同时存在max-age会重写Expires头。 
 2.利用Apache模块mod_expires可以使Expires头能够像max-age那样以相对的方式设置日期。通过Expires_Default指令来实现。时间可以用年/月/周/日/时/分/秒为单位来设置。


四、压缩组件

1.从HTTP1.1开始,web客户端可以通过HTTP请求中的Accept-Encoding头来识别对压缩的支持。
Accept-Encoding:gzip,deflate;
2.配置
a.Apache1.3的gzip压缩由mod_gzip模块提供
b.Apache2.x中压缩通过mod_deflate模块来完成。
3.代理缓存
在Web服务器的响应中添加Vary头。Web服务器可以告诉代理根据一个或者多个请求头来改变缓存的响应。
Vary:Accept-Encoding
这种情况下代理服务器会缓存每个响应的两个版本——Accept-Encoding为gzip时的压缩内容和没指定Accept-Encoding时的非压缩内容。


五、将样式表放在顶部

由于浏览器总是在样式表加载并解析完之后才会绘制页面内容,所以把样式表放在底部才会出现白屏或者无样式内容的闪烁问题。


六、将脚本放在页面底部

浏览器总是从上到下执行页面内容,如果将脚本放置在页面顶部,则在加载脚本的这段时间内,页面的内容呈现将被阻塞!


七、避免css表达式

css表达式也会影响页面的加载时间。如果必须要在页面加载记载的时候对css样式进行重置,可以考虑使用时间处理器来代替css表达式。


八、使用外部Jacascript和css

1.如果需要呈现给用户的页面可以实现完整缓存,那么使用外部Jacascript和css会提高网站性能。
2.在使用使用外部Jacascript和css时,可以设置页面加载完成后下载,这样可保证页面也首屏效果。


九、减少DNS查询

1.Internet是通过IP地址来查找服务器的。由于IP地址很难记忆,通常使用包含主机名的URL来取代它,但是浏览器发送请求时,IP地址仍然是必需的。这就是Domain Name System(DNS)所处的角色,DNS将主机名映射到IP地址上。当你输入一个网址时,链接到服务器的DNS解析器会返回服务器的IP地址。
2.DNS开销:通常浏览器查找的一个给定的主机名的IP地址要花费20-120毫秒,在完成查找之前,浏览器不能从主机那里下载任何的东西。
3.使用Keep-Alive和较少的域名来减少DNS查询


十、精简JavaScript

精简是从代码中移除不必要的字符,比如空白符(空格、换行、制表符)等以减少文件大小,进而改善加载时间。


十一、避免重定向

1.重定向用于将用户从一个url重新路由到另一个url。重定向有很多种:301和302是常见的两种
2.当Web服务器向浏览器返回一个重定向时,响应中就会拥有一个范围在3xx的状态码(注意:"304 Not Modeified"并不是真的重定向-他是用来响应GET请求,避免下载已经存在于浏览器缓存中的数据。)。
3.重定向的损伤:在重定向完毕并且HTML文档下载完成之前,没有任何东西显示给用户。


十二、移除重复脚本

重复性脚本损伤性能的方式有两种:不必要的HTTP请求和执行JavsScript所浪费的时间。


十三、配置或移除ETag

1.Etag是什么?
实体标签(Entity Tag ETag)是Web服务器和浏览器用于确认缓存组件的有效性的一种机制。
2.浏览器的缓存与确认?
步骤一:Expires头:浏览器在下载组件时,会将它存储到缓存中。再次请求改组件时,会确认改组件是否过期来决定是否重新请求改组件,而这个过期时间是由Expires头的值来决定。当请求一个组件时,服务器会根据其选项在响应中返回一个Expires头。
步骤二:条件GET请求:如果缓存的组件过期了(或者用户明确地重新记载了页面),浏览器在重用它之前必须首先检查它是否仍然有效,这称作条件GET请求。如果组件有效,原始服务器会返回一个"304 Not Modified"状态码。

服务器在检测缓存的组件是否有效时有两种方式: 1.比较最新修改日期 2.比较实体标签  

2.1 最新修改时间:

原始服务器通过Last-Modified响应头来返回组件的最新修改时间,它要求服务器端和客户端时间完全统一的情况下才有意思。  

2.1 实体标签:

 ETag提供了另一种方式,用于检测浏览器缓存中的组件与原始服务器上的组件是否匹配。ETag在HTTP1.1中引用。ETag是唯一标识了一个组件的一个特定版本的字符串。唯一的格式约束是该字符串必须用引号引起来。原始服务器使用ETag来响应指定组件的Etag。 Etag为验证实体提供了比修改最新日期更为灵活的机制,例如,如果实体依据User-Agent或者Accept-Language头而改变,实体的状态可以反映在ETag中。此后,如果浏览器必须验证一个组件,它会使用If-None-Match头将ETag传回原始服务器。如果ETag是匹配的,就会返回304状态吗。  

3.ETag带来的问题
ETag的问题在于,通常使用的组件的某些属性来构造它,这些属性对于特定的,寄宿了网站的服务器来说是唯一的。当浏览器从一台服务器获取了原始组件,之后,又向另外一台不同的服务器发起条件GET请求时,ETag是不会匹配的——对于使用服务器集群来处理请求的网站来说,这是很常见的一种情况。默认情况下,对于拥有多台的服务器网站,APache和IIS中嵌入的数据都会大大地降低有效性验证的成功率。

3.1 Apache1.3和2.X的ETag格式是inode-size-timestamp,即使文件系统的所有信息都是一致的,但是不同服务器上的inode仍然是不同的。

3.2 IIS5.0和6.0在ETag上有着类似的问题。IIS上ETag的格式是Fletimestamp:ChangNumber。ChangNumber适用于跟踪IIS配置变化的计数器。对于网站背后的服务器来说,ChangNumber不大相同。
3.3 最后结果,对于完全相同的组件,从一台服务器到另一台Apache和 IIS产生的ETag是不同的,如果你使用了服务器集群,使用ETag会造成组件不必要的重复加载并影响服务器的性能、增加宽带的开销。

4.ETag用还是不用?
如果你使用的是服务器集群,且使用默认的ETag配置,你的用户将面对缓慢的页面,你的服务器会有很高的负载,你会消耗大量的带宽,而且代理也不能有效地缓存你的内容。

为了使用ETag的灵活性的验证能力而又要消除其所带来的问题,有一种选择是对ETag进行自定的配置。比如可以使用一段根据浏览器是否为Internet Explorer而变化的脚本。如果使用PHP来生成脚本,你可以通过设置ETag头来反映浏览器的状态。 如果你的组件必须通过最新修改日期之外的一些东西来进行验证,则自定义ETag是一种强大的方法。如果你不能自定义ETag,建议你移除ETag。 

 

十四、使用Ajax可缓存

公所周知,主动的Ajax请求时异步的,用户可能仍然需要等待响应。不过用户不必忍受整个页面的重新加载了,而且用户在等待时,UI仍然可以响应。
由于Ajax毕竟是一个请求,所有为更好的用户体验,我们仍需结合上面其他的性能优化条例来使用,比如缓存等。


吐血推荐

1.站长广告联盟: 整理了目前主流的广告联盟平台,如果你有流量,可以作为参考选择适合你的平台点击进入...

2.休闲娱乐: 直播/交友    优惠券领取   网页游戏   H5游戏

链接: http://www.fly63.com/article/detial/3387

CSS 性能优化还有哪些方法?

CSS 必须通过一个相对复杂的管道,就像 HTML 和 JavaScript一样,浏览器必须从服务器下载文件,然后进行解析并将其应用于DOM。由于优化程度极高,这个过程通常非常快——对于不基于框架的小型 web 项目,CSS通常只占总资源消耗的一小部分

webpack常用构建优化总览

读了《深入浅出webpack》总结一下常用的webpack的构建优化策略,可通过以下手段来提升项目构建时的速度,理论上我们项目的第三方依赖均应在自己的工程的node_modules下,所以我们可以设置查找目录

如何对 React 函数式组件进行优化?

本文只介绍函数式组件特有的性能优化方式,类组件和函数式组件都有的不介绍,比如 key 的使用。另外本文不详细的介绍 API 的使用,后面也许会写,其实想用好 hooks 还是蛮难的。

网站性能优化实战

读取缓存→DNS查询→TCP链接→发起请求→接收响应→处理HTML元素→加载完成。CSS属性读写分离:浏览器每次对元素样式进行读操作时,都必须进行一次重新渲染(重排 + 重绘)

如何让你的 JS 写得更漂亮?

网上有不少关于JS编写优化建议,这里我根据自己的经验提出一些比较有用的意见。1. 按强类型风格写代码,JS是弱类型的,但是写代码的时候不能太随意,写得太随意也体现了编码风格不好。下面分点说明:

首页白屏优化实践

自从前端三大框架React、Vue、Angular面世以来,前端开发逐渐趋向规范化、统一化,大多数时候新建前端项目,首先想到使用的技术一定是三大框架之一,框架给前端开发带来了极大的便利和规范,但是由于这三大框架都是JS驱动

网站搜索引擎优化,值得关注的4个策略有哪些?

在做网站搜索引擎优化的过程中,对于企业站而言,由于SEO人员都是处于执行层面,甚至即使你有权制定SEO优化方案,偶尔也是草草就上手操作。当你运营到一定阶段的时候

webpack优化分享

Webpack 就像一条生产线,要经过一系列处理流程后才能将源文件转换成输出结果。 这条生产线上的每个处理流程的职责都是单一的,多个流程之间有存在依赖关系,只有完成当前处理后才能交给下一个流程去处理

如何提升网站访问速度?

但网站打开速度变的不可科学的时候,怎么检测打开速度是多少?检测网站是否被劫持、域名是否被墙、DNS污染检测、网站打开速度检测等信息。如果你是网站使用者,你可以通过升级宽带、光纤、升级CPU内存

React 中 的 9 种优化技术

谷歌的数据表明,一个有 10 条数据 0.4 秒可以加载完的页面,在变成 30 条数据加载时间为 0.9 秒后,流量和广告收入减少了 20%。当谷歌地图的首页文件大小从 100kb 减少到 70~80kb 时,流量在第一周涨了 10%,接下来的三周涨了 25%

fly63.com版权所有,内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权,请与小编联系!情况属实本人将予以删除!

广告赞助文章投稿关于web前端网站点搜索站长推荐网站地图站长QQ:522607023

小程序专栏: 土味情话心理测试脑筋急转弯幽默笑话段子句子语录成语大全