我正在为内部应用程序构建一个基于 Javascript 的客户端模板引擎。它从服务器加载基于 HTML/CSS 的模板，并将它们与基于 HTML 的内容（P、EM 等）相结合
模板基本上具有固定大小的区域（通过 CSS 定义），内容应该适合这些区域 - 如果内容不适合这些区域/框，则其余部分将转到另一个这样的内容框，依此类推。
这张图片有望让我更容易理解我的意思：
。
想象一下整个事情是 1 个模板，其中的内容应该适合蓝色框 - 它显然不适合第一个蓝色框，因此 3 绿色块将附加到第二个框，等等。
请记住，蓝色框的大小、位置（和数量）可能因模板而异。内容也是如此（它可以是小文本或大文本 - 它可以是纯文本或 H1、P、EM 等格式。所以一切都是变量。文本大小也由模板通过CSS（所以不是固定值）。
所以无论如何，经过一些实验，我让它工作了，但现在我试图优化整个事情以更快。我在应用程序启动时预处理了数十个模板，因此初始化需要一段时间。
现在我们来回答我的问题——要渲染基于 HTML/CSS 的模板（并知道内容框、字体等的大小）以将它们与内容结合起来，模板必须具有布局并插入到 DOM 中。这当然非常昂贵 - 所以我想知道是否有任何方法可以在屏幕外执行此操作？没有将它们呈现给浏览器？
正在查看 documentFragments，虽然他们确实在屏幕外组装 DOM - 他们没有布局。我的意思是，如果你创建一个 documentFragment，在其中插入一个 DIV，并通过 CSS 说 div 应该是 150px 宽 - 它会记住它应该是 150px 宽，但在你插入之前它不会是 150px 宽分片成 DOM。