<body> <div id="resText"></div> <div id="reshtml"></div> <script src="js/jquery.js"></script> <script type="text/javascript"> $(function(){ $.ajax({ type: "get", url: "test.json", data:{flag:"wap-mobile",mid:"m123456"}, //可选参数 dataType: "json", success: function(data){ console.log(data); //每次插入DOM (此方法不可取) var mylist1 = $("#resText"); var l = data.result; console.log(l); for (var j=0;j<l.length;j++) { console.log(data.result[j].brand_name); //var mylist1 = $("#resText"); 不能在此获取dom、否则length为多长则取多少次！ 不可取 mylist1.append("<li>"+data.result[j].brand_name+"</li>"); //每次插入DOM } //DOM已创建，只是改变值 （该方法可取） var mylist2 = $("#reshtml"), listli = ""; var l = data.result; console.log(l); for (var j=0;j<l.length;j++) { console.log(data.result[j].brand_name); listli +="<li>"+data.result[j].brand_name+"</li>"; } mylist2.html(listli); } }); }); </script> </body>
test.json数据：
{
"result":[
{
"brand_id": "6394",
"brand_name": "雪花秀/SULWHASOO",
"brand_mainpage_pic": "img/6394.png"
},
{
"brand_id": "6435",
"brand_name": "爱丽小屋/ETUDE HOUSE",
"brand_mainpage_pic": "img/6435.png"
},
{
"brand_id": "6676",
"brand_name": "A.H.C",
"brand_mainpage_pic": "img/6676.png"
}
]
}
==========================================================================
减少DOM操作：
虽然javascript性能上有了很大的提升，但是DOM操作还是很耗费资源的，需要减少对DOM操作。当在一个页面中插入大量的元素的时候，尤其重要。例如：
<div id="elem" ></div>
// 不好的方式 //var elem = $('#elem'); //for(var i = 0; i < 100; i++){ // elem.append('<li>element '+i+'</li>'); //} // 好的方式 var elem = $('#elem' ), arr = []; for(var i = 0; i < 100; i++){ arr. push('<li>element ' +i+'</li>' ); } elem. append(arr. join('' ));
将所有的元素缓存起来一次插入性能上会有所提升，因为只触发页面一次重绘。对于CSS样式属性也是同样的道理。