javascript - Javascript html リフロー数

Question

次のような単純なコードを最適化する価値があるかどうか疑問に思っています。

var x1 = $div1.offset().left;
var y1 = $div1.offset().top;
var h1 = $div1.outerHeight(true);
var w1 = $div1.outerWidth(true);

何回のリフローを行っていますか? ブラウザーはそれらをすべて 1 回のリフローにまとめますか、それとも 4 回のリフローを引き起こしますか?

Answer 1

このコードにより、最大 4 回のリフローが発生する可能性があります。計算が必要な測定を行うたびに、offsetWidth、clientHeight、または計算された CSS 値へのアクセスなどのリフローが発生する可能性がありますが、DOM の変更は実行のためにキューに入れられます。場合によっては複数のリフローが発生するのを避けるため。

私が学んだことはさておき、このコードがテスト中に重大なパフォーマンスの問題を引き起こしているのを見たことがない限り、パフォーマンスの最適化を時期尚早にしないでください。

より多くのコードを見ずに質問の別の部分に答えるには、そのビットを最適化する価値があるかどうかを言うのは難しいですが、おそらく私が見た小さなものではそうではありません. 私ですが、最初からこのように書いていただろう：

var offset = $div1.offset();
var x1 = offset.left;
var y1 = offset.top;
var h1 = $div1.outerHeight(true);
var w1 = $div1.outerWidth(true);