for循环性能测试

项目中遇到需要用for循环dom节点获取每个节点保存的数据,一共有8000多条数据,但是循环加载需要18秒左右才出来。
平时for循环中数据少感觉不出来,现在数据多了就有差别了。
部分代码如下

                
                var body = parent.layer.getChildFrame('body', index);
                var len = body.find("#selectUser .choose-r-item").length;	//获取选中节点
                var newArr = [];
                var d1 = new Date();

                for (var i = 0; i < len; i++) {
                     var nodesData = body.find(".choose-r-item").eq(i).find('.data-box').text();
                    newArr.push(JSON.parse(nodesData));	//将数据导入新的数组
                }
                var d2 = new Date();
                var x = d2 - d1;
                console.log("for计算结果:" + i + ",用时:" + x);

用时17秒多
;

优化代码后

                
                var body = parent.layer.getChildFrame('body', index);
                var len = body.find("#selectUser .choose-r-item").length;	//获取选中节点
                var newArr = [];
                var d1 = new Date();
                
                 // 把jquery对象提到前面来,因为这个只需要获取一次
                var _items = body.find(".choose-r-item"); // 这里有8576个dom

                for (var i = 0; i < len; i++) {
                    
                    // 减少了8000多次查找
                    var nodesData = _items.eq(i).find('.data-box').text();

                    newArr.push(JSON.parse(nodesData));	//将数据导入新的数组
                }
                var d2 = new Date();
                var x = d2 - d1;
                console.log("for计算结果:" + i + ",用时:" + x);

不到3秒,相差够大的。

原文地址:https://www.cnblogs.com/ybixian/p/9627013.html