py获取前端的参数_抠抠前端网络优化之CDN

正经篇幅

面试官：简单介绍下CDN，及其对前端的作用

答：CDN是内容分发网络(Content Delivery Network)，将前端资源部署在CDN可以加快客户端获取资源的速度。

面试官：。。。。行，回去等通知吧

答：别。。。

面试官：那你说说为啥CDN可以加快客户端获取资源的速度

答：如图

cdn网络中有多个边缘节点服务器；我们将资源上传到源服务器(通常是业务部署的业务服务器)之后，经过cdn网络的中心调度，可以将源服务器里的资源部署到各个边缘节点服务器；客户端就可以从最近的一个边缘节点服务器获取需要的资源，实际上就是从物理上缩短资源传输距离，加快了资源的获取速度。

面试官：照这么整，从CDN获取资源一定比从业务服务器获取资源快咯？

答：当然不是，这得分情况，例如当客户端第一次向cdn请求某个资源时，流程如下：

1. 客户端会先查询cdn域名的距离自己最近的ip地址

2. 得到IP地址之后，向边缘节点服务器发起资源请求

3. 边缘节点服务器发现自己没有客户端请求的资源，就会问源服务器要

4. 源服务器给边缘节点服务器响应请求的资源，第3和第4步过程称之为回源

5. 边缘节点服务器拿到资源之后，会自己缓存一份，并将此资源响应给客户端

6. bingo，客户端拿到最新的资源了

可以看出，如果回源请求资源，将比客户端直接访问源服务器更慢；但是边缘节点有了缓存之后，第二次访问就快了(因为边缘节点服务器距离客户端近)，过程如下图

面试官：既然边缘节点服务器有缓存，怎么保证缓存的资源与源站的资源是相同的(即如果源站资源更新了，客户端怎么无延迟拿到最新的资源)

答：对于项目打包出来的js、css等静态资源，在webpack打包的时候，可以使用文件hash命名，如vendor.hash1.js；资源更新后，打包出来的资源名字就会改变：vendor.hash2.js；这样可以保证同名的资源，无论是在源服务器还是边缘节点服务器都是相同的，如下图(假设cdn域名为cdn.example.com)：

js、css等静态资源是由html引用的(可借助webpack将打包出来的最新资源路径注入html)，因此，只要确保客户端访问的html入口文件是最新的，访问到的其余静态资源也是最新的

面试官：那怎么保证客户端访问的html入口文件是最新的，也用hash命名吗

答：入口文件名称一般不会改变，不用文件hash命名，如果使用hash命名，则每次更新html入口文件，都需要在nginx上修改重定向入口；假设我们的系统域名为demo.example.com，客户端访问此系统的过程如下：

由于客户端访问系统的时候，域名是不变的，nginx监听到这个请求就会从cdn拿系统的入口文件并返回给客户端；但是nginx并不知道入口文件名字，这个名字由运维人员配置的，假如入口文件也用hash命名，那入口文件每次更新都需要去nginx上配置最新的名字，才能确保nginx去边缘服务器请求最新的入口文件，很麻烦。

所以在边缘节点服务器中，可以将html入口文件的缓存时间时间设置得很短，比如5分钟，这样子过几分钟缓存就失效了，边缘节点服务器会回源获取最新的入口文件资源(对于客户端来说近似实时)。而其他的静态资源可以将缓存时间设置长一点，减少回源情况

面试官：其他静态资源缓存时间设置多长合适？设置永久可以吗

答：理论上是可行的。因为对于hash命名的资源，只要名称相同，内容肯定是相同的，并不会出现源服务器与边缘节点服务器里面同名资源不同内容的情况，设置缓存有效期长一点，就减少一点回源的概率。

但是，边缘节点服务器的容量不是无限大的，即使设置了永久有效，当服务器容量满了的时候，一般会把最旧的资源删掉。

如果项目的迭代周期比较稳定，可以根据迭代周期来设置缓存时效。而且，即使资源过期了，边缘节点服务器也不会立刻回源，而是通过对比一些请求参数决定要不要回源，详看过滤参数

面试官：假如将html文件的缓存时效设置为5分钟，会有风险吗

答：有。。。。。html入口文件更新了，大概率意味着是系统的更新，后端服务的接口也有可能更新，比如传入的参数变化了；如果客户端访问到的入口文件是边缘节点服务器中的旧缓存，客户端请求的接口传入的参数还是旧的；如果后端接口没做向下兼容，系统就无法正常使用，甚至导致系统白屏(这是会被PM打屁股的bug)

面试官：如何避免？

答：emmmmmmm，html更新的时候，使用cdn刷新功能，实际上就是将边缘节点服务器里面的html缓存删掉，这样客户端请求时会触发cdn回源，就能拿到最新的数据啦。只是。。。。有点危险，搞不好删错东西了，就是导致大量回源，说不定把源服务器整挂了。。。。

面试官：人到中年，讲求的是稳重，就没别的办法了吗

答：有，就是html不部署到cdn里面，部署到一个独立服务器，这个服务器只提供访问html的能力，不设置缓存；因为现在spa开发出来的html文件很小，访问速度还可以接受。

面试官：考虑这样一个场景，你的产品用户量很大，在下周会搞一个抽奖活动，抽奖页面新开发的，谈谈你怎么利用CDN来做优化以确保你这个抽奖活动能够正常使用

答：由于抽奖页是新发布的，即边缘节点服务器并没有抽奖页资源的缓存，到了抽奖日期可能会导致大量的cdn回源；针对这种情况，可以使用cdn的预热功能，即在抽奖日期前手动触发边缘节点服务器向源服务器请求资源并缓存起来。

面试官：预热只能确保用户比较快的访问到抽奖页面(即预热只能预热静态资源)，但是抽奖操作、奖品数据不还是得通过ajax请求发送到服务器嘛，把服务器搞爆了怎么办

答：不慌，cdn还有数据预取功能，运维人员可以根据用户访问的内容与数据的关联性配置策略，提前从源服务器请求一些公共数据并缓存起来。例如，用户访问抽奖页面，那么肯定会获取奖品列表等数据，这些数据对于每个人都是一样的，cdn可以预先从源服务器将这些数据请求回来并缓存，那客户端可以减少请求业务服务端的次数啦。

另外，目前不少cdn厂商都在边缘节点服务器提供一些简单的计算能力，并可以将计算结果缓存起来，这样用户的一些简单交互操作就可以直接请求边缘节点服务器啦，进一步降低业务服务端的压力。

面试官：嗯嗯，还可以，接下来说说别的前端网络优化方法吧

答：。。。。。。。。。

招客slogan

欢迎关注微信公众号，抠~更多前端知识