前端性能优化的14条法则_html link style 性能-CSDN博客

本文链接：https://blog.csdn.net/real_bird/article/details/54922789

文章是高性能网站建设指南（Steve Souders）的总结。

性能黄金法则：

只有10%~20%的最终用户响应时间花在了下载HTML文档上。其余的80%~90%时间花在了下载页面中的所有组件上。

在这之后是14条提升性能的法则。这些规则按照常规的优先级顺序列出。特定的规则，适用性可能不同。所以不同的网站需要合理的选取规则。

规则1—-减少HTTP请求

图片地图

图片地图允许你在一张图片上关联多个URL。想必多张图片（多个URL）而言，一张图片只有一个HTTP请求。

图片地图实现方法有两种，一种是服务器端图片地图，一种是客户端图片地图。

服务器端图片地图是将所有点击提交到同一个URL，向其传递x、y坐标。web应用程序将坐标映射为适当的操作。
客户端图片地图是通过map标签。下面是w3c的示例：

<img src="planets.jpg" border="0" usemap="#planetmap" alt="Planets" />

<map name="planetmap" id="planetmap">
  <area shape="circle" coords="180,139,14" href ="venus.html" alt="Venus" />
  <area shape="circle" coords="129,161,10" href ="mercur.html" alt="Mercury" />
  <area shape="rect" coords="0,0,110,260" href ="sun.html" alt="Sun" />
</map>

客户端图片地图灵敏度太差，只适合矩形，而且坐标易出错。（我是没用过）

CSS Sprites（CSS雪碧图）

一句话概括就是将很多张小图片通过ps放到一张图片上。这样通过设置背景位置（background-position）在不同位置显示合适的图片。

同样，使用雪碧图也可以减少大量HTTP请求。

另一个令人惊奇的优点是，它还降低了下载量。很多人会认为合并后的图片比分离的图片的总和要大，因为合并后的图片中包含有附加的空白区域。实际上，合并后的图片会比分离后的图片的总和要小，这是因为它降低了图片自身的开销（颜色表、格式信息，等等）。（对图片要求不高，我使用iconfont）

内联图片

通过使用data:URL模式可以在web页面中包含图片但无需任何额外的HTTP请求。

data:<mediatype>[;base64],<data>

如：

background-image: url("data:image/gif;base64,R0lGODlhAwADAIAAAP///8zMzCH5BAAAAAAALAAAAAADAAMAAAIEBHIJBQA7");

合并脚本和样式表

多个脚本合并为一个脚本
多个样式表合为一个样式表

对于模块化代码，合理选择组合是有必要的。

规则2—-使用内容分发网络（CDN）

如果应用程序Web服务器离用户更近，则一个HTTP请求的相应时间将会被缩短。
另一方面，如果组件web服务器离用户更近，则多个HTTP请求的相应时间将会被缩短。

优点

内容分发网络（CDN）是一组分布在多个不同地理位置的web服务器，用于更加有效地向用户发布内容。通常只在讨论性能问题时会提到它的性能，但它还节省成本。
除了缩短响应时间以外，CDN还可以带来其他优势。他们的服务包括备份、扩展存储能力和进行缓存。CDN还有助于缓和web流量峰值的压力，如在获取天气或股市新闻、浏览流行的体育或娱乐事件时。

缺点

依赖CDN的一个缺点是你的响应时间可能会受到其他网站—-设置可能是你的竞争对手的影响。CDN服务提供商在其所有客户之间共享其web服务器组。
无法直接控制组件服务器。比如修改HTTP响应头必须通过服务提供商来完成，而不是由你的工作团队完成。
如果CDN性能下降，你的工作质量也会随之下降（不过你可以使用多个CDN服务提供商）。

规则3—-添加Expires头

今天的web页面都包含了大量的组件，并且数量在不断增长。页面的初访者会进行很多HTTP请求，但通过使用一个长久的Expires头，使这些组件可以被缓存。这会在后续的页面浏览中减少不必要的HTTP请求。长久的Expires头最常用与图片，但应该将其用在所有组件上，包括脚本、样式表的Flash。

Expires头

如下响应头（百度首页的某张图片）：
Response Headers

Accept-Ranges:bytes
Age:792098
Cache-Control:max-age=2592000
Connection:keep-alive
Content-Length:0
Content-Type:image/png
Date:Mon, 06 Feb 2017 06:36:17 GMT
ETag:"5881c862-664"
Expires:Mon, 27 Feb 2017 02:34:38 GMT
Last-Modified:Fri, 20 Jan 2017 08: