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

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

有人能推荐我在JAVAScript或JQUERY世界中可以看到的特性或函数吗

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

我很感激你的想法

短暂性脑缺血发作

编辑只是为了添加我可以做这个服务器端（有限的资源）或限制条目（同样是服务器端）无论何时我都试图下载用于脱机使用手机（或浏览器）上的数据和过程

函数showResultjsonp（）{
var retrieveddodlocaldata=localStorage.getItem（jsonpservice）；
var json_parsed=$.parseJSON（retrieveddodlocaldata）；
for（var d=0；dEvent'+parseddata.dataitem.4+'+unittype+'
检索'+parseddata.dataitem.5+'
影响'+parseddata.dataitem.6+'
延迟
Lat/Long'+parseddata.dataitem.7+'/'+parseddata.7+'
对parseddata.Item.8+'>dataitem有效）；
}
$（'div[data role=collapsable]）.collapsable（）；
};

---

由于本页上的贡献，解决方案

函数showResultjsonp（）{
var retrieveddodlocaldata=localStorage.getItem（jsonpservice）；
var json_parsed=$.parseJSON（retrieveddodlocaldata）；
var datatemplate=Hogan.compile（“”）；
//存储所有渲染项
var结果=”；
for（var d=0；d

处理数量不太多的DOM元素时，jQuery代价高昂。 我强烈建议您使用一些模板引擎将模板文本编译成javascript函数。您可以通过twitter使用。它将模板编译成javascript函数，您可以根据需要多次重复使用

下面是一个简单的例子：

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

然后使用它：

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

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

胡子：

霍根：

编辑：

就像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);

//创建模板
var template=“…”；
//编撰
var temp=hogan.compile（模板）；
//存储所有渲染项
var结果=”；
对于（…）
结果+=模板呈现（currentJsonParsedElement）；
}
//然后，在DOM中一次插入所有项
$（“#事件列表”）。追加（结果）；

---

事实上，小胡子可以帮你做这个循环。查看mustache文档了解详细信息。

除了模板之外，您可能还需要研究如何使用插入HTML节点。您可以创建一个片段，在不接触DOM的情况下向其中添加几个元素，然后在一个操作中将它们一起插入，而不是将它们逐个放入DOM（这是“昂贵的”）。此示例来自谷歌的页面：

函数addAnchors（元素）{
var anchor，fragment=document.createDocumentFragment（）；
对于（变量i=0；i<10；i++）{
anchor=document.createElement（'a'）；
anchor.innerHTML='test'；
片段。附加子对象（锚定）；
}
元素。子元素（片段）；
}

由于本页的贡献，解决方案

函数showResultjsonp（）{
var retrieveddodlocaldata=localStorage.getItem（jsonpservice）；
var json_parsed=$.parseJSON（retrieveddodlocaldata）；
var datatemplate=Hogan.compile（“”）；
//存储所有渲染项
var结果=”；
for（var d=0；d

我的第一个想法是，使用模板。我猜这与您不断使用

.innerHTML

有关，我相信这是

$.html（）

的背后，所以

$.clone（）

也可能提供改进。除了Jared所说的，您可以先创建一个空的jQuery对象，将所有新元素添加到其中，然后立即将它们添加到页面中。这样可以避免页面回流。此外，还可以缓存您的

$（“#事件列表”）

DOM选择在循环之外。您好Jarred-谢谢您的评论-您能在“使用模板”上展开一点吗？不确定它在代码中是否出现，但我正在尝试动态创建一个折叠和填充的li…不仅解析json很慢，而且从localStorage读取也可能很慢，尤其是在手机上：。也许您最好在localStorage中存储一组50个项，可以逐个解析。感谢所有Espe Devundef…looking从纸上看，这似乎是最好的选择。我将在第二天左右低头并尝试一下..../PHPWASSOMUCHEASIERLOLL对于那些感兴趣的人，我发现这是另一个带有JSFIDLE的示例。Getting Uncaught TypeError:object不是第二个示例的函数…找到了许多单行数据的好示例我可以使用var template=“Hogan.compile（…）；调用Hogan；但是这个方法会给我在同一时间渲染每一行的效果，而不是存储一个单独的渲染

var templ = hogan.compile(template);

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

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

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

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