javascriptを使用して、保留中のレイアウト変更をブラウザに強制的にフラッシュすることはできますか？

Question

私はJavascriptを使用してUIを構築するライブラリを持っています。動的コンテンツが含まれているため、コンテンツをブラウザに入れてレイアウトを変更してサポートし、結果に応じて別のロジックを実行する必要があります。たとえば、あるテキストがあふれているかどうかを検出し、省略記号で切り捨てます。

通常、私は変更を加え、レイアウトを更新して残りのロジックを呼び出すのを待つためにwindow.setTimeout（0）を使用して実装します。これは、異なるブラウザが最小限のタイムアウトを実装しているため、ちらつきを防止するには遅すぎるか、または多くのCPUを使用する速度が遅いため、明らかに最適ではありません。

理想的には、DOMの変更を行い、レイアウトを同期して更新し、直ちにインラインで「フィックスアップ」ロジックを実行したいと考えています。何か案は？

Answer 1

我々はIE8（Firefoxの、クロムは問題あり）とクレイジー問題が発生しました。子要素に対してtoggleClass（ 'enoMyAddressesHide'）を使用します。

.enoMyAddressesHide{display:none} 

ただし、親divコンテナは、その高さをリフレッシュ/再レイアウトしません。

setTimeout（）、要素の読み取り位置、読み取り幅、および高さは役に立ちません。 最後に、我々は実用的なソリューションを見つけることができます。

jQuery(document).ready(function ($) { 
    var RefreshIE8Layout = function() { 
     $('.enoAddressBook:first').css('height', 'auto'); 
     var height = $('.enoAddressBook:first').height(); 
     $('.enoAddressBook:first').css('height', height); 
    }; 

    $(".enoRowAddressInfo .enoRowAddressInfoArea ul li img.enoMyAddresses").click(function() { 
     $(this).parent().find(".enoAllInfoInAddressBox,img.enoMyAddresses").toggleClass('enoMyAddressesHide'); 

     RefreshIE8Layout(); // fix IE8 bug, not refresh the DOM dimension after using jQuery to manipulate DOM 
    }); 
}); 

それは愚かに見えるが、それは動作します！

Answer 2

私の理解では、CSSプロパティのいずれかを読むと、リフローが強制されます。 setTimeoutはまったく必要ありません。

Rendering: repaint, reflow/relayout, restyleからの抜粋：

しかし、時にはリフローを最適化からブラウザを防止し、そしてそれがキューをフラッシュし、すべてのバッチ処理の変更を実行する可能性があり、スクリプト。あなたは、本質的にノードに関するスタイル情報を要求している以上、このような

offsetTop, offsetLeft, offsetWidth, offsetHeight 
scrollTop/Left/Width/Height 
clientTop/Left/Width/Height 
getComputedStyle(), or currentStyle in IE 

として、これらのすべてのスタイル情報を要求する場合に発生し、そしてあなたがそれを行う任意の時点では、ブラウザはあなたに、最新のを与えることがあります値。そうするためには、すべてのスケジュールされた変更を適用し、キューをフラッシュし、弾を噛んでリフローを実行する必要があります。

Here's a list of the API calls/properties that will trigger a reflow。

Answer 3

私は、これは実際にあなたの実装のために働くだろうという考えを持っていませんが、：

var myDiv = document.getElementById("myDiv"); 
myDiv.innerHTML = "".concat(myDiv.innerHTML); 

私はinnerHTMLプロパティを設定すると、子要素のDOMのリロードを強制することを信じています。私はあなたがこれを全サイトにスコープしたらどうなるか分かりません。あなたはDOMのどこにでもよく夢中になっているように思えます。この方法では、あなたが既に定義したノード参照を強制的に未定義にするかもしれません。言い換えれば、

var mySelect = document.getElementById("mySelect");// suppose this lives in myDiv. 
var myDiv = document.getElementById("myDiv"); 
myDiv.innerHTML = "".concat(myDiv.innerHTML); 

上記の例では、mySelectへの参照が失われると思います。このようなことがたくさんあり、ゲッターではないフィールドを使用している場合（つまり、アクセスするたびに$（）または$ getまたはdocument.getElementById（..）このタイプのフラッシングがあなたを襲う可能性が非常に高いです。

また、手動でトラッキング/設定していないページ状態データを失うこともありえます。ユーザーからの新しいテキストを含むテキストボックス、ユーザーが新たにチェックしたチェックボックスなどは、この方法を使用してデフォルト状態に再初期化されますフラッシュする。

幸運なコーディング！

B

Answer 4

はい、できます。

ほとんどのブラウザでは、変更をキューに入れてバッチで実行することで、リフロープロセスが最適化されます。レンダリングツリーの変更をフラッシュするには、レイアウト情報（オフセット計算、getComputedStyle（）、およびスクロール値）を取得する必要があります。

var el = document.getElementById("my-element"); 
var top = el.offsetTop; 

上記のコードは、ブラウザが正しい値を返すためにレンダリングキューの変更を実行するよう強制します。

シンプルに！