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

Question

I am currently running AngularJS server-side using Node.js and jsdom . 我目前正在使用Node.js和jsdom在AngularJS服务器端运行。 It's working great, but I'm trying to optimize performance by caching the DOM generated by jsdom before the AngularJS scope is applied to the page. 它工作得很好，但是我想通过在将AngularJS范围应用于页面之前缓存jsdom生成的DOM来优化性能。 Trouble comes when I try to clone my cached DOM before applying the AngularJS scope for a given request. 当我尝试为给定请求应用AngularJS范围之前尝试克隆缓存的DOM时，就会出现问题。 Currently, I'm cloning the cached DOM by using jQuery (server-side): 当前，我正在使用jQuery（服务器端）克隆缓存的DOM：

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

Then, I create a new window using jsdom with no content inside the html tag (fast): 然后，我使用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
  }
);

The problem comes from newWindow.$("html").replaceWith(clone); 问题来自newWindow.$("html").replaceWith(clone); which generates this error: 生成此错误：

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

I understand the issue to be related to the fact that I'm trying to replace a DOM element within one document ( newWindow ) with a DOM element coming from another document ( cachedWindow ), but I can't think of any way around that. 我理解这个问题与以下事实有关：我试图用一个来自另一个文档（ cachedWindow ）的DOM元素替换一个文档（ newWindow ）中的DOM元素，但是我想不出任何办法。 This is important, because cloning the html element is about ten times faster (literally) than rebuilding the DOM from scratch with jsdom... 这很重要，因为克隆html元素（从字面上看）比用jsdom从头重新构建DOM快大约十倍...

Any suggestions? 有什么建议么？

Notes: 笔记：

On one hand, the solution I'm looking for needs to work with jsdom. 一方面，我正在寻找的解决方案需要使用jsdom。
On the other hand, I'm not married to jQuery. 另一方面，我还没有嫁给jQuery。 Any alternative would work just fine. 任何替代方案都可以。
Window cloning is required to prevent issues with concurrent requests and to support sessions. 需要窗口克隆以防止并发请求出现问题并支持会话。
For more background, please check CircularJS on Sutoiku 有关更多背景，请在Sutoiku上查看CircularJS

Solution: 解：

Offered by Jason Livesay , using document.importNode 由Jason Livesay使用document.importNode提供

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

Answer 1

When I google that "Wrong Document" thing I see a bunch of PHP XML stuff that mentions importNode. 当我用谷歌搜索“错误文档”时，我看到一堆提到importNode的PHP XML东西。 So maybe you can use that in JavaScript too: https://developer.mozilla.org/en-US/docs/Web/API/document.importNode 因此，也许您也可以在JavaScript中使用它： https : //developer.mozilla.org/en-US/docs/Web/API/document.importNode

Or maybe something like this: http://jsdom.wordpress.com/2011/03/14/appendchild-problem-in-google-chrome-and-safari/ 或类似以下内容： http : //jsdom.wordpress.com/2011/03/14/appendchild-problem-in-google-chrome-and-safari/

Also if you are looking to optimize that part, just to double check, you are saving the final HTML to disk right? 另外，如果您想优化该部分，只是仔细检查一下，您就是将最终的HTML保存到磁盘上了吗？ I mean you're not rendering the static page on every single request are you? 我的意思是您不是在每个请求上都呈现静态页面吗？

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

问题描述

1 个解决方案

解决方案1
1 已采纳 2014-01-12 04:05:06

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

问题描述

1 个解决方案

解决方案1 1 已采纳 2014-01-12 04:05:06

解决方案1
1 已采纳 2014-01-12 04:05:06