問題タブ [reflow]

私は angularjs にかなり慣れていないので、奇妙なバグに遭遇しました。

CSSとHTMLでタイムラインを作り、それng-repeatを動的に生成していました。ただし、Webkit ブラウザーでは、タイムラインが正しく表示されません。

残念ながら、私のアカウントは新しいため、投稿に画像を埋め込むことができないため、ここにアップロードしました:

Webkit レンダリング http://i.imgur.com/Gdt2h5F.png

ただし、ウィンドウのサイズを変更したり、コンソールを開いたり、CSS プロパティを変更したりすると、タイムラインが正常に表示されるようになります: http://i.imgur.com/5yCXSfs.png

また、リフローを必要とせずに、Firefox または Safari でも問題なく動作します。

を調べました$scope.$applyが、角度を使用して値を生成しているため、それは機能しません。そのため、それを呼び出すことはできず、とにかく角度によって自動的に呼び出される必要があります。

<ul><li></li></ul>手動で作成すると、タイムラインが正しく表示されることに注意してください。

コードサンプルは次のとおりです。

また、このバグが発生すると、ページを変更したときにタイムラインのアーティファクトが他の部分ビューに表示されます。これは Chrome でのみ発生します (拡張機能なし)。

メーソンリーで DOM を注文するにはどうすればよいですか?

これが私のコードですhttp://jsbin.com/niqasiqisi/1/edit?html,css,output

これで、以下のように入力要素を並べたい

[1]|[4]
[2]|[5]
[3]|[6]

[2] を削除すると、[3] が [2] の代わりになり、[4] が下に来るはずです。石積みを使用して、このようなレイアウトを作成するにはどうすればよいですか。これを行う機能は何ですか？

画像が読み込まれるときにブラウザが画面をリフローさせずに、2 つのレスポンシブ画像を表​​示したい。私は現在、この回答の修正版を使用しています：responsive-design, image, how to set width/height to avoid reflow on image-load

単一のレスポンシブ イメージのフィドルは次のとおりです: https://jsfiddle.net/hxraak4u/

HTML

CSS

注: いくつかのインライン スタイルを使用しているのは、Razor を使用して画像の HTML を作成し、幅、高さ、高さ/幅 (下のパディング %) を設定しているためです。

現在、既に作業しているものを保持しながら、2 つの異なる高さの画像を並べて表示しようとしています。具体的には：

• 並べて表示する異なる高さの画像
• 画像は親 div の中央に配置されます
• 画像が 100% を超えて表示されない
• ディスプレイの幅が減少して 2 つの画像のいずれかの幅よりも小さくなる場合は、これらの 2 つの画像を垂直方向に積み重ねます。
• 表示がさらに縮小する場合は、幅と高さの比率を維持しながら、必要に応じて画像の幅を縮小します - 標準のレスポンシブ UI
• 印刷するときは、画像が 1 行に 2 つある場合も 1 つある場合も、画像をページに分割しないでください。
• HTML がロードされるとき、ディスプレイの幅と幅/高さの比率に基づいて各画像の垂直方向のスペースを予約します - リフローを防ぎます

JavaScript 関数の単体テストを作成し、関数がブラウザーでリフローをトリガーする頻度を測定したいと考えています。次の例を考えます。

単体テストは、すべての要素のリフローをトリガーするため、最初の例では失敗しますが、リフローをトリガーしないため、2 番目の例ではパスする必要があります。

私が望むものに近づく唯一のものは ですがmozPaintCount、リフローごとではなく、ペイントごとにのみ増加します。mozReflowCountまたはのようなものが必要ですmozRecalculateStyleCountが、どのブラウザーでも可能性のあるものは見つかりませんでした。そのようなプロパティが存在する場合、単体テストは次のようになります。

ブラウザーの開発者ツールを調べて、リフローまたは「強制同期レイアウト」がトリガーされた回数を手動で確認できることは知っていますが、JavaScript 単体テスト内からそのデータにアクセスする方法がわかりません。

Q: JavaScript を使用してブラウザーでリフローをカウントするにはどうすればよいですか?

私のウェブサイトにはスムーズに更新されるプログレス バーがあり、基本的にはゲーム要素であるため、ユーザーがサイトにいる間ずっと実行されます。コンソールを開くと、ブラウザ コンソール ログに大量のブラウザ リフローが発生していることに気付きました。私は基本的に、プログレスバーなしでログに記録されるブラウザのリフローはなく、実行中は毎秒約100のリフローがあります。そこで、次の 4 つの質問があります。

1) これはまずいですか？ウェブサイトの残りの部分はまったく遅れているようには見えませんが、これほど多くのものがブラウザに常に記録されているのはかなり当惑しているようです.

2) これは、リフローが発生するたびにページ全体を更新して再計算していますか、それとも進行状況バーの周りの領域だけですか? つまり、効率的な運用でしょうか。

3) これをオフにする方法はありますか?

4) 進行状況バーをスムーズに更新しながら、ブラウザのリフローを最小限に抑える方法はありますか? ちなみに、プログレスバーはブートストラップからのものです。

次のような単純なコードを最適化する価値があるかどうか疑問に思っています。

何回のリフローを行っていますか? ブラウザーはそれらをすべて 1 回のリフローにまとめますか、それとも 4 回のリフローを引き起こしますか?