Question

我有一个包含一些信息的JavaScript对象。

我有两个选项，我可以想到从这个对象创建HTML。我想知道哪一个是正确的做事方式，这只是所有的偏好？

1）使用JavaScript循环遍历此数组并使用Jquery创建HTML？

2）Ajax发布/获取PHP对象并循环遍历此对象（php数组）并以这种方式创建HMTL？然后返回一个带有HMTL的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);

Answer 1

为什么不循环访问该对象并从JavaScript创建HTML字符串？然后在任何需要的地方插入该字符串？我相信这是你能完成你想要做的最快的方式。主要思想是连接字符串比插入DOM元素更快，并且可能比Http请求引起的延迟更快。

** 修改 **

显然，IE在字符串连接（大惊喜）和使用array is better时速度较慢。示例：

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初始测试用例。

Answer 2

在javascript中执行此操作。如果你已经拥有javascript中的数据，那么额外的访问服务器让PHP做（让javascript代理连接）是浪费。如果这是一个密集的计算，让PHP因为速度而这样做可能是有意义的，但除此之外，似乎是浪费。

Answer 3

你可以使用JSON.stringify（array）在JavaScript中编码你的数组，然后使用$ array = json_decode（$ _ POST ['jsondata']）;在你的PHP脚本中检索它。

创建HTML的最佳实践（PHP或Jquery）？

3 个答案: