内部アプリ用の Javascript ベースのクライアント側テンプレート エンジンを構築しています。サーバーから HTML/CSS ベースのテンプレートを読み込み、それらを HTML ベースのコンテンツ (P、EM など) と結合します。
テンプレートには基本的に、コンテンツが収まるはずの固定サイズの領域 (CSS で定義) があります。コンテンツがそれらの領域/ボックスに収まらない場合、残りは別のそのようなコンテンツ ボックスに移動します。
この画像が私の言いたいことを理解しやすくすることを願っています:
.
全体が 1 つのテンプレートであり、コンテンツが青いボックスに収まるようになっていると想像してください。明らかに最初の青いボックスには収まらないため、3 つの緑のブロックが 2 番目のボックスに追加されます。
青いボックスのサイズ、位置 (および数) は、テンプレートによって異なる場合があることに注意してください。同じことがコンテンツにも当てはまります (小さなテキストでも大きなテキストでもかまいません。純粋なテキストでも、H1、P、EM などの書式設定でもかまいません。したがって、すべてが可変です。テキストのサイズは、テンプレートによっても定義されます。 CSS (固定値ではない)。
とにかく、いくつかの実験の後、私はそれを機能させましたが、現在、全体を最適化して高速化しようとしています。アプリケーションの開始時に数十のテンプレートを前処理しているため、初期化に時間がかかります。
HTML/CSS ベースのテンプレートをレンダリングしてコンテンツと組み合わせる (コンテンツ ボックス、フォントなどのサイズを把握する) には、テンプレートにレイアウトを設定し、DOM に挿入する必要があります。もちろん、これには非常にコストがかかります。そのため、これをオフスクリーンで行う方法があるかどうか疑問に思っていました。それらをブラウザにレンダリングせずに？
documentFragments を見ていて、画面外で DOM を組み立てている間、レイアウトがありません。つまり、documentFragment を作成する場合、そこに DIV を挿入し、CSS を介して div の幅を 150 ピクセルにする必要があるとします。 DOM にフラグメント化します。