Javascript 为高级模板在屏幕外呈现HTML（和CSS）

我正在为一个内部应用程序构建一个基于Javascript的客户端模板引擎。它从服务器加载基于HTML/CSS的模板，并将它们与基于HTML的contant（P、EM等）结合起来

模板基本上有固定大小的区域（通过CSS定义），内容应该放在这些区域/框中，如果内容不适合这些区域/框，那么其余的就放在另一个这样的内容框中，以此类推

这张图片希望能让你更容易理解我的意思：

假设整个过程是一个模板，其中的内容应该放在蓝色框中-它显然不适合第一个蓝色框，因此3个绿色块将附加到第二个框中，以此类推

请记住，蓝色框的大小、位置（和数量）可能因模板而异。内容也是如此（可以是小文本，也可以是大文本——可以是纯文本，也可以是H1、P、EM等格式。因此，所有内容都是可变的。文本大小也由模板通过CSS定义（因此不是固定值）

总之，经过一些实验后，我让它工作了，但现在我正试图优化整个过程以加快速度。我正在应用程序启动时预处理几十个模板，所以初始化需要一段时间

现在我们来回答我的问题——呈现基于HTML/CSS的模板（并知道内容框、字体等的大小）为了将它们与内容相结合，模板必须具有布局并插入DOM。这当然非常昂贵-因此我想知道是否有任何方法可以在屏幕外完成此操作？而不将它们呈现给浏览器

---

我在看documentFragment，当他们在屏幕外组装DOM时，他们没有布局。我的意思是，如果你创建一个documentFragment，在其中插入一个DIV，并通过CSS说DIV应该是150px宽的-它会记得它应该是150px宽的，但在你将片段插入到D之前它不会是150px宽的OM.

您是否尝试过使用一些好的模板引擎：？它应该足够快，并且使用

var someOffScreenDiv=$（''）会很有用使用jQueryTanks作为答案进行屏幕外DOM应该会很有帮助，但您建议的内容根本不相关。它所做的一切就是将文本放入模板中。请阅读我的问题-我正在做比这复杂得多的事情。我在模板中的容器之间流动文本。Mustache或任何其他非屏幕上的内容shelf JS模板引擎无法做到这一点。jQuery在很多方面都很好，但每次编写自己的JS都会更快地提高性能。$（''）可能是jQuery中createElement的缩写-它会在屏幕外创建一个DIV，但在将其推送到DOM之前它不会有布局。