要素を持つフォームがあります。ドロップダウン値に基づいて動的に、メイン フォーム要素ごとに複数の要素を持つフィールドセット/サブ フォームを作成する必要があります。サブフォームの値を保持しながら、フォーム要素のサブフォーム間を移動するときに、サブフォームの表示/非表示に注意する必要があります。
どの方法が効率的だと思いますか?
DOM に 1 つのサブフォーム/フィールドセットを持ち、JS の内部でマスター JS オブジェクト (JSON の名前:値のペアなど) を維持します。これには、サブフォーム要素のフォーム要素、データ、およびメタデータの情報が含まれます。送信するときは、送信するだけです。文字列化された JS オブジェクトをサーバーに送信します。
この方法では、新しいフィールドセットを追加するか、フィールドセットを編集する必要があるたびに、DOM 要素を作成および削除する必要があります (ユーザーは既に作成されていると考えます)。
または
DOM でフィールドセットのクローンを作成し、必要に応じて display:none/block を実行します。メタデータはサブフォーム要素の属性として保存され、データは DOM 自体にあります。送信する前に、メイン フォーム要素のフィールドセット内のサブ フォーム要素を (セレクターを使用して) ループし、同様の JS オブジェクトを構築し、文字列化してサーバーに送信します。
この方法では、DOM 要素に属性を設定し、必要に応じて display:none/block を実行し、送信直前に最終ループを実行してマスター JS オブジェクトを形成します。
スクリーンショット:
上記の2つの方法のパフォーマンスの違いを理解するためにjsperf.comを使用する方法がわかりません。
あなたの考えを共有してください。