web前端优化技术：让你的页面打开速度飞快

页面的加载速度直接关联着用户的体验。研究表明，用户最满意的打开网页时间是 2-5秒，如果等待超过 10秒，99% 的用户会关闭这个网页。那么如何优化网页的加载速度呢，下面将从几个方面讲解。

1. 减少 HTTP 请求

合并脚本和样式表

将多个样式表或脚本文件合并到一个文件中，可以减少 HTTP 请求的数量从而缩短响应时间。不过合并所有的样式文件或者脚本文件可能会导致在一个页面加载时加载了多于自己所需要的样式或者脚本，对于只访问该网站一个页面的人来说反而增加了下载量，所以在合并的时候要权衡利弊。

字体图标

在可以大量使用字体图标的地方我们可以尽可能使用字体图标，字体图标可以减少很多图片的使用，从而减少 HTTP 请求，字体图标还可以通过 CSS 来设置颜色、大小等样式。

图片地图

假设导航栏上有五幅图片，点击每张图片都会进入一个链接，这样五张导航的图片在加载时会产生 5个 HTTP 请求。然而，使用一个图片地图可以提高效率，这样就只需要一个 HTTP 请求。

服务器端图片地图：将所有点击提交到同一个 url，同时提交用户点击的 x、y 坐标，服务器端根据坐标映射相应

客户端图片地图：直接将点击映射到操作

CSS Sprites

通过将多个图片融合到一副图里面，然后通过 CSS 的一些技术布局到网页上。特别是图片特别多的网站，如果能用 CSS Sprites 降低图片数量，带来的将是速度的提示。

大家可能认为合并后的图片会比分离图片的总和要大，因为还有可能会附加空白区域。实际上，合并后的图片会比分离的图片总和要小，因为它降低了图片自身的开销，譬如颜色表、格式信息等。

2. 添加 Expires 头

页面初次访问者会进行很多 HTTP 请求，但是通过使用一个长久的 Expires 头，可以使这些组件被缓存，下次访问的时候，就可以减少不必要的 HTTP 请求，从而提高加载速度。

Expires 缺点： 它要求服务器和客户端时钟严格同步，过期日期需要经常检查

HTTP1.1 中引入了 Cache-Control 来克服 Expires 头的限制，使用 max-age 指定组件被缓存多久。Cache-Control:max-age=1230000若同时制定 Cache-Control 和 Expires，则 max-age 将覆盖 Expires 头

3. 使用 CDN

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

CDN（内容发布网络）是一组分布在多个不同地理位置的 Web 服务器，用于更加有效地向用户发布内容。在优化性能时，向特定用户发布内容的服务器的选择基于对网络拥堵的测量。例如，CDN 可能选择网络阶跃数最小的服务器，或者具有最短响应时间的服务器。

CDN 还可以进行数据备份、扩展存储能力，进行缓存，同时有助于缓和 Web 流量峰值压力。

CDN 缺点：响应时间可能会受到其他网站流量的影响。CDN 服务提供商在其所有客户之间共享 Web 服务器组；如果 CDN 服务质量下降了，那么你的工作质量也将下降；无法直接控制组件服务器。

4. 将样式表放在头部

将样式表放在头部对于实际页面加载的时间并不能造成太大影响，但是这会减少页面首屏出现的时间，使页面内容逐步呈现，改善用户体验，防止“白屏”。

将样式表放在文档底部会阻止浏览器中的内容逐步出现。为了避免当样式变化时重绘页面元素，浏览器会阻塞内容逐步呈现，造成“白屏”。这源自浏览器的行为：如果样式表仍在加载，构建呈现树就是一种浪费，因为所有样式表加载解析完毕之前无需绘之任何东西。

5. 将脚本放在底部

与样式表相同，脚本放在底部对于实际页面加载的时间并不能造成太大影响，但是这会减少页面首屏出现的时间，使页面内容逐步呈现。

js 的下载和执行会阻塞 Dom 树的构建，所以 script 标签放在首屏范围内的 HTML 代码段里会截断首屏的内容。

下载脚本时并行下载是被禁用的——即使使用了不同的主机名，也不会启用其他的下载。因为脚本可能修改页面内容，因此浏览器会等待；另外，也是为了保证脚本能够按照正确的顺序执行，因为后面的脚本可能与前面的脚本存在依赖关系，不按照顺序执行可能会产生错误。

6. 压缩组件

从 HTTP1.1 开始，Web 客户端可以通过 HTTP 请求中的 Accept-Encoding 头来表示对压缩的支持

Accept-Encoding: gzip,deflate

如果 Web 服务器看到请求中有这个头，就会使用客户端列出来的方法中的一种来进行压缩。Web 服务器通过响应中的 Content-Encoding 来通知 Web 客户端。

Content-Encoding: gzip

7. 使用外部的 JavaScript 和 CSS

内联脚本或者样式可以减少 HTTP 请求，按理来说可以提高页面加载的速度。然而在实际情况中，当脚本或者样式是从外部引入的文件，浏览器就有可能缓存它们，从而在以后加载的时候能够直接使用缓存，而 HTML 文档的大小减小，从而提高加载速度。

影响因素：

(1) 每个用户产生的页面浏览量越少，内联脚本和样式的论据越强势。譬如一个用户每个月只访问你的网站一两次，那么这种情况下内联将会更好。而如果该用户能够产生很多页面浏览量，那么缓存的样式和脚本将会极大减少下载的时间，提交页面加载速度。

(2) 如果你的网站不同的页面之间使用的组件大致相同，那么使用外部文件可以提高这些组件的重用率。

加载后下载:

有时候我们希望内联样式和脚本，但又可以为接下来的页面提供外部文件。那么我们可以在页面加载完成止呕动态加载外部组件，以便用户接下来的访问。

8. 精简 JavaScript 和 CSS

精简就是从代码中移除不必要的字符以减少文件大小，降低加载的时间。代码精简的时候会移除不必要的空白字符（空格，换行、制表符），这样整个文件的大小就变小了。

9. 减少 DNS 查找

DNS 也是开销，通常浏览器查找一个给定域名的 IP 地址要花费 20~120毫秒，在完成域名解析之前，浏览器不能从服务器加载到任何东西。那么如何减少域名解析时间，加快页面加载速度呢？

当客户端 DNS 缓存（浏览器和操作系统）缓存为空时，DNS 查找的数量与要加载的 Web 页面中唯一主机名的数量相同，包括页面 URL、脚本、样式表、图片、Flash 对象等的主机名。减少主机名的 数量就可以减少 DNS 查找的数量。

减少唯一主机名的数量会潜在减少页面中并行下载的数量（HTTP 1.1 规范建议从每个主机名并行下载两个组件，但实际上可以多个），这样减少主机名和并行下载的方案会产生矛盾，需要大家自己权衡。建议将组件放到至少两个但不多于 4个主机名下，减少 DNS 查找的同时也允许高度并行下载。

10. 删除重复脚本

在团队开发一个项目时，由于不同开发者之间都可能会向页面中添加页面或组件，因此可能相同的脚本会被添加多次。

重复的脚本会造成不必要的 HTTP 请求（如果没有缓存该脚本的话），并且执行多余的 JavaScript 浪费时间，还有可能造成错误。