前端性能优化十四个规则：
HTTP是一种客户端/服务器协议，由请求和响应构成。浏览器向一个特定的URL发送HTTP请求，URL对应的宿主服务器发回HTTP响应。该协议使用简单的纯文本格式。请求的类型有GET、POST、HEAD、PUT、DELETE、OPTIONS和TRACE。

前端性能优化十四个规则：

1. 减少HTTP请求。

a. 至少80%的最终用户响应时间花在了页面中的组件（图片、脚本、样式表、Flash等）上。

b. 改善响应时间的最简单途径就是减少组件的数量，并由此减少HTTP请求的数量。这些技术包括图片地图、CSS Sprites、内联图片和脚本、样式表的合并。运用这些技术在示例页面上估计响应时间减少到50%左右。

c. 图片地图：

优点：允许在一个图片上关联多个URL，目标URL的选择取决于用户点击了图片上的那个位置。这样既能减少HTTP请求，又无需改变页面外观感受。

缺点：在定义图片地图上的区域坐标时，如果采取手工的方式则很难完成且容易出错，而且除了矩形之外几乎无法定义其他形状。通过DHTML穿件的图片地图则在IE中无法工作。

类型：图片地图有两种类型。服务器端图片地图将所有点击提交到同一个目标URL，向其传递用户单击的x、y坐标。Web应用程序将该x、y坐标映射为适当的操作。客户端图片地图将用户的点击映射到一个操作，而无需向后端应用程序发送请求。映射通过HTML的MAP标签实现。

d. CSS Sprites

e. 内连图片

f. 合并脚本和样式表

2. 使用内容发布网络（CDN）

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

优点：缩短响应时间、备份、扩展存储能力和进行缓存、缓和Web流量峰值压力。CDN用于发布静态内容，如图片、脚本、样式表和Flash，提供动态HTML页面会引入特殊的存储需求——数据库连接、状态管理、验证、硬件和OS优化等，这些操作比较复杂。另一方面，静态文件更容易存储并具有较少的依赖性。

缺点：响应时间可能会受到其他网站的影响，以及无法直接控制组件服务器所带来的特殊麻烦，且严重依赖CDN的服务性能。

无论如何也不要使用HTTP重定向来将用户指向到本地服务器，这会使Web页面反应速度变慢。

3. 添加Expires头

a. Expires头

浏览器（和代理）使用缓存来减少HTTP请求的数量，并减少HTTP响应的大小，使Web页面加载得更快。Web服务器使用Expires头来告诉Web客户端它可以使用一个组件的当前副本，直到指定的时间为止。它在HTTP响应中发送。

缺点：因为Expires头使用一个特定的时间，它要求服务器和客户端的时钟严格同步。另外，过期日期需要经常检查，并且一旦这一天到来，还需要在服务器配置中提供一个新的日期。

图片可缓存30天以上。

样式表可缓存30天以上。

脚本可缓存30天以上。

b. Max-Age和mod_expires

HTTP1.1引入了Cache-Control头来克服Expires头的限制。Cache-Control使用max-age指令指定组件被缓存多久。它以秒为单位定义了一个更新窗。如果从组件被请求开始过去的秒数少于max-age，浏览器就使用缓存的版本，这就避免了额外的HTTP请求。如果同时出现Expires头和Cache-Control max-age，max-age指令将重写Exipres头。

mod_expires Apache模块，能够让Expires头像max-age那样以相对的方式设置日期。这通过ExpiresDefault指令来完成。

c. 空缓存VS完整缓存

指的是与页面相关的浏览器缓存的状态。

d. 修改文件名

为了确保用户能够获取组件的最新版本，需要在所有HTML页面中修改组件的文件名。嵌入版本号即可。

4. 压缩组件

a. 通过减小HTTP响应的大小来减少响应时间。

b. 从HTTP1.1开始，Web客户端可以通过HTTP请求中的Accept-Encoding头来标识对压缩的支持。 Accept-Encoding:gzip,deflate。 如果Web服务器看到请求中有这个头，就会使用客户端列出来的方法中的一种来压缩响应。Web服务器通过响应中的Content-Encoding头来通知Web客户端，如：Content-Encoding: gzip。

c. 网站会压缩其HTML文档、脚本和样式表等。图片和PDF不应该压缩，因为他们本来就已经被压缩了。试图对它们进行压缩只会浪费CPU资源，还有可能会增加文件大小。

d. 压缩的成本有，服务器端会花费额外的CPU周期来完成压缩，客户端要对压缩文件进行解压缩。要检测收益是否大于开销，需要考虑响应的大小、连接的带宽和客户端与服务器之间的Internet距离。

