如何使用 jQuery 克隆窗口服务器端？答案

【问题标题】：How can I clone a window server-side using jQuery?如何使用 jQuery 克隆窗口服务器端？
【发布时间】：2014-01-31 00:03:35
【问题描述】：

我目前正在使用Node.js 和jsdom 运行AngularJS 服务器端。它工作得很好，但我试图通过在将AngularJS 范围应用于页面之前缓存由 jsdom 生成的 DOM 来优化性能。当我在为给定请求应用 AngularJS 范围之前尝试克隆缓存的 DOM 时，麻烦就来了。目前，我正在使用 jQuery（服务器端）克隆缓存的 DOM：

var clone = cachedWindow.$("html").clone(); // This part works fine

然后，我使用 jsdom 创建一个新窗口，其中 html 标记内没有内容（快速）：

jsdom.env(
  '<!doctype html><html></html>',
  injectedScripts, // This is where I inject AngularJS, which works fine
  function(errors, newWindow) {
    newWindow.angular.bootstrap(newWindow.document, ['ngView']);
    newWindow.$("html").replaceWith(clone); // This part does not work
  }
);

问题来自newWindow.$("html").replaceWith(clone);，它产生了这个错误：

{ code: 4, message: 'Wrong document' }

我理解这个问题与我试图用来自另一个文档 (cachedWindow) 的 DOM 元素替换一个文档 (newWindow) 中的 DOM 元素有关，但我不能想办法解决这个问题。这很重要，因为克隆 html 元素比使用 jsdom 从头开始重建 DOM 快十倍（字面意思）...

有什么建议吗？

注意事项：

一方面，我正在寻找的解决方案需要使用 jsdom。
另一方面，我没有嫁给 jQuery。任何替代方案都可以正常工作。
需要克隆窗口以防止并发请求出现问题并支持会话。
更多背景信息，请查看 Sutoiku 上的CircularJS

解决方案：

由Jason Livesay提供，使用document.importNode

var original = cachedWindow.document.getElementById("app");
...
var clone = newWindow.document.importNode(original, true);
newWindow.document.getElementById("app").appendChild(clone);

【问题讨论】：

标签： jquery node.js angularjs

【解决方案1】：

当我在谷歌上搜索“错误文档”时，我看到一堆提到 importNode 的 PHP XML 内容。所以也许你也可以在 JavaScript 中使用它：https://developer.mozilla.org/en-US/docs/Web/API/document.importNode

或者可能是这样的：http://jsdom.wordpress.com/2011/03/14/appendchild-problem-in-google-chrome-and-safari/

另外，如果您正在寻找优化该部分，只是为了仔细检查，您将最终的 HTML 保存到磁盘，对吗？我的意思是你不是在每个请求上都呈现静态页面吗？

【讨论】：

我没有将最终的 HTML 保存到磁盘。相反，我使用简单的哈希（每页一个缓存窗口）将 HTML DOM 保存在内存中。在每次请求时，我都会查找该缓存，然后在提供结果页面之前应用实例化的页面模型（也称为 AngularJS 范围）。因此，页面保持动态，但避免了大部分昂贵的部分（HTML 解析和 AngularJS 引导）。
好吧，听起来不错，但是如果您知道数据何时发生变化，为什么不在呈现后将整个 HTML 缓存在内存中，并在数据更改时使该缓存失效？
因为几乎每个请求的结果页面都是不同的，尤其是当请求来自不同的用户时，并且用户的名称显示在页面的标题上。
杰森，你摇滚！您的第一个链接给出了解决方案。非常感谢！