javascript - 将 JSON 字符串解析为 HTML5 代码的更快方法

Question

首先，这段代码确实有效，当它处理一些项目时，它的工作速度非常快。然而，当它解析的 JSON 有 50 多个项目时，它在手机上测试时可能会占用大量资源。

任何人都可以建议我可以在 JAVAScript 或 JQUERY 世界中查看的特性或功能吗？

理想情况下，我认为如果我不能加快速度，我希望能够 a) 在检索时拆分 JSON，并能够有一个“更多”按钮来加载接下来的 25 个条目，或者.. . b) 仅在需要在屏幕上显示时才解析每个条目。

我很感激你的想法。

TIA

编辑只是补充一下，我可以做这个服务器端(有限的资源)或限制条目(再次服务器端)我试图下载以供离线使用手机(或浏览器)上的数据和处理。 ...

function showResultjsonp() {
    var retrieveddodlocaldata = localStorage.getItem(jsonpservice);
    var json_parsed = $.parseJSON(retrieveddodlocaldata);

    for (var d = 0; d < json_parsed.svccurrentaiot_jsonp.length; d++) {
        var parseddata = json_parsed.svccurrentaiot_jsonp[d];


        $('#eventlist')
            .append($('<div data-role="collapsible" data-collapsed="true">')
            .html('<h3><img alt="' + parseddata.dataitem.1 + '" src="images/icons/' + parseddata.dataitem.2 + '.gif">  ' + parseddata.dataitem.2 + '</h3><p>' + parseddata.dataitem.9 + '</p>Event ' + parseddata.dataitem.4 + ' ' + unittype + '<br/>Retricted ' + parseddata.dataitem.5 + '<br/>Impact ' + parseddata.dataitem.6 + '<br/>Delay <br/>Lat / Long ' + parseddata.dataitem.7 + ' / ' + parseddata.dataitem.7 + '<br/>Valid to  ' + parseddata.dataitem.8 + '</div>'));
    }

    $('div[data-role=collapsible]').collapsible();
};

解决方案感谢本页的贡献 & http://twitter.github.com/hogan.js/

    function showResultjsonp() {
 var retrieveddodlocaldata = localStorage.getItem(jsonpservice);
 var json_parsed = $.parseJSON(retrieveddodlocaldata);
 var datatemplate = Hogan.compile('<div data-role="collapsible" data-collapsed="true"><h3><img alt="{{item}}" src="images/trafficicons/{{item}}.gif"></div>');
 // store for all rendered items
 var result = "";
 for (var d = 0; d < json_parsed.svccurrentaiot_jsonp.length; d++) {
    var parseddata = json_parsed.svccurrentaiot_jsonp[d];
   //result += render(parseddata);
result += datatemplate.render({"item" : parseddata.dataitem.item});
console.log(result);    
}

Answer 1

处理不太大量的 DOM 元素时，jQuery 的开销很大。我强烈建议您使用一些将模板文本编译成 javascript 函数的模板引擎。您可以使用 hogan 通过推特。它编译一个 mustache 将模板转换为 javascript 函数，您可以根据需要多次重复使用。

这是一个简单的例子:

var template = "<div><span>{{some-value-from-template}}</span> </div>";

然后你编译:

var templ = hogan.compile(template);

然后使用它:

var result = templ.render({"some-value-from-template": "hello world"});
$(result).appendTo("#someElementInTheDom");

Mustache 有一个非常简单和优雅的模板符号。

mustache :http://mustache.github.com/

霍根:http://twitter.github.com/hogan.js/

编辑:

就像 jared 和 felix 在评论中所说的那样。您必须改进其他方面才能获得您想要的性能。

// create template
var template = "<div>....</div>";
// compile
var templ = hogan.compile(template);
// store for all rendered items
var result = "";

for (...)
   result += templ.render(currentJsonParsedElement);
}

// and then, insert all items at once in the DOM
$("#eventlist").append(result);

实际上，mustache 可以为您执行for 循环。查看 mustache 文档了解详细信息。