PHP衬着加快技巧_边缘衬着提速

文章转载：乐字节

实在全体前端渲染办法也是随着前端技能的演进而不断改造的，大致可以分为如下进程。

SSR（Server Side Rendering）时期（JSP、PHP）

最早期的前端渲染（2005年Ajax推出之前）都是和后端混写的，比如JSP、PHP等写法。
但是前后端写法杂糅在一起导致开拓效率低下，比如改个样式还要重新编译一遍，并且页面也会写的很重。

CSR（Client Side Rendering）时期

后面有了Ajax技能之后，再加上通过CDN缓存静态资源之后，前端SPA + CSR渲染有了飞跃式的发展，这种模式前端处理所有逻辑、内容添补和路由，数据加载部分通过Ajax从后端获取，因此很好的办理了前后端分工开拓的问题。
其详细要求韶光线可拜会下图。

但是由于要求是全异步的，其一是对SEO不利，其二是须要HTML + JS处理数据拼接才能在前端完成渲染，其首屏白屏韶光会较长，特殊在一些低端机型上体验更是堪忧。

再后来随着Node引领的全栈技能的发展，前端又回到了当初的SSR路上，只不过这次的回归是一次螺旋式的上升。
首先是前后端全是JS语法，大部分代码都是可复用的，其次是SEO场景友好，做事端渲染好后直接返回终极的HTML，减少了白屏等待韶光，过多异步要求的导致的性能问题也可下放到做事端办理，也能有效避免多次的数据获取、内容添补，浏览器只绑定干系的JS逻辑、事宜即可。
其详细要求韶光线可拜会下图。

ESR（Edge Side Rendering）时期

后面随着边缘打算的发展，由于CDN节点间隔用户更近，有更短网络延时的上风，我们可以将页面进行动静拆分，将静态内容缓存在CDN先快速返回给用户，然后在CDN节点上发起动态内容的要求，之后将动态内容与静态部分以流的形式进行拼接，从而进一步提高了用户的首屏加载韶光，尤其在边缘地区或者弱网环境也有能拥有很好的用户体验，此外还减少原来SSR做事器压力。

事理和上风

刚才也提到了，ESR便是借助边缘打算能力，将返回的内容进行静态+动态部分拆分并以流的形式返回。
静态部分依托CDN的缓存能力，优先返回给用户，随后在CDN节点上连续发起动态数据要求，并拼接在静态部分之后，连续流式返回。
因此，其上风也是显而易见：

直接将SSR做事搬到边缘支配，详细流程如下图。

场景二：边缘做事读取缓存的静态部分HTML，中央做事供应动态HTML

SSR做事支配在中央，边缘流式返回HTML内容（利用HTTP Transfer-Encoding: chunked 分块传输机制），须要分离静态与动态部分，详细流程如下图。

以一个Demo网站为例，顶部导航可以视为静态部分缓存在边缘CDN，下面的卡片是动态部分回源到中央做事获取数据

通过Demo比拟，可创造ESR比SSR的有着明显上风，其静态顶导首先绘出，后面动态数据也比SSR的返回要快。

此外，结合如下的埋点统计，ESR的上风更加得以印证。

结语和展望技能实现： ESR适应于对页面渲染性能较高的场景，借助边缘打算在SSR的根本上进一步优化首屏绘制的韶光，降落用户页面的白屏等待韶光；支配办法： 目前实现办法紧张借助于边缘faas支配ESR做事，具有快速访问、弹性扩缩容、低运维本钱等优点；后期供应ER（边缘js运行时）支配，用户无需关心边缘节点，只需专注于代码本身，修正代码上传发布即可，相对付node做事，js运行时能够供应更高的运行效率

文章转载：乐字节