《高性能网站建设指南》之14个性能黄金法则

本文简单的总结了《高性能网站建设指南》这本书中的14条性能黄金法则，描述的十分的简单，如果想要深入了解这些规则的原理，就需要仔细去阅读这本书，本文仅提供了简单的记录和个人理解O(∩_∩)O~。

但是不得不说，这是一本每个从事前端开发工作者都应该必读的工具书，书中说得非常非常的好，页数也不多，可以反复的阅读深入理解，在本文底部也有提供电子版的pdf。

规则一、减少HTTP请求

HTTP是一种客户端/服务器协议，由请求和响应构成，浏览器向一个特定的URL发送HTTP请求，URL对应的宿主服务器发回HTTP响应。

每一次HTTP请求和响应都是需要时间的，所以减少HTTP请求可以非常有效的提升前端性能。

HTTP的请求方式：GET, POST, PUT, HEAD, DELETE，OPTION, TRACE

减少请求常用的方式：

（1）使用图片地图：将超链接关联到图片上，图片地图允许在一张图片上关联多个URL，目标URL取决于点击图片上的哪个部位。

图片地图类型：客户端图片地图：将用户的点击映射到一个操作，无需向后端应用程序发送请求。
服务端图片地图：将所有点击提交到同一个目标URL，向其传递用户单击的x，y坐标。

（2）使用CSS Sprites: 将多个图片合并到一个单独的图片当中，干净的标签，很少的图片，很短的响应时间。

（3）内联图片：通过使用data:url 模式，可以在web页面中包含图片但无需额外的http请求。

（4）合并脚本和样式表：适当的将多个文件合并。

规则二、使用内容发布网络（CDN）

内容发布网络是一组分布在多个不同地理位置的Web服务器，用于更加有效地向用户发布内容。

优点： 缩短响应时间，服务包括备份、扩展存储能力和进行缓存，还有助于缓和Web流量峰值压力。

缺点： 响应时间可能受到其他网站的影响，也无法控制组件服务器带来的麻烦。

规则三、添加Expires头——为组件添加长久的Expires头

浏览器（和代理）使用缓存来减少http请求，并减小http响应的大小，使web页面加载更快。

web服务器使用Expires头来告诉web客户端它可以使用一个组件的当前副本，直到指定的时间为止。

一个设置了长久的Expires头的组件将会被缓存，在后续的请求中，浏览器直接从硬盘上读取它，就可以避免了额外的http请求。

例如： Expires：Thu, 15 Apr 2020 20:00:00 GMT （告诉浏览器改响应的有效期持续到2020年4月15日20点为止）

如果对一个图片使用，那么浏览器在这个时间期限内使用的就是缓存得图片，这就将http请求的数量减少了一个。

缺点： Expires要去服务器和客户端的时钟严格一致，并且过期的时间需要经常检查。

解决： 使用Cache-Control ，带max-age的Cache-Control 可以消除Expires的限制，max-age指定了组件被缓存多久，如果从组件请求开始过去的秒数少于设置的max-age,浏览器就使用缓存得版本，这样也可以避免额外的http请求。

例如：

    Expires：Thu, 15 Apr 2020 20:00:00 GMT
    Cache-Control ：max-age = 315360000

Cache-Control具有优先权并且明确指出相对于请求时间所经过的秒数，Expires的时钟限制问题就被避免了。

适用范围： 包含不经常变化的组件，包括脚本、样式表、图片等，但是不应该包含html，因为html包含动态的内容。

规则四、压缩组件——压缩脚本和样式表

在HTTP请求的过程中，很容易的我们会想到通过减小HTTP响应的大小来减少响应时间，如果HTTP请求产生的响应包很小，传输时间就会减少，因为只需要将很小的包从服务器传到客户端，这一效果对速度较慢的宽带尤其明显。

而要减小响应包的大小，最简单的技术就是压缩。

web客户端通过http请求中的Accept-Encoding头来标识是否支持压缩：

Accept-Encoding: gzip, default

web服务器通过http响应中的Content-Enconding头来通知web客户端：

Content-Encoding: gzip

适用： 压缩脚本和样式表，图片和PDF不应该压缩，因为它们本来就被压缩过了，再压缩会浪费CPU资源，还可能增加文件大小。

缺点： 压缩需要成本，服务的会花额外的CPU周期来完成压缩，客户端也要对压缩文件进行解压。

规则五、将样式表放在顶部——使用Link标签将样式表放在文档HEAD中

