0

このコードを使用して、相対的な高さを多くの div に設定しています。

$("#output div").each(function (index) {
    $(this).css({ "height": ($(this).height() * multiplier) + "px" });
});

これは非常にコストのかかる操作です。これを速度のために最適化する方法はありますか?

次のように絶対高さを設定します。

$("#output div").css({ "height": "20px" });

非常に高速です。悲しいことに、絶対値は必要ありませんが、乗数に相対的です。

--

編集：

高さが不明なこれらの div を常に追加しています。このようなもの：

$("#output div:first").remove();
$("#output").append("<div class=\"output-column\" style=\"height: " + 40 * Math.random() + "px;\">&nbsp;</div>");

つまり、基本的には 1000 div のグラフで、左側にポップし、右側に押し込んでいます (幅は 1 ピクセルです)。私が必要としているのは、これらの div が最も高い div に対して高さを動的に変更することです。したがって、最も高い div が親の高さを占め、他のものはそれに応じて高さを調整します。したがって、高さが 120% の div が入った場合は、それを 100% に調整し、他の部分を 20% 相対的に下に調整する必要があります。

4

2 に答える 2

1

ここでの問題はおそらく JavaScript ではありません (ただし、何をしているのかわからないとわかりません)。問題は、そのループで単一の要素の高さを設定するたびに、ブラウザーがレイアウトを再計算することです。したがって、1000 個の要素がある場合、レイアウトが 1000 回再計算されます。実際に必要なのは、最初にすべての高さを設定し、すべての設定後にレイアウトを再計算することです。

これどうやってやるの？ドキュメント フラグメントの場合: https://developer.mozilla.org/en-US/docs/Web/API/document.createDocumentFragment。

絶対配置要素が非常に高速である理由は、絶対要素がページ上の他の要素の配置に影響を与えないためです。それらはそれらの上に「浮かぶ」ので、必要なレイアウトの再計算ははるかに少なくなります。

于 2013-11-04T13:35:17.440 に答える