知识点：软件工程术语 一种逻辑分层，而非一种技术。 解决了什么问题？ 简单来看，在前后端架了一个中间层，使前后端进一步分离，各自的职责更加明确，一定程度上来说增加了架构设计的灵活性。 如何正确使用？ 多端应用场景，满足不同终端可能的API定制化需求。 服务聚合，聚合复杂业务的服务调用，避免超长的服务调用链路。 合理使用。 其它应用：
知识点：软件工程术语
一种逻辑分层，而非一种技术。
解决了什么问题？
简单来看，在前后端架了一个中间层，使前后端进一步分离，各自的职责更加明确，一定程度上来说增加了架构设计的灵活性。
如何正确使用？
多端应用场景，满足不同终端可能的API定制化需求。
服务聚合，聚合复杂业务的服务调用，避免超长的服务调用链路。
合理使用。
其它应用：
访问控制。
应用缓存。
第三方入口。
对前端工程师来说，这样架构的优势：
以??编写后端服务，实现数据的适配。
实现SSR（服务端渲染直出）技术。
实现各种后端领域服务。
关联理念：计算机科学领域的任何问题都可以通过增加一个间接的中间层来解决。
MVVM(View + ViewModel + Model)，一种前端模式框架
和 MVC 最?的区别在于：MVVM 采?双向绑定（Data Binding）或?动渲染更新。
整体来看，MVVM简化了数据与视图的依赖，解决了数据频繁更新的问题。
CSR(Client Side Rendering)，即客户端渲染
特点：
实现了前后端架构分离，实现了前后端职责分离。
TTFB 时间最?。
TTFB(Time to First Byte)，即发出页面请求到接收到应答数据第一个字节所花费的毫秒数。
FCP(First Contentful Paint)，首次内容绘制，是Google Core Web Vitals中最有意义的指标之一。
3.1 FCP简单理解是浏览器在页面上呈现第一个DOM元素的时间。
3.2 网站在iframe 中包含的任何内容都不会被FCP考虑在内。
3.4 FCP评估：
好 – 在 0 秒到 1.8 秒之间。
需要改进 – 在 1.8 秒到 3 秒之间。
差 – 超过 3 秒。
TTI(Time to Interactive)，即页面可交互时间
TTI指应用在视觉上已渲染出，可以响应用户输入了。
官方文档描述如下：
First Idle is the first early sign of time where the main thread has come at rest and the browser has completed a First Meaningful Paint.
Time to Interactive is after First Meaningful Paint. The browser’s main thread has been at rest for at least 5 seconds and there are no long tasks that will prevent immediate response to user input.
RAIL模型 - Response, Animation, Idle和Load简写
RAIL是一个以用户为中心的性能模型，它把用户的体验拆分成几个关键点（例如，tap，scroll，load），并且帮你定义好了每一个的性能指标。
Response - 事件处理最好在50ms内完成。
Animation - 在10ms内产生一帧，为了保证浏览器60帧，每一帧的时间在16ms左右，但浏览器需要用6ms来渲染每一帧，保证动画在视觉上的平滑。
Idle - 最大化空闲时间，以增大50ms内响应用户输入的几率。
Load - 内容请求到页面可交互时间不超过5秒，如果页面加载比较慢，用户的焦点可能会离开。加载很快的页面，用户平均停留时间会变长，跳出率会更低，也就有更高的广告查看率。
SSR(Server Side Rendering)，服务端渲染
在服务端完成页面模板、数据预期、填充，并且在服务端就可以将完整的HTML内容返回给浏览器。
SSR时序图见 - https://developers.google.com/web/updates/2019/02/rendering-on-the-web 。
其它内容：
理想情况下，不需要在客户端再次请求数据，?是直接消费数据即可。
可以将 SSR 和 CSR 相结合，即实现?个基于hydration（注?） 的 SSR 和 CSR 结合?案。
hydration，这个概念和同构应?中数据的获取和消费有关。在服务器端渲染时，?先服务端请求接?拿到数据，处理并准备好数据状态（如果使? Redux，就进? store 的更新）。
为了减少客户端的请求，我们需要保留住这个状态。?般做法是在服务器端返回 HTML 字符串的时候，将数据 JSON.stringify ?并返回，这个过程，叫作脱?（dehydrate）；在客户端，就不再需要进?数据的请求了，可以直接使?服务端下发下来的数据，这个过程叫注?（hydrate）。
把性能优化做到极致，SSR 还可以发展为Streaming server rendering（流式 SSR 渲染）或Progressive Rehydration（渐进式 SSR 渲染）：
流式 SSR 渲染，允许服务端通过stream的?式向浏览器发送 HTML 内容。在 React 中，我们可以使?renderToNodeStream()?法来完成流式 SSR 渲染。
渐进式 SSR 渲染可以允许在 hydrating 没有完全结束前，部分已经渲染并注?完成的??内容，可以优先完成交互响应。
NSR(Native Side Rendering)
NSR是在hybrid中特有的渲染技术。
简单来说，通过 Native 渲染?成HTML 数据，并且缓存在客户端。 这样?来，对于?个hybrid WebView的?户访问，会优先从离线包中加载离线??模板，再通过前端Ajax或客户端能?请求数据，最终完成??完整的展示。
优势是：将服务器的渲染?作放在了?个个独?的移动设备中，并借助离线存储技术，实现了??的预加载，同时?不会增加额外的服务器压?。
ESR(Edge Side Rendering)
ESR渲染利用了CDN能力，在CDN 上缓存??的静态部分，这样在?户访问??时，可以快速返回给?户静态内容，同时在 CDN 节点上也发起动态部分内容请求，在动态内容获取之后，利?流的?式，继续返回给?户。
借助边缘计算能力，前端渲染架构的想象空间会被无限放大。
ESR在阿里中开始部分应用。
边缘计算，是指在靠近物或数据源头的?侧，采??络、计算、存储、应?核?能?为?体的开放平台，就近提供最近端服务。其应?程序在边缘侧发起，产?更快的?络服务响应，满??业在实时业务、应?智能、安全与隐私保护等??的基本需求。边缘计算处于物理实体和?业连接之间，或处于物理实体的顶端。?云端计算，仍然可以访问边缘计算的历史数据。
相关推荐链接：