将样式表放在文档底部会导致在浏览器中阻止内容逐步呈现，将样式表使用link标签将样式表放在文档的head中，就是避免这个问题。

规则六、将脚本放在底部——将脚本移到页面底部

要想深入理解这一规则，则需要了解浏览器的渲染过程和原理，这里暂不详细说明，只需要知道：脚本会阻塞并行下载，将脚本放到文件底部，就不会阻塞页面内容的呈现，页面中的可视化组件可以尽早下载。

规则七、避免CSS表达式

CSS表达式求值频繁，如：页面呈现、屏幕大小改变、页面滚动和鼠标移动时，都会重新求值，就导致其性能低下，所以要避免使用CSS表达式。

避免CSS表达式方法：（1）创建一次性表达式。 （2）使用事件处理器。

规则八、使用外部JavaScript和CSS——将JavaScript和Css放到外部文件中

这个规则还是和浏览器的渲染过程和原理有关。

通常情况下，使用内联的JavaScript和CSS速度会比外联的JavaScript和CSS快，因为内联方式不需要承担额外的HTTP开销，但是也有某些情况下，使用外联方式会比内联方式快，使用外部的JavaScript和CSS，浏览器可以缓存这些文件，并减小了HTML文档的大小，不会增加http请求的数量。
所以关键因素是HTML文档请求的数量、外部avaScript和CSS组件被缓存得频率。

是否使用外部的avaScript和CSS，基准有：（1）页面查看 （2）空缓存VS完整缓存 （3）组件重用

推荐主页用内联的avaScript和CSS，但又能为后续页面查看提供外部文件。

规则九、减少DNS检查 —— 通过使用Keep-Alive和较少的域名来减少DNS查找

Internat是通过IP地址来查找服务器的，由于IP地址很难记忆，通常使用包含主机名的URL来取代IP地址，但是当浏览器发送其他请求时，IP地址还是必需的。

DNS(Domain Name System)则是将主机名映射到IP地址上，当我们在浏览器输入地址时，连接到浏览器的DNS解析器就会返回服务器的IP地址，如果一个服务器被另一个具有不同IP地址的服务器替代了，DNS允许用同样的主机名来连接到新的服务器。

DNS是有开销的，通常浏览器查找一个给定的主机名的IP地址要话费20-120毫秒，并且在DNS查找完成之前，浏览器是不能从主机名那里下载任何东西的，而其响应时间依赖于DNS解析器、浏览器所承担的压力、与主机的距离和带宽速度，所以就可以通过减少页面花在DNS查找的时间来提高性能。

DNS查找可以被缓存起来以提高性能。很多浏览器拥有其自己的缓存，并且和操作系统的缓存相分离，只要浏览器子其缓存中保留了DNS记录，它就不会麻烦操作系统来请求这个记录，只有当浏览器缓存丢弃了记录时，它才会向操作系统询问地址，然后操作系统或者通过其缓存来响应这个请求，或将请求发送给一台远程服务器，同时就会发生潜在的速度降低。

减少唯一主机名的数量可以减少DNS查找的数量。

当客户端的DNS缓存为空（包括浏览器和操作系统），DNS查找的数量与Web页面中卫衣的主机名数量相等，包括页面URL、图片、脚本文件、样式表、Flash对象等的主机名。

减少唯一主机名的数量会潜在地减少页面中并行下载的数量。避免DNS查找降低了响应时间，但减少并行下载可能会增加响应时间，建议是当页面有大量的组件，可以分别将这些组件分别放到至少2个但是不要超过4个主机名下，较好的权衡减少DNS查找和允许高度并行下载这两者。

规则十、精简JavaScript——对JavaScript源代码进行精简

精简，是指从代码中移除不必要的字符以减少其大小，进而改善加载时间的实践。在代码被精简后，所有的注释以及不必要的空白字符（空格、换行和制表符）都将被移除。对于JavaScript而言，可以改善响应时间效率，因为需要下载的文件大小减小了。

混淆，是指可以应用在源代码上的另一种优化方式，和精简一样，也会移除注释和空白，同事它还会改写代码，作为改写的一部分，函数和变量的名字将被转换为更短的字符串，代码更精炼同事也更难阅读。通常这么做是为了增加对代码进行反向工程的难度，但是对性能也有帮助，因为混淆比精简更能减小代码的大小。

规则十一、避免重定向——寻找一种避免重定向的方法

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

重定向的类型： 当Web服务器向浏览器返回一个重定向时，响应中就会有一个范围在3xx的状态码，表示用户代理必须执行进一步操作才能完成请求。最常用的重定向状态码是301和302。

