我认为您关于 DOM 工作方式的问题可能有些混淆。
虽然可以使用jsDom 之类的库在 node.js 服务器上呈现具有 DOM 的应用程序,但当将相同的页面提供给客户端时,它具有完全不同的 DOM 实例,并且没有任何方法可以两人之间的交流。因此,您的应用程序对服务器上的 DOM 所做的任何更改都不能轻易地传播到客户端上的 DOM。
如果您的组件似乎在浏览器中运行缓慢,那么与尝试将 DOM 操作卸载到服务器相比,您更有可能通过处理组件以使其更有效率获得良好的结果。
如果您查看这两种不同的场景并将它们分解为浏览器实际执行的操作,您就会明白为什么这是一个坏主意。
场景(一)——在服务端渲染 Dom 变化
- 第 1 步 - 客户端从服务器加载初始 html 页面(慢)
- 第 2 步 - 用户与客户端页面交互(快速)
- 第 3 步 - 客户端将用户交互发送回服务器(vslow)
- 第 4 步 - 服务器加载一个 Dom(慢)
- 第 5 步 - 服务器运行 Dom 更改(快速)
- 第 6 步 - 服务器将重新渲染的 HTML 发送回客户端(慢)
- 第 7 步 - 客户端从服务器呈现新的 HTML(慢)
场景(2)——在客户端渲染 Dom 变化
- 第 1 步 - 客户端从服务器加载初始 html 页面(慢)
- 第 2 步 - 用户与客户端页面交互(快速)
- 第 3 步 - 客户端运行 Dom 更改(快速)
- 第 4 步 - 客户端呈现更改的 DOM(慢)
与尝试将 DOM 渲染卸载到服务器相比,仅在组件上工作以使其更快会好得多。这是一篇关于如何加速 jquery 代码的好博文。
如果您真的想继续您在问题中建议的工作流程,我建议您查看jsDom库,但我真的不推荐它。