問題タブ [reflow]

多くのブラウザのリフローを引き起こすアプリで作業しています。ここではパフォーマンスが重要な問題です。パフォーマンスの観点から DOM 要素によっては、CSS3 グラデーションとイメージ グラデーションのどちらを使用した方がよいでしょうか? CSS テキストの影とグラデーションを使用するページは、画像を使用してそれらの視覚効果を実現するページのようにリフローが遅くなりますか? また、使用できるリフロー テストはありますか?

オーバーフローを使用すると、Webkitでレンダリングの問題と思われる問題が発生しました。子divで、javascriptを使用して親divの高さを増やします。私は自分の問題を次のサンプルコードに要約しました。

このソースからページを作成し、WebKitブラウザー（Safari、Chrome）でレンダリングします。[展開]ボタンをクリックすると、オーバーフローしたdivが非表示になっていることがわかります。設定され、展開された親divの高さに基づいて表示されるはずです。表示されません。Gecko（Firefox）およびTrident（ID）ブラウザーでは、これは正常に機能します。

回避策についてのアイデアや提案はありますか？基本的に、親div内にテキストを含むdivのテーブルを手動で作成したいのですが、テキストをdivの境界を超えて折り返したり拡張したりしたくありません。ページで起こっている他のことに基づいて、親divの高さを調整できる必要があります。

ありがとう！バート

CPUとWebKitが弱い組み込みハードウェアでJavaScript/HTML駆動のユーザーインターフェイスを設計しています。

パフォーマンスは理想的ではありません。特に、主観的で変化する意見ではなく、実際のパフォーマンスに関するハードデータを取得するために、リフローイベントとリペイントイベントのタイミングを調整したいと思います。

WebKitはリフローとリペイントをイベントハンドラーの後に延期するため、前後の通常の「getTime（）」を使用したタイミングは機能しません。

Speed Tracerでアプリのプロファイリングを試しましたが、計算が非常に安価で、リフローイベントがPCハードウェアに表示されません。ただし、リフロー/リペイントに重点を置いたツールはまだ役立つと思います。

このためのハードデータを取得する方法に関するヒントはありますか？

休眠行動について何かコメントはありますか?
互換モードの IE8 でテストしましたが、実際の IE7 の動作についてはわかりません。他のブラウザは正常に動作します。

ドキュメントがリフローすると、相対的に配置された画像の座標が失われます。
テキストが段落に追加された場合は動作が見られますが、さらに段落が追加された場合はそうではありません!

これを参照してください：

リフロー後に画像がどのように表示されるかご覧ください。

私は、(iframe ではなく) インライン fbml 手法を使用して埋め込まれた、Facebook の「いいね」ボタンを多数含むページを持っています。十分に単純です。ページは正常にレンダリングされ、すべてが期待どおりに機能します。

でも...

名前空間の宣言をドキュメントに追加するとxmlns:fb="http://www.facebook.com/2008/fbml"、IE で最初のページのレンダリング時間が大幅に低下することに気付きました。(ie8 開発者ツールを使用して) 詳しく調べると、ページが最初に読み込まれた後の短い期間、DOM 全体が何度も何度も「リフレッシュ」または「リフロー」しているように見えることがわかります。さらに調べてみると、リフローの数は明らか<fb:xxx>にドキュメント内の要素の数に比例していることがわかります。

xmlns 宣言を削除すると、問題が解消されます。

誰もこれを以前に経験しましたか？

アップデート：

さらに掘り下げると、いくつかの詳細が明らかになりました...実際、問題は、インラインスクリプトの再実行など、IEがページをリフローしていることです。原因は、xmlns 自体が含まれていることではなく、ボタン自体の xfbml レンダリングにあるようです。xmlns を追加すると、単に xfbml レンダリングがトリガーされ、xmlns がないと、ボタンは最初からレンダリングされませんでした。次のマークアップは、この問題を示しています。

つまり、上記の例を実行すると、3 つのアラートが生成されますが、表示されるのは 1 つだけです。

TextViewパラグラフにs とEditTexts を任意に混在させることができる、文を埋めるようなインターフェイスを作成しようとしています。

私はこの質問を見てきましたが、問題は [ TextView1、EditText、TextView2] があり、その内容がTextView11 行と 2 行目の 5 分の 1 を消費する場合、TextView1それが長方形であるため、幅全体にまたがる必要があることでした。 . EditTextこれは醜い次の行にプッシュします。

Androidの既存のものからそのような種類のViewGroup / Layoutを作成することは可能ですか、それとも最初からカスタムを作成する必要がありViewますか?

説明が下手な場合のために、このスクリーンショットで私の問題を説明しています。

どうもありがとうございました。

JavaScriptを使用して多くのスタイル変更を単一の要素に適用する場合、 phpied＆Writing Efficient JavaScript（スライド87）は次のことを示唆しています。

style.stylenameを使用してスタイルを1つずつ適用する代わりに、cssTextを使用するか、クラス名を変更すると、リフロー/リペイントが減少するため、すべてを一度に適用できます。

スタイルの変更が1つしかない場合、どちらが良いですか？

また

jsperf.com/csstext-vs-styles-singleは、スタイルの変更が1つしかない場合、個々のスタイル名を使用する方がcssTextよりも高速であることを示しています。

他にも考慮すべき要素はありますか？

ユーザーがサイズ変更可能な列を含む Web ページで作業していますが、列のサイズが変更されたときにリフローに問題があり、列が狭くなるにつれて要素が押し下げられて整列しなくなります。ただし、Google ドキュメントにはこの問題はないようです。ドキュメント リストのサイズを変更すると、テキストが次の行に押し出されるのではなく、切り捨てられます。CSSを見ても、どのCSSプロパティが原因なのか分からないので、どなたかアイデアがあれば教えていただければ幸いです。

次のjQueryで表示および非表示になるポップアップメニューdivがあります。

IE9 では正しく表示されます。

...しかし、IE7 では、いくつかの奇妙な白いマークが表示されます。

誰もこのようなものを見たことがありますか？IE7 を正しく表示するにはどうすればよいですか?

これが役立つ場合の HTML は次のとおりです。

CSS:

どうもありがとう

実際の例はここで見ることができます。

赤い四角 (表示中) は、緑の四角 (オーバーフローとして非表示) の真上にあります。正方形をクリックすると、両方の色付きの正方形が即座に完全に透明になります。さらに、赤い正方形の高さは 0 に設定されています。これによりトランジションが発生しますが、赤い四角が透明になったためトランジションは見えなくなります。

四角をもう一度クリックする前に、toggle関数を調べてください。JavaScript を見ると、トランジションを発生させることなく、赤い四角の高さが元の値にリセットされることが期待できます。none高さが変更されている間、トランジション プロパティが一時的に に設定されるため、トランジションを抑制する必要があります。

もう一度正方形をクリックします。両方の色付きの正方形は即座に完全に不透明になりますが、赤い正方形は高さが 0 から元の値に移行するにつれて下にスライドします。インライン スタイルによって設定された高さはtoggle、要素が表示されるまで関数によって削除されず、それまでに遷移プロパティもリセットされたかのようです。

リフローをトリガーすると、高さの変更が強制的に適用されるようです。(テストするには、次を含む行のコメントを外しoffsetParentます。) この動作はブラウザー (少なくとも Chrome と Safari、Firefox、および Opera) で発生するため、仕様の一部ではないのではないかと考えています。CSS Transitions Moduleを確認しましたが、成功しませんでした。この動作が発生する理由と、実装全体で一貫している理由はありますか?