4

PhoneGap と JQuery Mobile を使用してアプリを作成しています。ここでは、バックエンド サービスからデータを読み取り、受信した内容に基づいてリスト項目 (場合によっては div も) を追加/削除する予定です。当然、長時間の使用でアプリの速度が低下しすぎないようにしたいと考えています。

HTML の追加/削除に関して、一般的なベスト プラクティスはありますか? 私はこれにかなり慣れていないので、DOMがどのように機能するかなどをよく理解していません。

現在、JQuery の追加を使用して HTML の行をコンテナー div に追加し、.html("") を使用して要素を削除しています。これは受け入れられますか、またはこれを行うためのより良い方法はありますか?

編集: ご参考までに、私は JQuery Mobile 1.1.0 と Phonegap 1.9.0 を使用しています。参考になるかどうかわかりませんが、どうぞ。

できるだけ多くのモバイル デバイスでこのアプリを使用したいと考えていますが、現在は iOS と Android が最大の市場だと思います。

明確にするために、私は実際に大きな問題に遭遇したことはありません (まだ)。後で何かに遭遇し、問題を修正するために大量のコードを実行する必要がないようにしたかっただけです。.append よりも innerHTML() を使用する、remove と innerHTML("") などを使用するなど、一連のベスト プラクティスに同意できれば、誰にとっても役立つと考えました :P

いくつかのコード例:

function changeList(sel){
            var xmlfolder="/"
            var name = sel[sel.selectedIndex].value+".xml";                
            var location= xmlfolder+name;
            var list = document.getElementById("opList"); //opList is the container
            list.innerHTML=""; //what i'm using to remove the previous occupant
                               //: is there a better way of doing this?
            //reading stuff                
            $.ajax({

                type:'GET',
                cache: false,
                url: location,
                dataType:"xml",
                success: function(data){
                    xmlInfo=data;


                    var i=0;
                    $(data).find("data").each(function(){

                        var string = "";
                        var sName=$(this).find("name").text();

                        string +=("<li>");
                        string +=("<a href=#details data-transition = slide >");
                        string+= sName;
                        string+="</a></li>";
                         $('#opList').append(string); //is there a better way of appending?
                         i++;

                    })

                    $('#opList').listview('refresh');

                },                    
                error:function(e){
                    alert("failed D:");
                    console.log(e);
                }

            });

        }
4

1 に答える 1

4

私はあなたにいくつかのアイデアを投げかけるつもりです。

ループなどで小片を追加するのではなく、必ず HTML を作成して一度に DOM に追加してください。

例（これを行う）：

var arr    = ['Title 1', 'Title 2', 'Title 3'],
    output = [];

for (var i = 0, len = arr.length; i < len; i++) {
    output.push('<li>' + arr[i] + '</li>');
}
$('ul').append(output.join(''));

コンテナーを 1 回だけ選択する方法に注意してください。これが重要です。ループ内で DOM 要素を参照する必要がある場合でも、ループ外で要素への参照をキャッシュするようにしてください。そうしないと、繰り返しごとに余分な作業が不要になります。 .

たとえば、次のようにします (DOM 要素のキャッシングを除いて、これを行わないでください)。 

var arr = ['Title 1', 'Title 2', 'Title 3'],
    $ul = $('ul');

for (var i = 0, len = arr.length; i < len; i++) {
    $ul.append('<li>' + arr[i] + '</li>');
}

複雑な HTML 構造を DOM に追加する場合は、前と同じことを行い、「一時的な」コンテナを作成して作業を行い、その後、一度にすべてを DOM に追加します。例えば：

var $tmpObj = $('<div id="my-div" />').append(
    $('<span class="my-title" />').text('Title 1')
).append(
    $('<div class="my-description" />').append(
        $('<span class="my-copy" />').text('Blah Blah Blah')
    )
).on('click', function () {
    alert('Don\'t Touch Me!');
}).data('my-data-key', 'my-data-val');

$('#my-div').replaceWith($tmpObj);

オブジェクトに関連付けられたデータを保存するのが好きな$.data()ので、要素が削除されたときにデータも削除されるため、無駄なデータでメモリを使い果たすことはありません。

JSPerf.com を使用してください。適切に使用すれば素晴らしいツールです。テストを実行して、操作に対してどの方法がより高速かを判断できます。少し前にセットアップした例を次に示します: http://jsperf.com/jquery-each-vs-for-loops/2

不必要にグローバル変数を作成しないでください。これを行うと、それらの変数が検索されるときに余分なオーバーヘッドが発生します。この行は、AJAX コールバック関数の外部でアクセスされる場合を除き、するxmlInfo=data;必要があります。基本的に、関数 (またはネストされた関数) 内でグローバル スコープ内にある変数を検索するとき。最初にブラウザーは現在のスコープを調べ、次に現在のスコープの親スコープを調べ、グローバル スコープまで調べます。そのため、関数内の関数内でグローバル変数にアクセスしようとすると、ローカル スコープの変数を使用した場合の約 3 倍のルックアップを行うことになります。グローバル スコープの変数を使用する必要がある場合は、それを関数内にキャッシュし、関数内でローカル バージョンを使用して余分なループアップ時間を回避します。var xmlInfo=data;xmlInfo

于 2012-07-11T21:32:53.630 に答える