前端性能优化之SSR优化

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

SSR 渲染方案

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

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

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

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

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

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

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

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

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

猜你喜欢

转载自blog.csdn.net/xiangzhihong8/article/details/143305226