問題タブ [reflow]

次のコードを使用して、HTML リストのマークアップを作成し、すべてのリスト要素にイベント ハンドラーをアタッチします。

リストは期待どおりに作成され、すべてが正常に機能しているように見えます。唯一の問題は、I am 4何liをクリックしても常にアラートが表示されることです。では、すべてのイベント ハンドラーが前のイベント ハンドラーを上書きしていると思いますが、なぜでしょうか?

また、この方法には大きな欠点が 1 つあります。イベント リスナーを追加する前に、すべてliを DOM に追加する必要があり、多くのリフローが発生するからです。すべてのli要素を に追加しulてから、完全なリストを DOM に追加することをお勧めします。この方法でイベント ハンドラを追加することはできますか?

たぶん、一般的にもっと良い方法がありますか？

CSS3 トランジションに基づいて、非 jQuery レスポンシブ イメージ スライダーを作成しています。

構造は単純です: ビューポートと内部の相対的に配置された UL と、左側にフロートされた LI があります。

私はそのような状況で問題に直面しています:

1. ユーザーが「前へ」の矢印をクリックします。
2. JS は、現在表示されている LI ノードの前に適切な LI を追加します。
3. none 0s linear今のところ、UL はアニメーションの変更を防ぐようにCSS トランジションを設定しています。この時点で、UL CSS の左の値をスライダー幅 (たとえば、0px から -1200px) だけ減らして、ビューを以前と同じにします。
4. 現在、UL の遷移プロパティを に変更していall 0.2s ease-outます。
5. 現在、UL の left プロパティを変更して、CSS3 アニメーションをトリガーしています。(たとえば、-1200px から 0px まで)。

何が問題ですか？ブラウザは変更を簡素化し、アニメーションを作成しません。

Stoyan Stefanov はここのブログでリフローの問題について書いていますが、この場合、要素にリフローを強制しようとしてもうまくいきません。

これは、これを行うコードの一部です (簡略化のためにブラウザーの接頭辞をスキップしました)。

ul.style.transition = 'none 0s linear 0s'; ul.style.left = '-600px'; ul.style.transition = 'all 0.2s ease-out'; ul.style.left = '0px';

実際の問題を確認するためのフィドルは次のとおりです。http://jsfiddle.net/9WX5b/1/

最近、ブラウザのリフローに関する Stoyan の次の記事を読みました。リフローとリペイントとは何か、それがパフォーマンスに与える影響、および改善方法について詳しく説明します。また、これを視覚化するのに役立ついくつかのサードパーティ製ツールも示しています。

サードパーティのツールを使用せずにブラウザーでリフローを検出し、これに基づいていくつかのメトリックを取得できるかどうかを調べ始めました (たとえば、javascript では、呼び出された ajax 呼び出しの数を計算できます)。

検索が失敗したため、いくつかのアクションでトリガーされたリフロー/再描画の数を計算できるかどうかをここで尋ねています。たとえば、関数がある場合

この機能によって発生したリフロー/再描画の回数を知りたいです。

この質問は、これを行うためのツールを探していることにも似ています (そのようなツールについては記事で説明されています)。

JS が有効になっている場合、ページの読み込み時または更新時にテストする方法は知っていますが、リフローごとにこれを行うことは可能ですか?

JS が有効になっているときにページが読み込まれるが、ブラウザー セッション中には無効になるとします。その後、ユーザーが実行した JS 依存のアクションはすべて失敗します。テストの結果、たとえば、これらの変更が有効になる前に Chrome を更新する必要があることがわかりましたが、Firefox は即座に適用されました。そのため、JS が無効になったときに元は正常に機能していたサイトが壊れ、ページの読み込み時に有効になるフォールバックが開始されませんでした。

これを些細な問題と呼ぶ人もいるかもしれません。この問題を解決できるフォールバックがあると確信していますが、リフローごとにページの状態をテストすることは可能ですか?

さらなるアイデア/提案/フォールバックの例を歓迎します。非 JQuery は大歓迎です。ありがとう！

この問題は、デザインの異なる複数の Web サイトで再現できます。残念ながら、全画面表示がないため、jsfiddle でこれを再現することはできません。

どちらの場合も、次のような body または div 要素があります。

そして、ページは 200 ミリ秒後に目に見えるリフローを取得します (onload イベントのどこか)。オートマージン使用時の横リフローの原因は？

例：

このページにはリフローがあります: http://www.numbeo.com/common/form.jsp?country=United+States&city=San+Diego%2C+CA&returnUrl=%2Fcost-of-living%2Fcity_result.jsp%3Fcountry%3DUnited% 2BStates%26city%3DSan%2BDiego%252C%2BCA

以下にはありません: http://www.numbeo.com/cost-of-living/calculator.jsp