問題タブ [reflow]

ここで検索して何時間もグーグルで検索しましたが、この問題の解決策をまだ見つけていません...基本的に、各リストアイテムをホバーするとアイコンの巨大なリストがあり、アイテムのテキスト名が表示されます. ただし、幅をアニメーション化すると、ドキュメント全体が強制的にリフローされます。

これを回避する方法はありますか？jQuery と css の考えられるすべての組み合わせを試してみましたが、役に立ちませんでした。jQuery position() に基づいて位置をホバリングすると、(親 UL に対して) 絶対位置を追加しようとしましたが、期待どおりに機能しません。

各アイコンをホバーして、テキストを表示するために展開できるようにしたいのですが、残りのコンテンツをリフローするのではなく、単に固定位置にあるかのように動作し、残りの部分と対話しないようにしますコンテンツのレイアウト。

アニメーションのビットは次のとおりです。

また、実際のマークアップのビューも参考になると思います。

そして、結果を表示する画像は次のとおりです。

Webkit ベースのブラウザーの特定のビルドをベンチマークできるようにする必要があり、DOM 操作、メモリ制限などの特定の処理にかかる時間を測定しています。

以下のテストでは、10 個のかなり重い PNG グラフィックを同時にロードするのにかかる時間を記録しています。コードでは、読み込みが完了するまでの時間を計測できる必要があります。動的な Image オブジェクトに onLoad 関数を設定して、ミリ秒単位の時間を生成しようとしました。ただし、下のキャップに示されているように、負荷のデータ転送部分のみを記録しているため、読み取り値がごくわずかであり、データ転送時にかなりの (3000 + ms) 遅延があるため、不正確な読み取り値が示されています。画像は表示可能です -青でループしています。これはブラウザのリフロー サイクルです。

これをベンチマークできるように、ブラウザーがリフローを終了したときに記録するために使用できる Webkit のイベントはありますか? 私がテストしている Webkit のビルドには開発者ツールがないため、時間をミリ秒単位でコードに記録できる必要があります。Chrome では違いを確認できますが、2 つのビルドのパフォーマンスは大幅に異なるため、比較のために正確に数値化する必要があります。

たとえば、Javascript を使用して処理したい HTML ファイルがあるとします。例えば：

• spanまたはdivラッパーなどのいくつかの DOM 要素を追加します。
• 基本フォント サイズ、行の高さなど、ドキュメントのスタイルを少し変更します。
• ハイフンターを使用してエンティティを追加し­ます。

これを行う最も効率的な方法は何でしょうか。つまり、最小限のリフローで行いたいと考えています。

理想的なケースは、最初のレイアウトの前に JS コードを実行することです。これは可能ですか？ページが表示される前に高価なスクリプトを実行するのは一般的に悪い考えです。これは、ページがしばらく空白に見えるため、非常に悪い経験です. ただし、オフラインで作業するにはこれが必要であり、これは私のプロジェクトの問題ではありません。

または、すべての dom の変更を一度に行う方法、つまり、すべての変更が完了した後にリフローをトリガーする方法はありますか?

私はこのHTML構造を持っています:

そしてこの JavaScript コード:

http://jsfiddle.net/FF2Dr/

をクリックするh1と、特定の文字が特定の色になります。それに関する問題はパフォーマンスです。リフロー/再描画が多すぎます。parent.cloneNode(true)別の質問で、誰かがandを使うように言いましたparent.parentNode.replaceChild(clone, parent)。そのため、要素を複製して変更し、元の場所に戻し、リフローを 1 回だけトリガーします。

だから私は親要素を複製しました：

しかし、今どのように進めなければならないのでしょうか? どういうわけか要素を変更してからclone置き換える必要がありますが、$.eachもう一度使用して編集するのは良い考えではないようです。

http://jsfiddle.net/FF2Dr/1/

実際の問題を参照してください: http://jsfiddle.net/krtGd/1/

div次のようなフローティングに SVG 要素が埋め込まれています。

これは正常に機能します。divSVGの周りに期待どおりに収まります。ただし、JavaScript で SVG のサイズを変更すると、次のようになります。

...SVG は適切にサイズ変更されますが、その周りのボックスは変更されません。jsFiddle でわかるように、含まれdivているdisplay:inline-blockスタイルが float の代わりにある場合も同じことが当てはまります。