重定向的内容通常是针对HTML文档，但是也可能用在请求页面中的组件（图片、脚本等）。

重定向之所以会损伤性能，是因为重定向延迟了整个HTML文档的传输，使得页面变慢。

在用户和HTML文档直接插入重定向延迟了页面中的所有东西，因为在HTML文档到达之前，页面不会呈现出任何东西，也没有任何组件会被下载。

重定向的原因包括网站重新设计、跟踪流浪、记录广告点击和建立易于记忆的URL等。

规则十二、移除重复脚本——确保脚本只被包含一次

导致脚本重复的主要因素：团队的大小和脚本的数量。

重复脚本损伤性能的主要方式：不必要的HTTP请求和执行JavaScript所浪费的时间。

规则十三、配置ETag——配置或移除Etag

ETag（Entity Tag）,指实体标签，是Web服务器和浏览器用于确认缓存组件的有效性的一种机制。

回顾组件的缓存和确认：浏览器下载组件时，会将组件存储到缓存中，在后续的页面查看中，如果缓存的组件时新的，浏览器就会从磁盘上读取它，避免产生http请求，如果组件没有过去，那么它就是新的，这取决于Expires头的值。

如果缓存得组件过期了或者用户明确地重新加载了页面，浏览器在重用它之前必须首先检查它是否有效，这称作一个条件GET请求，而浏览器必须产生这个http请求来检查组件的有效性，只是比简单的下载所有已过期的组件的效率要高。

服务器在检查缓存的组件是否和原始服务器上的组件匹配的方式是：比较最新修改日期和比较实体标签。

原始服务器通过Last-Modified响应头来返回组件额最新修改日期。例如：

第一次请求时，浏览器会缓存组件以及它的最新修改日期，下一次请求时，浏览器会用If-Modify-Since头将最新修改日期传回到原始服务器进行比较，如果原始服务器上组件的最新修改日期与浏览器传回值匹配，就会返回一个304响应，而不会传Content-Length中值的字节数，如下。

ETag则提供了另一种方式，用于检测浏览器缓存中的组件与原始服务器上的组件是否匹配。ETag在HTTP1.1中引入，标识了一个组件的一个特定版本的字符串，唯一的格式是约束该字符串必须用引号引起来，例如：

接着，如果浏览必须验证一个组件，会使用If-None-Match头将Etag传回原始服务器，如果Etag是匹配的，就是返回3.04状态码，使响应减少Content-Length中值的字节数，如下。

ETag的加入为验证实体提供了比最新修改日期更为灵活的机制，例如：如果实体依据User-Agent或Accept-Language头而改变，实体的状态可以反映在Etag中。

ETag带来的问题有：通常使用组件的某些属性来构造它，这些属性对于特定的、寄宿了网站的服务器来说是唯一的。当浏览器从一台服务器上获取了原始组件，之后，再向另一台服务器发起条件GET请求时，ETag是不会匹配的。还有其他问题暂不详细描述了。

至于用不用ETag，简单了说，如果你的组件必须通过最新修改日期之外的一些东西进行验证，ETag是一种强大的方法，如果无须自定义ETag，最好简单地将其移除。

规则十四、使用Ajax可缓存——确保Ajax请求遵守性能指导，尤其应具有长久的Expires头

Ajax表示异步的JavaScript和XML（Asynchronous JavaScript and XML），Ajax不是一个单独的、需要许可的技术，而是一组技术，包括JavaScript、css、DOM和异步数据获取，其目的是为了突破Web本质的开始-停止交互方式。

Ajax一个明显的优点就是向用户提供即时反馈，因为它异步的从后端Web服务器请求信息，但是也并不是说使用Ajax就保证用户不需要等待，用户是否需要等待的关键硬是还在于Ajax是主动的请求还是被动的请求。
被动请求（Passive Request）是为了将来使用而预先发起的。
主动请求（Active Request）是基于用户当前的操作发起的。
所以说，优化Ajax请求也能改善性能。

针对改善主动Aajx请求最重要的方式是使响应可缓存。

写在最后

本文是零零碎碎的说了一下关于性能优化的14条法则，很简单也不全面，旨在让读者知道有这14条规则，如果有理解不对的地方欢迎指出，总结不到位的地方也请见谅，要想详细的了解原原理，还是非常强烈建议读者可以自己去阅读原书籍。

《高性能网站建设指南》PDF下载地址： 链接：https://pan.baidu.com/s/1xFukbbyv3INbZpDdjpPgjw 提取码：b152