2011-07-31 4 views
4

私はJavaScriptでこれを行う:適用されるスタイルごとにリフローが1回発生しますか?

element.style.width="100px"; 
element.style.height="100px"; 

iは、右文書中の2回のリフローがあると言うことでしょうか?

、私はこれを行う場合:

element.setAttribute("style","width:100px;height:100px;")はわずか1リフローはありますか?

サイドの質問を(私は後者は単に他のすべての以前に設定されたスタイルをオーバーライドすることを承知しています):私たちは推測を停止し、ブラウザで起こっている正確にどのように多くのリフロー検査することができますどのような方法がある(クローム/ FF/etc)?

答えて

2

私はJavaScriptでこれを行うと:

element.style.width = "100pxに";
element.style.height = "100px";

私は文書に2回のリフローがあると言いますか?

ほとんどありそうもありません。リフローは(かなり)時間がかかるので、必要なときにのみ実行する傾向があります。たとえば、JavaScriptがレイアウトに依存するプロパティを読み込んだ場合などです。 offsetWidth。

しかし、詳細は実装に依存します。

+0

しかし、JavaScriptがレイアウトに依存するプロパティを読み取ったときにのみブラウザがリフローを適用することはできません。これがtrueの場合、ユーザーが幅を100pxと見なすことはできません幅に依存するプロパティ(およびリフローを引き起こす)言い換えれば、私がプロパティを読んだことがないならば、ユーザは幅が "登録されている"とは見なさないでしょう。 – Pacerier

+0

@Pacerier - ユーザの画面が更新されるたびに。もちろん、必要に応じてリフローが行われますが、JavaScriptの行ごとに画面が更新されることはありません。しかし、マットがリンクしている質問を見てください。そこの答えは私よりはるかに優れています。 – Alohci

+0

@Alohci +1答えの中のベスト・ラインは「詳細は実装に依存する」と思う。それは間違いなくブラウザからブラウザに変わります。たとえばクロムでは、できるだけ長くリフローをやり直すように思えます。 IE(少なくともイヤラーのもの)は私の経験でもっと頻繁にリフローするようです。 –

4

はい、最初の例では2回、2番目の例では1回だけリフローされます。チェックアウト:When does reflow happen in a DOM environment?

+0

btwあなたはどのように多くのリフローがブラウザで行われているかを調べることができますか? – Pacerier

関連する問題