美文网首页
高性能网站学习笔记

高性能网站学习笔记

作者: w_b91b | 来源:发表于2019-05-27 18:06 被阅读0次

    性能黄金法则:只有10%~20%的最终用户响应时间花在下载HTML文档上,其余的80%~90%时间花在下载页面中的所有组件上。

    一、减少http请求

    1.图片地图(雪碧图或者精灵图)

        将多个图片集中到一张图片上作为背景(background-image),然后调整背景的位置(background-position)确定所要选取的图片,这样可以减少图片加载的次数从而达到减少http请求的目的。

    2.内联图片

       通过使用data:URL模式在WEB页面中包含的图片不需要HTTP请求,但是需要注意只有IE浏览器不支持这种方式。

    3.合并javascript和stylesheets

        合并单独的文件(javascript或stylesheets)到一个文件中,从而减少http请求的次数同时也缩减用户响应的时间。(同时需要对当前页面不需要的javascript或stylesheets进行精简只保留需要的)

    二、使用内容发布网络

    内容发布网络(CDN)是一组分布在多个不同地理位置的WEB服务器,用以更加有效地向用户发布内容。

    应用WEB服务器离用户越近,一个http的请求响应速度时间会缩短,组件WEB服务器离用户越近多个http请求的时间也会缩短。

    三、添加Expires头

    为确保用户获取的是最新版本的组件,最有效的方法是修改其所有的链接。

    1.expires头

        WEB服务器使用expires来告诉WEB客户端它可以使用一个组件的当前副本,知道指定时间为止(即在这一日期或时间之后响应被认为是无效的,需要注意的是要求服务器和客户端的时钟严格同步)。

    2.Cache-Control

        Cache-Control使用max-age指令指定组件被缓存多长时间,以秒为单位,从请求开始的秒数少于max-age浏览器用缓存版本(Cache-Control只支持HTTP1.1的浏览器)

    3.mod_expires Apache模块

         想要同时使用expires头时能像Cache-Control的max-age那样以相对的方式设置日期可以通过Expires-Default指令来完成,时间可以以粘,月,日,小时,分钟,秒为单位来设定,同时向响应中发送Expires头和Cache-Control max-age头,实际的过期时间根据何时接到请求而变化。

    四、压缩组件

      压缩的文件类型有:HTML,javascript以及stylesheets,压缩成本为服务器会花费额外的CPU周期来完成压缩,客户端需要对压缩文件进行解压缩。需要判断收益是否大于开销,响应的大小,连接的宽带以及客户端与服务器之间的Internet距离。

      压缩通常能将响应的数据量减少将近70%。

    配置:Apache1.3使用mod_gzip,Apache2.X使用mod_deflate

    Apache1.3:

         mod_gzip_on   //启用 mod_gzip

         mod_gzip_item_include  // 基于文件类型、MIME类型、用户代理等定义哪些需要压缩哪些不需要压缩

         例子:mod_gzip_item_include     file     \.js$

                   mod_gzip_item_include     mime   ^application/x-javascript$

         gzip命令行工具提供一个选项用于控制压缩的程度,但mod_gzip中没有配置指令能够控制压缩级别。

        使用mod_gzip_can_negotiate和mod_gzip_update_static指令能完成保存压缩过的内容自动储存到磁盘,并在内容发生变化时更新压缩过的内容。

    Apache2.X:

         Add Output FilterByType DEELATE text/html  text/css application/x-javascript  // 压缩脚本和样式的基本配置

        mod_deflate包含一个控制压缩级别的指令  DeflateCompre-ssionLevel

       在Web服务器的响应头中添加Vary头告诉代理根据一个或多个请求头来改变缓存的响应(主要是应对浏览器是否支持gzip),服务器的vary响应头中包含Accept-Encoding。

    五、将stylesheets放到顶部

    六、将javaScript放在底部
    七、避免css表达式
    八、使用外部JavaScript和StyleSheets

        同样大小的内联的JavaScript和StyleSheets比外部文件有更快的响应速度,但是外部文件可以被缓存。

    九、减少DNS查找

         当客户端(浏览器和操作系统)的DNS缓存为空时,DNS查找的数量与WEB页面中的唯一主机名的数量相等,包含有页面的URL,图片,StyleSheets,Javascript,Flash对象等的主机名,减少唯一主机名的数量就可以减少DNS查找的数量。

    十、精简JavaScript

         精简是从代码中移除不必要的字符以减小其大小,进而改善加载时间的实践。

        混淆是可以应用在源代码上的另一种优化方式,和精简一样会移除注释空白,同时也会改写代码。  

    十一、避免重定向

         重定向用于将用户从一个URL重新路由到另一个URL。

         当WEB服务器向浏览器返回一个重定向时,响应中会拥有一个范围在3XX的状态码,表示用户代理必须执行进一步操作才能完成操作。

        状态码有:

                      300 Mulitiple Choices (基于Content-Type)

                     301 Moved Permanently

                    302 Moved Temporarily (亦称Found)

                   303 See Other (对302的说明)

                  304 Not Modified  (不是重定向,响应GET请求)

                 305 Use Proxy

                 306 (废弃,不再使用)

                307 Temporary Redirect (对302的说明)

         HTML文档的头中包含的meta refresh标签可以在其content属性所指定的秒数之后重定向用户

         如:<meta http-equiv="refresh" content="0; url=http://stevesouders.com/newuri">

         在URL的结尾必须出现斜线而没有出现时,重定向最为浪费和发生的很频繁,当缺少结尾斜线时发送重定向是很多WEB服务器的默认行为,包括Apache。注意当主机名后面缺少结尾斜线时不会发生重定向。

        如:访问http://astrology.yahoo.com/astrology,这个请求导致一个301响应,其中包含一个到http://astrology.yahoo.com/astrology/的重定向。

    十二、移除重复版本

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

    十三、配置或移除ETag

         ETag(实体标签)是WEB服务器和浏览器用于确认缓存部件的有效性的一种机制,用于检测浏览器缓存中的组件与原始服务器上的组件是否匹配(“实体”为“组件”的另一称呼),在HTTP1.1引入,是唯一标识了一个组件的一个特定版本的字符串且该字符串的格式必须用引号引起来。

       如果后台为服务器集群,ETag只能保存在一台服务器上不能共存,导致请求头不能验证通过的概率很大。

    十四、使AJAX可缓存

           AJAX的被动请求:为了将来使用而预先发起的。

          AJAX的主动请求:基于用户当前操作而发起的。

    相关文章

      网友评论

          本文标题:高性能网站学习笔记

          本文链接:https://www.haomeiwen.com/subject/xnhbzqtx.html