1

首先，这段代码确实有效，当它处理一些项目时，它的工作速度非常快。但是，当它解析的 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);    
}
4

3 回答 3

2

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/

编辑：

就像 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 文档了解详细信息。

于 2012-07-30T22:57:13.593 回答
0

除了templates，您可能还想研究使用 aDocumentFragment来插入 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);
}
于 2012-07-30T23:10:06.047 回答
0

解决方案感谢此页面和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);    
}
于 2012-08-05T10:36:31.253 回答