网页资源加载的优化方法

概述

参考自谷歌的教程
网站的加载性能能够从减小网络延迟、减小资源数量、减小资源体积和使用缓存 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。