0

スライドショー アプリではどちらがパフォーマンス的に優れているか、

A）データを配列に保存し、スライドが表示されるときにdom要素（主に画像とテキストを含むdiv）を作成し、スライドが消えるときに削除します

または

B）ページの読み込み時に（すでにサーバー側から）すべてのdivを作成し、z-indexごとに（display/visibilityプロパティを使用して）移動しますか？

選択に影響を与える可能性のある要因:

1) スライドは 5 枚または 50 枚のどちらでもかまいませんが、小規模/大規模なスライドショーにはどちらの方法が適していますか?

2) スライド間の切り替え時にトランジション効果が使用されます。たとえば、現在のスライドの下に 45 個の他のスライドが非表示になっている場合 (表示/可視性 css)、またはスタックされた z インデックスがある場合、フェードなどを使用するとより多くのリソースが消費されますか?ブラウザがページに他のオブジェクトをいくつ持っているかは問題ではありませんか?

- - - - アップデート - - - - -

もう1つの関連する質問（そして、これについてすでに1つの「クローズ」投票を取得しているため、このような別のスレッドをあえて開始することはありません。ここで続行することをお勧めします）：

同じページに複数のスライドショーがあります。現在、私はそれをIFRAMEで解決しています（私は知っていますが、もう誰も好きではありませんが、彼らは私のためにトリックをしてくれます）。

さて、私はブラウザ/クライアントのリソースに関して興味があります.2つのIFRAMEを別々のドキュメントとスクリプトプロセスで同時に実行するのはもっと貪欲ですか、それとも両方のスライドショーを1つのDOMに保持し、そこで両方のスライドショースクリプトスレッドを実行するのはもっと貪欲ですか. ?

4

3 に答える 3

2

最初の DOM ロードですべての要素をロードすることをお勧めします。「ブラウザに表示される」画像のzインデックスを移動すると、Google開発ツールがそれを呼び出すため、多くのリソース「ペイント」を使用しますが、まったくうまく機能しません。ブラウザは、各画像を「ペイント」する必要があります。hide()とshow()を使用します。基本的にdisplay:none;を設定します。. ブラウザーは、DOM の隠し要素を描画する必要はありません。

編集: 質問の更新: 以下の回答は iFrame の質問に回答しますが、リソースの占有に関する質問には対応していません。Chrome が iFrame をどのように処理するかはわかりませんが、すべてのスクリプトが 1 つのページにある場合、システム側のリソースを使用してデータを処理するのはブラウザーに任されています。Chrome の V8 エンジンは、js プロセスのマルチスレッド化に優れています。2 つのページでは、二重機能の作業によってリソースが追加されるだけでなく、chrome が iFrame で複数のスクリプトをマルチスレッド化できない可能性があります。確かではありませんが、可能性はあります。

編集: 質問の更新: iFrames? ひどい。JS を動的にできるときに、2 つのスクリプトを非同期で実行するのはよくありません。例えば。

最初のページのコード:

var imgArray = [];
function fetchImageArray() {
    $.ajax({
        url:"thispagesimages.php"
        success: function(data) {
            imgArray = data.imgs;
        }
    });
}

2 ページ目:

var imgArray = [];
function fetchImageArray() {
    $.ajax({
        url:"thatpagesimages.php"
        success: function(data) {
            imgArray = data.imgs;
        }
    });
}

または動的関数 - iFrame なし。 シングルページフェッチ機能

function fetchImageArray(urlg, ss) {
    $.ajax({
        url: urlg
        data: {whichSlideShow: ss}
        success: function(data) {
            return data.imgs;
        }
    });
}
于 2013-11-06T16:33:06.070 に答える
0

私の提案は、データを配列に保持し、生成されたページのキャッシュを保持することです。これには、現在表示されているページと隣接するページが含まれます。このようにして、ユーザーがページに移動したときにページが既に読み込まれているため、ページの遷移がスムーズになります。

ユーザーがページを切り替えると、キャッシュから最も遠いページを削除し、ユーザーがナビゲートした方向に次のページを生成します。これは、jQuery アニメーション関数 ( fadeIn()、fadeOut()、slideUp()など) で実行できます。

于 2013-11-06T16:41:59.807 に答える