e. 代理缓存。在Web服务器的相应中添加Vary头。Web服务器可以告诉代理根据一个或多个请求头来改变缓存的响应。由于压缩的决定是基于Accept-Encoding请求头的，因此需要在服务器的Vary响应头中包含Accept-Encoding。Vary：Accept-Encoding。

f. 如果拥有大量的、多变的用户群，能够应付较高的带宽开销，并且享有高质量的名声，请压缩内容并使用Cache-Control:Private。这禁用了代理，但避免了边缘情形缺陷。

5. 将样式表放在顶部

a. 尽量多使用link标签，少使用@import标签。因为@import标签规则必须放在其他规则之前，也有可能会导致白屏现象，即使把@import规则放在文档的HEAD标签中也是如此。

6. 将脚本放在底部

a. 在下载脚本时并行下载实际上是被禁用的——即使使用了不同的主机名，浏览器也不会启动其他的下载。其中一个原因是，脚本可能使用document.write来修改页面内容，因此浏览器会等待，以确保页面能够恰当地布局。另外一个原因是，为了保证脚本能够按照正确的顺序执行。

b. 脚本对Web页面的影响：脚本会阻塞对其后面内容的呈现，以及脚本会阻塞对其后面组件的下载。

//以下规则用于处理页面加载之后的性能问题。

7. 避免CSS表达式

//min-width的兼容性

width:expression(document.body.clientWidth<600?”600px”:”auto”); //IE

min-width:600px; //大部分浏览器

存在问题：更新表达式

a. 一次性表达式，在这一次执行中重写它自身。

b. 事件处理器。

8. 使用外部JavaScript和CSS

纯粹而言，内联快一些。但现实中还是使用外部文件会产生较快的页面。因为JavaScript和CSS文件有机会被浏览器缓存起来。HTML文档通常不会被配置为可以缓存。另外，由于外联，HTML文档减小，HTTP请求的数量也不会增加。

9. 减少DNS查找

a. DNS缓存和TTL(Time-to-live)

DNS查找可以被缓存起来提高性能。服务器可以表明记录可以被缓存多久。查找返回的DNS记录包含了一个存活时间TTL值。该值告诉客户端可以对该记录缓存多久。尽管操作系统缓存会考虑TTL值，但浏览器通常忽略该值，并设置它自己的时间限制。

10. 精简JavaScript

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

b. 压缩，并建议使用gzip来完成压缩。

c. 精简CSS。通常CSS中的注释和空白比JavaScript少。优化CSS——合并相同的类、移除不使用的类等。

11. 避免重定向

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

b. 304并不是真的重定向——它用来响应条件GET请求，避免下载已经存在于浏览器缓存中的数据。

c. 状态码301和302是使用得最多的。状态码303和307是在HTTP1.1规范中添加的。但是几乎没有人用303和307，绝大多数网站仍然在沿用302.301响应的示例如下：

HTTP 1.1 301 Moved Permanently

Location: http://stevesouders.com/newuri

Content-Type: text/html

浏览器会自动将用户带到Location字段所给出的URL，响应体通常是空的。不管叫什么名字，301和302响应在实际中都不会被缓存，除非有附加的头——如Expires或Cache-Control等要求它这么做。

d. 重定向延迟了整个HTML文档的传输，在HTML文档到达之前，页面中不会呈现出任何东西，也没人有任何组件会被下载。在用户和HTML文档之间插入重定向延迟了页面中的所有东西。

e. 当缺少结尾的斜线时发送重定向——它允许自动索引，自动转到默认的index.html上，并且能够获得与当前目录相关的URL。

12. 移除重复脚本

确保脚本只被包含一次。

13. 配置ETag

a. ETag(Entity Tag)实体标签是Web服务器和浏览器用于确认缓存组件的有效性的一种机制。

b. ETag是HTTP1.1中引入的。ETag是唯一标识了一个组件的一个特定版本的字符串。唯一的格式约束是该字符串必须用引号引起来。

c. ETag的加入为验证实体提供了比最新修改日期更为灵活的机制。

d. 例如，如果实体依据User-Agent或Accpt-Language头而改变，实体的状态可以反映到ETag中。此后，如果浏览器必须验证一个组件，它会使用If-None-Match头将ETag传回原始服务器。如果ETag是匹配的，就会返回304状态码，使响应减小了1195字节。

14. 使Ajax可缓存

确保Ajax请求遵守性能知道，尤其应具有长久的Expires头。

————————————————
原文链接：https://blog.csdn.net/lysunnyrain/article/details/51068508/