前端性能优化——加载页面和静态资源（入门级别）

最近一直在准备面试，接触了一些性能优化方面的知识，前端性能优化主要从两个方面进行：

1.加载页面和静态资源；
2.页面渲染；

这篇文章主要讲第一点：

加载页面和静态资源

加载页面和静态资源主要能够从三个角度进行：

1. 静态资源的合并、压缩(http2.0时代有变)
2. 静态资源缓存（css、img）
3. 使用CDN让静态资源加载更快

咱们一个一个仔细展开说。

静态资源的合并、压缩

---

静态资源的合并和压缩可以减小HTTP请求的数量和请求资源的大小。
可使用webpack或fis3进行。以fis3为例：

// 清除其余配置，只保留以下配置
fis.match('*.js', {
  // fis-optimizer-uglify-js 插件进行压缩，已内置
  optimizer: fis.plugin('uglify-js')
});

fis.match('*.css', {
  // fis-optimizer-clean-css 插件进行压缩，已内置
  optimizer: fis.plugin('clean-css')
});

fis.match('*.png', {
  // fis-optimizer-png-compressor 插件进行压缩，已内置
  optimizer: fis.plugin('png-compressor')
});

上面就是压缩资源的配置文件。

但http2.0中增长了不少特性，例如多路复用，也就是说在将来的前端工做中，可能静态资源的合并就显得没那么重要了！

静态资源缓存

---

咱们在写前端页面的时候，常常要引入多个css、js文件，这些文件中，有一些文件是不太须要改动的，可是这些不太须要改动的文件，若是每次用户访问页面都要从新加载就会很影响性能。合理的作法是对于更新频率不过高的文件，让用户可以利用本地缓存。

浏览器缓存的分类：

1）强制缓存：缓存资源未过有效期则不须要请求资源。HTTP首部字段利用catch-control,Expires设置缓存过时时间.

Expires：

Expires: Thu, 10 Nov 2017 08:45:11 GMT

这个字段表示的是缓存到期时间

绝对时间，即服务器时间。浏览器会检查当前时间，若是尚未到失效时间，则会直接使用缓存文件。可是由于这个字段中使用的是绝对时间，可能出现客户端与服务器时间不一样的状况，并且客户端用户能够本身修改时间。

catch-control

Cache-Control: max-age=2592000

这个字段表示的也是过时时间，以上面为例就是2592000s后过时。可是它用的是相对时间，即便客户端时间改变，相对时间也不会随之改变，这确保服务器和客户端的时间一致性。

2）对比缓存：从缓存中获取对应的数据标识，而后向服务器发送请求，确认数据是否更新，若是已经更新，则返回新数据和新缓存，若是没有更新，则返回304状态码，通知客户端缓存未更新，可使用缓存。经过HTTP的last-modified,Etag字段判断。对比缓存和强制缓存相比，更加适合于一些常常要更新的资源文件。

Last-Modified:

Last-Modified: Thu, 10 Nov 2015 08:45:11 GMT

第一次请求资源时，服务器返回最后一次更新资源时间。浏览器下一次请求资源时，就会发送If-Modified-Since字段。

If-Modified-Since：再次请求时，请求头中带有该字段，服务器会将If-Modified-Since的值与Last-Modified字段进行对比，若是相等，则表示未修改，响应304，让浏览器利用缓存；反之，则表示修改了，缓存过时，响应200状态码，返回数据。

这个字段能够和Cache-Control配合使用。

可是他仍是有必定缺陷的：

若是资源更新的速度是秒如下单位，那么该缓存是不能被使用的，由于它的时间单位最低是秒。
若是文件是经过服务器动态生成的，那么该方法的更新时间永远是生成的时间，尽管文件可能没有变化，因此起不到缓存的做用。

Etag

Etag存储的是资源的实体标识(通常都是hash生成的，哈希字符串)，服务器存储着文件的Etag字段，当资源内容更新的时候，Etag会变。服务器能够在与每次客户端传送If-no-match的字段进行比较，若是相等，则表示未修改，响应304；反之，则表示已修改，响应200状态码，返回新资源。

下面是打开了segmentfault上的一个网页，而后从新刷新页面的状况。

使用CDN让静态资源加载更快

---

在不一样地域的用户请求资源（访问网站）的响应速度具备很大的差别，为了提升用户体验，咱们在用户和服务器中间加了一层，就是CDN。CDN（Content Delivery Network），它的思想就是将源站的内容分发到最接近用户的网络边缘节点，让用户可以就近取得所需的内容，提升用户访问的响应速度。

当用户发起HTTP请求时，经过CDN向边缘节点服务器发起请求，边缘节点会检测当前节点是否具备你想请求的数据，若是没有就去源站，若是有请求数据就会进一步判断，这个数据是否在有效期，根据是否过时来决定。（具体的过程更复杂一点，涉及负载均衡等，下面一篇文章会详细讲）