网页资源加载的优化方法

概述

参考自谷歌的教程
网站的加载性能可以从减少网络延迟、减少资源数量、减少资源体积和使用缓存 4 个方面来进行优化。

1. 减少网络延迟与网络请求

1. 避免使用着陆页进行重定向。
   重定向会导致额外的HTTP请求，造成网络延迟，拖慢网页的呈现。重定向也可能造成额外的DNS查找，TCP握手和TLS协商。
2. 合并资源，减少网络请求
   合并资源，最常见的就是sprite精灵图了。
   此外，还可以合并一下 CSS 和 JS 代码。

2. 控制资源下载数量

访问一个网页时，所请求的资源一定要都是有用的，避免无用的资源请求，如：

1. 多余的`js`文件，`css`文件
2. 多余的图片请求
3. 多余的字体请求

3. 资源体积的优化

网站用到的资源主要有：

• 文字类资源，如js， css 和 html；
• 图像类资源，各种图片

3.1 文字类资源的优化

1. 首先当然是自己要写出优质、简洁的代码了。

2. 其次，对于 js文件，html文件，css文件，要进行文件最小化处理，去除文字间的空格、换行，进行变量名的替换等等。
   这些工作一般都是在前端工程打包时进行的， 如：

   • HTML 文件使用 HTMLMinifier；
   • CSS 文件在 Webpack 打包时，对 loader 配置minimize；
   • JS 文件使用UglifyJsPlugin 插件；
3. 接下来就是使用GZIP对文件进行编码压缩了。
   现代浏览器都可以接受 gzip 格式的文件，我们要做的就是对服务端进行配置。

3.2 图像类资源的优化

1. 选择正确的图片格式
   虽然经常说png 图片比 jpge 图片能更好的表现摄影图像，但是对于很多图片来说，png格式的图片，转化为 jpeg 格式后，对于图片的清晰度并没有特别大的影响，但是体积却能大大减少。
2. 移除不必要的元数据
   某些拍出来的照片会含有元数据，就是描述数据的数据。元数据会描述图片拍摄的设备信息，时间戳，图片尺寸等，这对于某些网页图片来说不是很重要，所以我们可以剔除掉这些元数据。
   尝试下这个网站VerExif。
3. 减小图片的尺寸
   某些情况下，\<img\> 标签或标签的背景即使用了大图，其在实际网页中的尺寸也很小，这时使用大图就是造成资源的浪费了。这是可以对图片尺寸进行重设， 比如将1200 x 600 像素的图片改为 600 x 300 像素。

4. 降低图片质量
   在某些情况下，降低图片的质量并不会造成任何视觉上的差别，却能减少大量的体积。
   有很多处理图片质量的软件，如：

   • XNConvert
   • ImageOptim
   • Resizelt

     更多参考这里。

5. 图片压缩
   尽管对图片使用gzip压缩没什么效果，但是还是有很多软件可以在不影响图片尺寸和视觉质量的情况下，对图片进行压缩的，比如这个网站。
   更多网站可以参考[这里](

http://enviragallery.com/9-be...。

4. 使用HTTP缓存

严格来说，这也算减少请求次数，但是实现方式是完全不一样的。
使用HTTP缓存，是设置适当的缓存策略，从而可以避免浏览器重复地向服务端请求资源。
HTTP缓存主要是服务端设置正确的响应头信息。
缓存分为两种：强缓存 和协商缓存。

4.1 强缓存

强缓存是指浏览器直接使用存在本地的资源，而不再向服务端进行请求。涉及到的响应头有两个： Expires 和 Cache-control 。
Expires 是http 1.0的内容，其内容是服务端设置的一个具体的时间点， 如Expires: Wed, 21 Oct 2015 07:28:00 GMT, 无需过多了解。
Cache-control 是http 1.1 新增的头部，其值为下列指令之一或组合：

• no-cache ：表明浏览器可以对内容进行缓存，但是必须先向服务器确认，资源未改变的情况下，可以直接使用浏览器的缓存。与 no-store 互斥；
• no-store : 表明内容不允许缓存，包括浏览器以及中间设备，如代理服务器等，与no-cache 互斥；
• public : 表明缓存可以存在于浏览器和中间设备，与 private 互斥；
• private ：表明缓存只能存在于客户的浏览器中；
• max-age: 以秒为单位的时间范围，表明经过多长时间之后，缓存内容将过期。过期之后，浏览器必须重新下载资源。

设置强缓存之后，浏览器每次请求就会使用本地缓存的内容或者根据返回的头部信息去浏览器验证。

4.2 协商缓存

当服务端对资源不设置强缓存时，可以使用协商缓存。开启协商缓存的方式有两种：

1. Last-Modified 与 If-Modified-Since;
2. Etag 与 If-None-Match;

两组头部信息的名字，都很语义化，降低了理解的难度。

4.2.1 Last-Modified 与 If-Modified-Since

服务端设置 Last-Modified 响应头, 表明资源最后修改的时间，这个值是一个时间点。浏览器请求时，会带上一个头信息 If-Modified-Since，其值为Last-Modified 的值。 服务器对比资源的上一次修改时间和 If-Modified-Since 所表示的时间，如果不曾改变，就返回304。

4.2.1 Etag 与 If-None-Match

服务端设置 Etag 响应头, 表明资源的的唯一标识字符串，只要资源被修改过，就会重新生成一个Etag。浏览器请求时，会带上一个头信息 If-None-Match，其值为Etag 的值。 服务器对比资源当前的Etag和 If-None-Match 的值，如果一致，就返回304。