2

いくつかの情報を含む JavaScript オブジェクトがあります。

このオブジェクトから HTML を作成するには、2 つのオプションが考えられます。どれが正しいやり方なのか疑問に思っていましたが、これはすべて好みですか？

1) JavaScript でこの配列をループし、Jquery で HTML を作成しますか?

2) Ajax post/get オブジェクトを PHP に渡し、このオブジェクト (php 配列) をループして、そのように HMTL を作成しますか? 次に、HTML を含む json でエンコードされたオブジェクトを返し、それを div に追加しますか?

構築するために現在行っていること

    var OutterDiv = $(document.createElement('div'));

    for loop{
        OutterDiv.append("<span>SOME INFO</span>");


        var InnerDiv = $(document.createElement('div'));
        for loop{
            InnerDiv.append("<span>SOME INFO</span>");
            InnerDiv.append("<span>SOME INFO</span>");
        }

        OutterDiv.append(InnerDiv);
    }


    $("#content").append(OutterDiv);
4

3 に答える 3

2

オブジェクトをループして、JavaScript から HTML 文字列を作成してみませんか? 次に、その文字列を必要な場所に挿入しますか? これがやりたいことを実現する最速の方法だと思います。主なアイデアは、文字列の連結は DOM 要素の挿入よりも高速であり、おそらく Http リクエストによって引き起こされるレイテンシーよりも高速であるということです。

**編集**

明らかに、IE は文字列の連結が遅く (大きな驚き)、配列を使用する方が優れています。例 ：

var html = [];
for (...) {
   html.push( <some html content from your object here> );
}
$(selector).html(html.join(''));

// find the elements you need to handle and perform bindings here
// ex: $('#someelment').click(...);

これはおそらくあなたが得ることができるのと同じくらい速いです。

**更新**

JavaScript を使用して HTML を構築するタスクを実行する方が一般的に高速ですが、いくつかのテストの結果、文字列の連結や配列の構築は、テキスト ノードの作成よりも高速ではないようです。このテストは、jsfiddle.netで表示およびフォークすることができます。または、目的をアーカイブするためのものです。

function runTest(testFn, duration) {

    var endTime = +new Date() + duration;
    var runs = 0;
    var charCount = 0;

    while (+new Date() < endTime) {
        charCount += testFn();
        ++runs;
    }        
    teardown();

    //console.log(testFn.title, 'ran', runs, 'times.');
    $('#log').append($('<div></div>').text(testFn.title + ' ran ' + runs + ' times (' + (charCount/1000) + ' cps).'));
}

///

function teardown() {
    while (targetDiv.firstChild) {
        targetDiv.removeChild(targetDiv.firstChild);
    }
}

///

var testData;
var sample, sampleData;
function generateTestData() {
    testData = {};
    for (var i=0; i < (Math.random() * (sample[1]-sample[0])) + sample[0]; i++) {
        testData['item'+i] = randomString();
    }
}


function randomString()
{
    var text = "";
    var possible = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz 0123456789";

    for( var i=0; i < (Math.random() * (sampleData[1]-sampleData[0])) + sampleData[0]; i++ )
        text += possible.charAt(Math.floor(Math.random() * possible.length));

    return text;
}

function shuffle(arr) {
    var len = arr.length;
    var i = len;
    while (i--) {
        var p = parseInt(Math.random()*len);
        var t = arr[i];
        arr[i] = arr[p];
        arr[p] = t;
    }
    return arr;
};

///

var $targetDiv = $('#targetDiv');
var targetDiv = document.getElementById('targetDiv');

///

function jq() {

    var html = [];
    var count = 0;

    for (var key in testData) {
        count += testData[key].length;
        html.push('<div>' + testData[key] + '</div>');
    }

    $targetDiv.html(html.join(''));

    return count;
}

function inner() {

    var html = [];
    var count = 0;

    for (var key in testData) {
        count += testData[key].length;
        html.push('<div>' + testData[key] + '</div>');
    }

    targetDiv.innerHTML = html.join('');

    return count;
}


function dom() {

    var root = document.createElement('div');
    var node;
    var count = 0;

    for (var key in testData) {
        count += testData[key].length;
        node = document.createElement('div');
        node.appendChild(document.createTextNode(testData[key]));
        root.appendChild(node);
    }
    targetDiv.appendChild(root);

    return count;            
}

///

jq.title = 'jQuery .html';
inner.title = 'innerHTML';
dom.title = 'DOM';

///

sample = [10, 100];
sampleData = [100, 1000];
generateTestData();

var duration = 1000;
var testFn = shuffle([jq, inner, dom]);

$.each(testFn, function(k, fn) {
    setTimeout(function() { runTest(fn, duration); }, 0);
});
​

全体として、各メソッドは特定の条件下 (大量または少数のデータ、長いまたは短い文字列など) ではより効率的ですが、DOM メソッドは一般的にすべてのケースで高速に見えます。

それで、あなたはそれを持っています。最初のテストケースを提供してくれたGGGに感謝します。

于 2012-05-18T15:28:34.827 に答える
1

JavaScriptで行います。すでに javascript でデータを持っている場合、PHP にそれを行わせるためにサーバーに余分に移動する (javascript ブローカーにその接続を許可する) のは無駄です。集中的な計算であれば、速度のために PHP に任せたほうがよいかもしれませんが、そうでないと無駄に思えます。

于 2012-05-18T16:29:47.620 に答える
0

JSON.stringify(array) を使用して JavaScript で配列をエンコードし、次に $array=json_decode($_POST['jsondata']); を使用できます。PHPスクリプトでそれを取得します。

于 2012-05-18T15:28:11.470 に答える