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
