更新 #2:
Chrome タイムライン ツールを使用して、再描画の回数を制限することができました (@iambriansreed の提案に感謝します)。この制限により、問題が解決されたように見えます (以下に回答を追加します)。
ただし、要素の innerHTML を変更するたびに「レイアウト」レンダリングを実行します (これは、私が作成しているプラグインで多く発生します)。私はそれを変更しながら作成しようとしましたposition: fixed
が(それ自体以外のレイアウトの他のものには影響しないため)、違いはないようです.
更新 #1:
これを引き起こしているのは特に関数ではありません.onload
...それは にも起こりますdocument.ready
。私はこれが起こっていると思います:
- document.ready の発火
- for ループ
- 幅を警告する(正しい)
- window.onload の発火
- for ループ
- 幅を警告する (正しい場合もあれば、0 の場合もある)
- 「divをカット」
- 塗り直す
再描画がいつ行われているのかを検出して、その時点で照会しないようにする方法について誰かが考えていますか? (PS IE が描画中に「一時停止」しないのはなぜですか?!)
では、for ループを2回実行し、毎回$(document).ready(...)
本体の幅 ( ) を警告します。$('body').width();
期待どおりの値が得られます (例: 1092)。
次に、別の for ループを2$(window).on('load', ...)
回実行し、毎回本体の幅を警告します。最初は 0 を取得し (ページはアラートの背後で完全に空白に見えます)、2 回目は予想される値 (例: 1092) を取得します。
これは、簡略化した例や他のブラウザー (Chrome、Safari、Firefox、IE9、IE10) では再現できない問題です。
私がテストできるアイデアやその他のことはありますか?
私は$(window).on('load', ...)
、幅に基づいていくつかの div をカットするために使用しています。これは、Web フォントに基づいているフォント サイズに基づいています (起動時に必ずしも読み込まれるとは限りません$(document).ready(...)
)。