循环时的dom操作

<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样式属性也是同样的道理。

更多资源：前端页面卡顿？可能是DOM操作惹的祸，你需要优化代码