JS核心理论之《SPA、CSR、SSR、Prerender原理浅析》
最新回答
几多悲痛°
2021-01-30 22:47:28
首先，让我们以流程图的形式来理解它们。CSR的渲染流程是：浏览器请求URL后，服务器返回一个空的index.html页面，浏览器随后再次请求bundle.js进行路由分析，最后进行渲染。
对于CSR，如果bundle.js的体积过大，将会导致浏览器白屏时间的显著延长。
接下来是SSR的流程。在服务器端完成渲染后，用户即可立即看到首屏内容。相对于CSR，SSR在客户端需要等待一次脚本下载和渲染时间，这在不同硬件与网络环境下可能会产生显著差异。SSR与CSR的第二阶段大体相似，但在SSR中，客户端生成虚拟DOM后，并不会重新渲染，而是通过比较现有DOM的checksum来决定是否重新渲染。
SSR的关键原理是基于Virtual DOM实现的同构渲染。
Prerender的工作流程如下：浏览器请求URL后，服务器返回预渲染内容和内联的bundle.js，浏览器进行渲染，随后再次请求bundle.js进行二次渲染。
Prerender的实现需要借助PrerenderSPAPlugin插件，通过webpack设置来指定需要预渲染的页面。
Prerender原理基于Chrome官方的Puppeteer工具，它在构建阶段的最后，在本地启动Puppeteer服务，访问配置的路由，渲染页面并输出到HTML文件中，创建对应的目录。然而，Prerender的缺点在于渲染是在打包阶段进行的，如果页面包含实时更新的数据，那么在渲染时显示的可能不是最新信息。
在打包阶段预先渲染页面，因此在请求到index.html时，页面已经是渲染过的内容。
对比SSR与Prerender，它们的主要区别在于Prerender是静态预渲染，而SSR是动态在服务器端实时构建DOM。
了解这些概念与原理对于优化SPA应用的性能与用户体验至关重要。在实际开发中，开发者需要根据项目需求与技术栈，选择最适合的渲染策略，从而达到最佳的响应速度与资源利用。
热门标签
