《一》优化网络请求过程

性能就是页面的响应速度。优化性能就是提升页面的响应速度。
提升页面的响应速度可以分为三个阶段：网络请求获取资源的时间、页面加载和渲染的时间、JS 脚本的执行速度。
性能优化在PC 端和移动端都适用。

针对排队等待的时间：

1. 将多个资源分布在不同域上，减少请求队列的等待时间。

   原因是：浏览器为每个域名分配的并发通道有限。例如：Chrome 浏览器为每个域名分配的并发通道是 6 个，也就是每个域名下同时只能加载 6 个资源，后面的资源都需要等待。如果不想让它们等待，就可以将资源分配在不同的域上。

   多个域意味着更多的 DNS 查询时间，通常把域名拆分到 3 ~ 5 个比较合适。

针对查询 IP 地址的时间：

1. 通过 dns-perfetch 减少 DNS 查询时间。

   原因是：当浏览器向第三方服务器请求资源时，必须先将该域名解析为 IP 地址，这个过程就是 DNS 解析，DNS 解析会导致请求增加明显的延迟。dns-perfetch 是一种 DNS 预解析技术，在加载网页的过程中会对网页中的域名提前进行解析缓存，之后用到该域名的时候，可以直接从缓存中拿到对应的 IP 地址，减少请求中的延迟。

   dns-perfetch 仅对跨域的域上的 DSN 查询有效，不要使用它指向当前网页所在的域名。因为到浏览器解析到这一行代码时，当前网页所在的域名背后的 IP 已被解析。
   已经解析过的域名不要再添加 dns-perfetch ，多页面重复 DNS 预解析会增加重复 DNS 查询次数。

   <link ref="dns-prefetch" href="//g.alicdn.com">
   

针对建立 TCP 连接的时间：

可以通过减少 HTTP 请求数量和拉近 HTTP 响应距离来减少建立 TCP 连接的时间。

减少 HTTP 请求数量：

原因是：在请求的过程中，建立 TCP 连接非常耗时，可以通过减少 HTTP 请求，一定程度上来减少建立 TCP 连接的次数。

并不是建立一次 TCP 连接只能完成一次请求和响应，但是具体能完成多少次，是无法控制的。

1. 合并资源：合并脚本和样式表。

   并不是说合并后的资源数量越少越好，需要考虑到合并后的资源体积不能过大，否则会导致下载时间过长。

2. 图片优化：

   • 可以使用 CSS 画图来代替简单的图片。

   • 使用 CSS 精灵图来合并小图标。

     很多人认为合并后的图片会比分离的图片的总和要大，因为合并的图片中包含有附加的空白区域；实际上，合并后的图片会比分离的图片的总和要小，这是因为它降低了图片自身的开销（颜色表、格式信息等的）。

   • 使用 Iconfont 图标代替小图片。

   • 使用 Data URL 将小图标直接内联到 HTML 中：通过使用 data:URL 模式可以在 Web 页面中包含图片但无需任何额外的 HTTP 请求。

     data:URL 的数据就在其 URL 自身之中，其格式如下：data: [<mediatype][;base64],<data>。

     <img src=“data:image/png;base64,图片的base64编码" />
     

     data:URL 模式的缺陷是可能存在数据大小上的限制；并且 base 64 编码会增加图片的大小，因此整体下载量会增加；而且，由于 data:URL 是内联在页面中的，在跨越不同页面时不会被缓存。

   • 图片懒加载。

3. 使用 HTTP 缓存：将不常变化的文件使用 HTTP 缓存缓存起来。

拉近 HTTP 响应的距离：

1. 使用 CDN。

针对下载资源的时间：

可以通过减少请求资源的大小来减少下载资源的时间。

资源越小，下载得越快；资源越大，下载得越慢。

1. 压缩资源：使用各种打包工具对 HTML、CSS、JS 等资源进行压缩。

2. 开启 gzip 压缩：gzip 是目前最流行和最有效的压缩方法。使用 gzip 压缩组件，通常能将响应的数据量减少将近70%。

   服务器基于文件类型选择压缩什么，后端可对其进行配置。
   HTML、脚本、样式表等都可以进行压缩，但是图片和 PDF 不应该压缩，因为它们本来就已经被压碎了，试图对它们进行压缩只会浪费 CPU 资源，还有可能会增加文件大小。

   浏览器在接收到压缩文件之后，会自动解压并执行。

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