0

私はさまざまなjQueryベースのスライドショースクリプトを見てきました。使用されているさまざまなアプローチと、それらがCSS3ベースの遷移とDOM操作をどのように処理するかに興味があります。スライドショーのjQueryベースのWordPressプラグインがありますが、少し古くなっているため、再コーディングに取り組んでいます。

私はjQueryに非常に精通しており、何年も使用しており、公開されているプラ​​グインを作成して、1920x1200以上の画像で50以上の画像が使用されている極端なユースケースを見てきました(主に写真家)。

このようなシナリオにこれまで以上にアプローチするための最善の方法について調査を行ったところ、2つの人気のある傾向が見られ、どちらが優れているのか疑問に思います。

1つ目は、「スライド」をコンテナ内に配置し、それをアニメーション化することです。多くの場合、コンテナはドキュメントフローから取り出して処理を高速化するために絶対的に配置されます(特にCSS3を使用する場合)。

次は、DOM内に4〜8個の「スライド」を保持し、ユーザーがナビゲートするときにそれらを追加/削除します。

これらのアプローチのどれがより良いアプローチですか?DOMの追加/削除は、行うのに最も費用のかかる変更と見なされますが、このようなシナリオでは、ドキュメントフローの外部にある50以上の非常に大きな画像を含むコンテナーを操作するよりも費用がかかりませんか?特にモバイルデバイスで。

4

2 に答える 2

1

スライドの数が非常に多い場合のメモリ使用量を最も効率的にしたい場合は、セット全体ではなく、一度に数枚のスライド画像のみをロードする必要があります(次の数枚のスライドが表示されます)。

同時に、表示する前にインターネット経由でローカルブラウザに画像をダウンロードするのが最も時間のかかる作業であるため、表示したいときにすぐに使用できるように、いくつかの今後の画像をプリロードする必要があります。

今後の画像をいくつかプリロードするだけの場合は、次のいずれかを実行できます。

  1. それらをJavaScriptで保持しているオブジェクトにプリロードしimg、必要に応じてDOMに挿入します。

  2. すでにDOMにあるが非表示になっているオブジェクトにそれらをプリロードし、imgそれを表示するときに表示することができます。

事前にいくつかの画像をプリロードし、以前に表示された画像を削除して、不要になったときにメモリに保持されない限り、これら2つの方法に大きな違いはありません。それらの間に(メモリ消費量に)測定可能な違いがあるかどうかを本当に知りたい場合は、測定できるようにパフォーマンステストを考案する必要があります。


私は過去に非常に多くの画像を表示できるスライドショーを作成しました。最も重要なことは、スライドショーの実行中に、メモリ使用量が蓄積されたり、メモリの使用量が増えたりしないようにすることです。スライドショーが最初に実行されるとメモリ使用量が増加し、その後、新しい画像をロードすると古い画像を解放する定常状態に達するため、メモリ使用量はフラットになり、増加を停止するはずです。スライドショーで実際に使用されているメモリを覆い隠すメモリキャッシュとレイジーガベージコレクションが行われているため、ブラウザでこれを測定するのはやや困難ですが、非常に多くの画像で十分に長く実行すると、永遠に上がっていくと、修正すべき問題があることがわかります。それが横ばい状態になり、上昇しなくなった場合は、おそらく問題ありません。

于 2013-02-15T15:57:30.697 に答える
1

私はその間に何かをします..dom内に表示されるものに加えて、いくつかの余分な画像を保持します..したがって、ユーザーが左右にスライドするたびに..ダウンロード済みの画像を表示するだけですそしてdomに追加されます(非常に安価な操作)..

同時に、dom から離れた画像を削除し、JavaScript 配列にキャッシュします。

そうすれば、あまりにも多くの画像でDOMに負担をかけることはありません(スライダーに含まれる画像の数は事前にわかりません)と同時に、DOMに関してあまりにも多くの画像を操作しようとしてUXを妥協することもありません

于 2013-02-15T05:00:49.873 に答える