Question

首先，这段代码确实有效，当它处理一些项目时，它的工作非常快。然而，当它解析的JSON虽然说了50多项时，在手机上测试时它可能是资源密集型的。

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

理想情况下，我认为如果我不能加快速度，我希望能够a）在检索时拆分JSON，并且能够有一个“更多”按钮来加载说下两个条目或者.. .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();
};

得益于此页面上的贡献＆amp; 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

jQuery处理不太多的DOM元素是很昂贵的。我强烈建议您使用一些模板引擎将模板文本编译成javascript函数。您可以通过Twitter使用 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有一个非常简单和优雅的模板符号。

小胡子：http://mustache.github.com/

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

修改

像贾瑞德和费利克斯在评论中所说的那样。你必须改进其他东西才能获得你想要的性能。

// 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);

实际上小胡子可以为你做 for 循环。有关详细信息，请查看小胡子文档。

Answer 2

除了模板之外，您可能还希望使用DocumentFragment来插入HTML节点。您可以创建一个片段，在不触及DOM的情况下向其添加多个元素，然后在一个操作中将它们一起插入，而不是将它们逐个放入DOM（这是“昂贵的”）中。此示例来自Google的页面Speeding up JavaScript: Working with the DOM：

function addAnchors(element) {
  var anchor, fragment = document.createDocumentFragment();
  for (var i = 0; i < 10; i ++) {
    anchor = document.createElement('a');
    anchor.innerHTML = 'test';
    fragment.appendChild(anchor);
  }
  element.appendChild(fragment);
}

Answer 3

得益于此页面上的贡献＆amp; 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);    
}

更快速地将JSON字符串解析为HTML5代码

3 个答案: