从CDN了解到的边缘计算与前端渲染

在这里插入图片描述

文章概叙

本文代码量较少，讲的是在云开发的基础上使用边缘计算的，代码量不高，建议看完理解下就可以丢了，知道个概念就好。

废话1

第一次接触边缘计算是在2020年的时候，公司的cloud课程中，有一些相关概念的计算，不过那时候的重心不在云服务上，所以就没仔细看，最近看到一些云服务商的文章，觉得不错，所以就收集了一些资料，尽可能的整理成自己的东西~
文章中的模式图，来源是阿里云的开发者社区

CDN

在这里插入图片描述
全程是Content Delivery Network，也就是内容分发网络，重点在于分发两个字。

玩过LOL的朋友都知道，我们游戏里面有很多的区，比如现在的战争学院，以前的电六区，他的服务器在于广东东莞大朗(网上的资料…)，当我们在广州打游戏的时候，网络就还勉强，没什么卡顿的，但是当我们在北方玩的时候，甚至开了加速器还没是有点卡顿，这是因为当服务器距离我们很远的时候，我们请求延时就会很高。

而当我们不想要使用分区的方式时，我们就可以使用CDN的方式，让服务器自动去分配一个服务器。

CDN是指在现有互联网络中增加一层新的网络架构，其基本思路是尽可能避开互联网中可能影响数据传输速度和稳定性的瓶颈和环节，使内容传输更快。

CDN加速可以实时根据网络流量和各节点的链接、负载状况以及用户距离和响应时间等信息将用户的请求重新导向到离用户最近的服务节点，降低网络的拥塞，提高内容传递的速度和效率，加快用户访问的响应速度。

为什么用CDN

在这里插入图片描述

正如上述所说，我们使用了CDN之后，我们就可以更快的找到适合我们的服务器，那么就可以加快网页的加载速度，如CDN的加速内容分发是基于服务器缓存的，相当于CDN中缓存了我们网页的一些图片，音频等文件，甚至是我们的HTML文件在内。无需通过服务器去渲染页面返回，所以我们经常将CDN与静态文件联系在一起。

除此之外，使用CDN 还可以优化数据传输路径，可以收集节点的信息，比如服务器A的访问并发量是1000,而B服务器的访问并发量是10，那么CDN就可以帮我们选择B服务器，以获得最快的访问速度。

且CDN加速不受运营商相互访问较慢的限制。依旧是LOL的例子，当我们使用了CDN 加速后，我们就可以在南方等电信较为普遍的地方访问网通的服务器(网通，我不是在说你慢…)

最最最主要一点，前端的不少网页是要看SEO的，而对于搜索引擎来说，使用了CDN的网站，是加载速度快、稳定安全的网站，正合他们的胃口。

讲了那么多CDN的好处，是怕你面试时候人家问道你什么是CDN…你哑口无言…

SSR

SSR全称是 Server Side Rendering，即我们所称的服务器端渲染。
现在的开发，NodeJs引领的全栈开发上，我们已经很习惯使用服务器端去渲染我们的页面了，由于前后端都是TypeScript，所以我们的代码是可以复用的，且对比SPA应用，我们的SEO是极度友好的，再在CDN以及后端渲染后返回HTML页面的条件下，大大的减少了白屏的时间。

CSR + CDN

在结合了CDN的SSR模式上，我们一般的做法是将页面的静态内容缓存在CDN节点上，让用户能快速的看到页面的部分内容，如我们打开美团等网页时候，我们会先看到页面的大概布局，但是下面的商家列表需要我们动态的去拉取，这就是我们常说的CSR—Client Side Rendering

模式图如下：

该模式就是直接将页面的内容分来，并且静态页面存储在CDN上，作用是减少白屏时间，然后将动态内容使用Ajax去获取，所以就是：CSR + CDN

ESI

后来的后来，我们多了一个云服务，当然，这个也是CDN服务商们提出的规范，毕竟赚钱是更新的动力…
ESI全称是Edge Side Include，即我们发起请求的时候，我们会将这个请求发送到第三方服务器上(CDN节点)，可以理解为第三方的服务器，接着第三方会通过请求我们的服务，随机整合了我们的动态资源以及静态资源，接着直接返回到我们的浏览器上。
使用ESI的好处，在于我们可以保证我们的动态内容不会很卡顿，但却严重加大了我们的白屏时间，所以这是一个比较"失败"的模式.

ESR

但是在云的基础上，我们还有一个边缘计算。

边缘计算是将从终端采集到的数据，直接在靠近数据产生的本地设备或网络中激进型分析，无需再将数据传输至云端数据处理中心。
ESR全程是Edge side rendering，通俗解释来说，就是在SSR的基础上，我们将动态请求数据的操作，放在了我们的云上，而我们只需在我们的浏览器端发起一个请求。

ESR是指借助边缘计算的能力，将静态内容与动态内容以流式的方式，先后返回给用户。cdn 节点相比于 server，距离用户更近，有着更短的网络延时。在 cdn 节点上，将可缓存的页面静态部分，先快速返回给用户，同时在 cdn 节点上发起动态部分内容请求，并将动态内容在静态部分的响应流后，继续返回给用户。

模式图如下：