ここで奇妙なことに、これが単純なレイアウトの問題ではなくリフローの問題であると私に確信させているのは、Chrome コンソールの要素パネルで問題の要素のいずれかを調べると、div要素のサイズが正しく変更されることです。この問題は Google Chrome にのみ当てはまる可能性があります。Chrome OSX v.20.0.1132.57で発生していますが、Safari では発生していません。FF または IE ではテストしていません。

だから：Chromeでリフローを強制するにはどうすればよいですか?

div.offsetHeight、svg.getBBox()、および他のいくつかの亜種の検査を含む、通常の容疑者を試しました。

リフローを呼び出すことになっているすべてを試しましたが、それは起こりません。テスト関数を10回呼び出して、画面に要素を描画し、その要素を反復ごとに移動します。そのループはすぐに実行され、最終的には画面上の要素の動きを見る代わりに1つの画像を取得します。

すべての作業が完了すると、画面上のリフローと描画が呼び出されるようになります。しかし、私はそれぞれの絵を見たいです。

私が試したすべてのことは何の結果ももたらさなかった。動作するのはalert（）だけですが、ユーザーとの対話は必要ありません。

それが助けになるなら、私はWebkit1.2.5を使用しています。

私が十分に理解できないならば、私はよりよく説明しようとします。

これは私がリフローを強制しているコードです

私が必要としているのは、fTestInfo（i）が実行されるたびに画面に画像が表示されることですが、代わりに、最終結果しか表示されません。

fTestInfoはiに依存し、iの値だけ左に移動します。

私はPDFビューアを作っていて、リフローを作ろうとしています。PDF リファレンス 1.7 を読みました

http://wwwimages.adobe.com/www.adobe.com/content/dam/Adobe/en/devnet/pdf/pdfs/pdf_reference_1-7.pdf

「論理構造」(10.6)の節を読んだところ、リフローPDFを作れば十分だと思います。各章、各見出し、各段落をレイアウト付きで抽出できるので、それらを xml に配置して、javascript によるリフローで Web 表示として提示できます。

次に、「タグ付きPDF」（10.7）のセクションを読みました。リフローをサポートしていると書かれていますが、「論理構造」と比較して、ここでの別の利点はわかりません。誰でも説明できますか？

お時間をいただきありがとうございました！

スタイルプロパティを設定すると、ブラウザのリフローが発生することを知っています。レイアウトプロパティにアクセスしているときにもブラウザのリフローが発生する可能性はありますか？はいの場合、ブラウザのリフローが発生する理由を具体的に例を挙げてください。

カウントダウン カレンダーというアプリがあります(これは、Google カレンダーのイベントまでの日数をカウント ダウンするウィジェットです。マイナーなバグを修正します)。しかし、私が今修正しようとしているバグは、テキストを入力するたびに UI がリフローすることに関係しています。例を挙げて説明しましょう。キーボードが外されていないときの UI は次のようになります。

キーボードを外すとこんな感じです。

ユーザーがキーボードを使用しようとしたときに UI がひどく見えないようにするにはどうすればよいですか?

そのため、z-index を使用して同じサイズの要素のスタックを制御しようとしています。最近、z インデックスを通過するのを避け、できればブラウザーのリフローを回避することでパフォーマンス時間を改善するというアイデアは、代わりに親に追加する順序でレイヤーを並べ替えるというものです。

したがって、すべてのスタック div を保持するコンテナー div と、スタック div を参照する順序を反映するリンク リストがある場合、ユーザー入力に基づいて div を並べ替えます。次に、z インデックスを更新する代わりに、div 要素を再作成し、すべてを順番に追加します。だから、このようなもの：

だから私の質問は次のとおりです。

1. これにより、ブラウザーのリフローが n リフローから 1 または 2 (n は div の数) に減少しますか? 私がそれを正しく理解していれば、単一の要素の z-index を変更すると、ブラウザーの再描画またはリフローが発生するはずです。
2. 2 番目のアプローチは機能し、追加した順序で要素をスタックしますか?
3. 別のリンクされたリストを作成する必要がないように、DOM の子ノード構造を使用して子ノードを移動する方法はありますか? 現時点で使用できる removeChild および appendChild 関数のみが表示されます。

そして、グラフィックスとhtml5のものにこれを使用することを計画しているので、はい、パフォーマンスが問題です. だから、救えるところは救いたい。