前端性能优化之SSR优化

我们常说的 SSR是 指 Server-Side Rendering，即服务端渲染，属于首屏直出渲染的一种方案。SSR 也是前端性能优化中最常用的技术方案了，能有效地缩短页面的可见时间，给用户带来很好的体验。

SSR 渲染方案

一般来说，我们页面加载会分为好几个步骤：

1. 请求域名，服务器返回 HTML 资源。

2. 浏览器加载 HTML 片段，识别到有 CSS/JavaScript 资源时，获取资源并加载。

现在大多数前端页面都是单页面应用，使用了一些前端框架来渲染页面，因此还会有以下的流程：

1. 加载并初始化前端框架、路由库。

2. 根据当前页面路由配置，命中对应的页面组件并进行渲染。

3. 页面组件如果有依赖的资源，则发起请求获取数据后，再进行渲染。

到这里，用户才完整地可见到当前页面的内容，并进行操作。可见，页面启动时的加载流程比较长，对应的耗时也都无法避免。

使用 SSR 服务端渲染，可以在第 1 步中直接返回当前页面的内容，浏览器可以直接进行渲染，再加载剩余的其他资源，因此优化效果是十分明显的。除了性能上的优化，SSR 还