laizimo/zimo-article

网页性能优化漫谈(二)

laizimo opened this issue · 1 comments

laizimo commented

前言

在上一篇文章中，我们以及聊过了减少http请求的四个方法:

  1. 减少css和JavaScript
  2. 雪碧图
  3. image base64
  4. image map

正文

今天，我们来了解一下服务器相关方面，我们可以做的优化

首先，我们必须知道一个神器——CDN。它在现在的网站中发挥着无尽的作用。CDN（Content Delivery Network）,即基于内容的分布式分发网络，它帮助现在大多数网站进行静态资源的部署。正如，军规中提到的网络请求中，有80%-90%的响应时间是在资源下载中度过的，而CDN的机制可以帮助我们更快的获取到这些静态的资源。

首先，我们需要清楚为什么需要CDN这个东西，仅仅只是帮助网站提高加载速度么！其实，不仅仅如此，试想一下一些大型的网站（全国、甚至是全世界），访问的基数非常之大，静态资源的访问频繁，会使得主站服务器吃不消，即使给单个端口增至最大的带宽，也无法满足需求。因此，CDN在这里扮演者重要的角色。

CDN的网络结构大概是中心节点加上边缘节点组成的。这就相当于每个人访问网站时，如果网站部署了CDN，那么就会向最近的CDN服务器请求静态资源，而不是想传统的网站一样，只会去访问主站服务器。使用CDN时，还可以对内容进行缓存，以加快网站的访问速度。

例子：

当我们看到网页的资源是如下表示的，就表示它使用了CDN来进行静态资源的分发

<link crossorigin="anonymous" href="https://assets-cdn.github.com/assets/frameworks-77c3b874f32e71b14cded5a120f42f5c7288fa52e0a37f2d5919fbd8bcfca63c.css" integrity="sha256-d8O4dPMucbFM3tWhIPQvXHKI+lLgo38tWRn72Lz8pjw=" media="all" rel="stylesheet">

大致了解了CDN，我们再来哔哔缓存。一直以来，我都一度认为缓存是一个好东西，毕竟，很多时候只要做了这个处理，都可以得到良好的收益。

例如，你总是会频繁的访问一个网站，你可能会不断重复的去请求和下载同一个资源N次。这是相当不可取的。一旦，服务器做了缓存，那么，网站就会告诉你，这个东西你还能继续使用。在响应头中设置expires或者cache-control的属性，来设置相应资源文件的响应时间。这样，在你第一次访问完一个网站之后，当你再一次访问时，往往会收到304的响应状态码，因为资源的缓存还未到期。如果你有个资源万年不变，你就可以将expires的有效时间设置为10000年（当然是不可以的，expires是有最大值的哈）。

Expires: Thu, 15 Apr 2020 20:00:00 GMT

一旦你设置了这个值，浏览器将认为资源不会更新。但是，突然你又想更新一下资源你又要怎么办呢。那就在资源后面加上hash值或者版本号，example-2c3fde.js类似。

总结

在服务器上做优化，会使得整体网站的访问速度提升很多