基于Vue-SSR优化方案归纳总结

Vue-SSR相信大家都不陌生，与传统 SPA 相比，服务器端渲染 (SSR) 能够具备更好的SEO，方便搜索引擎爬虫抓取工具可以直接查看完全渲染的页面，除此之外，SSR能够在更短的时间内渲染出页面内容，通过在服务端填充数据吐出到客户端的方式，让用户有更好的用户体验。

前言

基于VueSSR的页面优化常有，而针对VueSSR的再优化不常有。前段时间有幸作为 宇宙无敌上级特派看门员 参加了前端tweb大会，听取了腾讯视频Web高级工程师lucien(段隆贤) 分享了针对SSR场景下的一些优化，由于笔者之前也有在项目中实现SSR渲染，所以也针对Vue-SSR的优化进行了实践和归纳总结，并且在前人的基础上进行了新的优化尝试，当然，不同的项目不同的场景下，优化效果、优化方案可能不尽相同，需要读者们自行选取~（本文将讨论常见的SSR优化方案以及笔者个人的优化尝试）

CSR与SSR的区别

首先，还是要不厌其烦地过一遍CSR和SSR的区别，在理清整个流程后，才能发现性能瓶颈以及关键耗时在哪里。

CSR一般由静态资源服务器（CDN）等直接返回HTML资源，之后浏览器解析HTML加载CSS、JS资源（CSS加载结束后页面会尽快进行首屏渲染FP），JS依赖加载结束后，Vue实例初始化，拉取页面数据，页面渲染（FMP）。

SSR由nodejs服务器来直出页面，请求到达后端后，后端拉取cgi接口数据，根据直出bundle生成render对象，render对象将执行客户端代码构建VDOM，生成HTML string，填充进模板HTML，返回HTML资源，浏览器解析后加载CSS、JS资源，（在CSS加载结束后触发FP和FMP），Vue实例初始化，接管后端直出的HTML，页面可响应。

（以下流程图引自：https://www.jianshu.com/p/10b6074d772c）

时序图

（注： FP即First paint，首屏渲染，可能是没有数据的状态。 FMP即First meaningful paint，处于已经渲染数据的状态。 可交互