0

私の質問は簡単です、

要素のオフセット位置を取得しようとすると、chrome devtool タイムラインでリフローが表示されるのはなぜですか?

私はこれを読みました=>

IE では、offsetTop、offsetLeft、offsetWidth、offsetHeight、scrollTop/Left/Width/Height、ClientTop/Left/Width/Height、getComputedStyle()、または currentStyle

上記のすべては基本的にノードに関するスタイル情報を要求するものであり、それを実行するたびにブラウザは最新の値を提供する必要があります。そのためには、スケジュールされたすべての変更を適用し、キューをフラッシュし、弾丸を噛み、リフローを行う必要があります。

そこで、chrome devtool タイムラインを開きましたが、これを試しても再計算スタイル (紫色のもの) が表示されませんでした:

element.offsetHeight;

レンダリングを確認する唯一の方法は、要素のスタイルを変更することです:

element.style.left = element.offsetLeft + 10 + "px";

ウィンドウの上部のスクロールを取得しようとするたびにリフローが発生することを期待していましたが、そうではありません:/

$(window).scrollTop();
4

1 に答える 1

1

私は（たぶん）クリストフのおかげで答えを見つけました

element.offsetWidth を読み取ると再計算/リフローが発生することをどのように視覚化できますか

わかりましたので、私が理解していれば：

スタイル情報が変更されていない場合、offsetHeight はレンダリング キューをフラッシュします (彼と彼の両親の場合)。その後、ブラウザは既に情報を取得しており、リフローを行いません :)

それが、リフローが見られない理由です:)

于 2013-10-17T13:36:20.877 に答える