AngularJS和Javascript大数据循环性能
AngularJS and Javascript large data loop performance
我一直在与一个长度在 100 ~ 200 个项目之间的大型数据数组作斗争,但可以更大。
数据项本身来自生成对象数组的自定义报告算法。
对象示例:
ts:budget: "foo"
ts:category: "foo"
ts:client: "foo"
ts:entryTime: 14.5
ts:project: "foo (00000000)"
ts:task: "foo"
ts:user: "foo"
ts:userGroup: "foo"
将该对象示例乘以 100 ~ 200,这就是我正在使用的。没什么大不了的,所以我没想到会有这么大的性能打击。我非常怀疑是我的工厂代码出了问题,但我已经通过并优化了几个领域(即替换角度。ForEach 循环与本机 for 循环)并恢复了性能,但在调用工厂时仍达到 25% 左右的 CPU 使用率。
工厂代码:
var report = '{"userID":"111868022517936189634", "jsonPayload":{"metrics":[{"ID":"ts:entryTime"}],"dimensions":[' + dimensions + '],"filters":[]}}';
var promise = $http.post("report.php?action=show&type=report&rangeStart=" + rangeStart + "&rangeEnd=" + rangeEnd, report).success(function(results) {
var uniqueArray = [];
for (m = array.length - 1; m >= 0; m--) {
var subItemUniqueArray = [];
if (uniqueArray.indexOf(array[m]) == -1) {
uniqueArray.push(array[m]);
for (k = uniqueRequireArray.length - 1; k >= 0; k--) {
uniqueRequireArray[k] == 'category' ? array[m]['categories'] = [] : array[m][uniqueRequireArray[k] + 's'] = [];
}
for (j = results.length - 1; j >= 0; j--) {
for (var x in results[j]) {
if (results[j].hasOwnProperty(x)) {
if (x == 'ts:' + type) {
var relationString = null;
type != 'project' ? relationString = array[m][relation] : relationString = array[m].name + ' (' + array[m].projectNumber +')';
if (results[j][x] == relationString) {
for (i = uniqueRequireArray.length - 1; i >= 0; i--) {
var obj = {
'item': results[j]['ts:' + uniqueRequireArray[i] + '']
}
if (subItemUniqueArray.indexOf(obj.item) == -1) {
uniqueRequireArray[i] == 'category' ? array[m]['categories'].push(obj) : array[m][uniqueRequireArray[i] + 's'].push(obj);
subItemUniqueArray.push(obj.item);
obj.entryTime = results[j]['ts:entryTime'];
if (uniqueRequireArray[i] == 'user') {obj.externalID = $userlookup.email(obj.item);} // add user externalID
if (uniqueRequireArray[i] == 'category') {obj.colour = $colourlookup.name(obj.item);} // add category colour
if (angular.isDefined(results[j]['ts:category'])) {
if (uniqueRequireArray[i] == 'budget') {obj.colour = $colourlookup.name(results[j]['ts:category']);} // add budget colour
if (uniqueRequireArray[i] == 'task') {obj.colour = $colourlookup.name(results[j]['ts:category']);} // add task colour
}
}
else {
obj.entryTime += results[j]['ts:entryTime'];
}
}
break;
}
}
}
}
}
}
}
}).error(function(data) {
$debug.admin('Service: Failed getting report results for overview', 'error', true);
}).then(function(results) {
return results;
});
return promise;
我怀疑有 5 个 for 循环是否非常适合性能,特别是因为最顶部的 for 循环是由馈送到服务中的另一个数组驱动的,该数组的长度可以从 30 到 200 个项目不等。
给定大约一分钟的时间,该函数成功创建正确的数据绑定并填充前端转发器,CPU 使用率下降。只是在那个时候,该应用程序完全无法使用。
任何帮助将不胜感激!
您的情况对于使用类似 http://danieltao.com/lazy.js/的东西可能是一个很好的案例,或者如果这对您来说还不可用,那么至少走 http://underscorejs.org/路线。
看起来您尝试实现的目标可能比使用您正在采用的迭代方法更好地解决。为什么?
- 它最终会更具可读性。
- 这些库是由那里的专家编写的。利用他们的专业知识可能是个好主意。
- 您的需求需要一种功能更强大和链式的方法(请参阅所有循环)。
一旦你这样做了,如果你仍然遇到性能问题 - 那么我建议用手写指令替换整个ng重复序列。
您可能想查找已经在线存在的内容,这有助于您朝这个方向发展。
http://tech.small-improvements.com/2013/09/10/angularjs-performance-with-large-lists/
- jQuery:循环一个具有不同超时值的循环
- 在循环中分配json值时,值被覆盖
- 如何在下面的ES6循环中获得前面的文本
- 为什么“;未定义的“;在JavaScript中结束循环
- 双“for”循环(循环)
- Javascript-在for循环上从var中的对象获取适当性
- 访问数组中的映射对象与循环/循环中的访问之间的差异
- 从复选框循环循环遍历 json 对象
- 如何在JS web worker中循环查询worker的可用性而不阻塞
- 在没有循环的情况下测试一组元素之间的html5数据相等性
- Jquery模板中的简单循环/循环
- 如何使用for循环循环遍历元素列表并动态设置元素样式
- 使用循环抽取出大型数组中的不规则性.JS
- 使用for循环循环函数的问题
- 在单独的文件中考虑模型:如何处理循环/循环依赖关系
- 使用数组和for循环循环背景色
- 我怎样才能在不让第一个循环循环到第二个循环的情况下嵌套for循环呢?
- 如何在javascript中将嵌套的for循环转换为声明性语句
- 循环图层的可见性
- 是否可以使用'for'实际循环循环之外的循环