我在SharePoint 2013页面上运行了Angular SPA。在代码中，我使用$ q从使用REST从10个不同的SharePoint列表中提取数据，然后将它们合并到一个JSON对象中以便在网格中使用。代码运行并输出预期的合并数据，但是它会泄漏并在一段时间后崩溃浏览器。
以下是服务中的代码：
factory.getGridInfo = function() {
var deferred = $q.defer();
var list_1a = CRUDFactory.getListItems("ListA", "column1,column2,column3");
var list_1b = CRUDFactory.getListItems("ListB", "column1,column2,column3");
var list_2a = CRUDFactory.getListItems("ListC", "column4");
var list_2b = CRUDFactory.getListItems("ListD", "column4");
var list_3a = CRUDFactory.getListItems("ListE", "column5");
var list_3b = CRUDFactory.getListItems("ListF", "column5");
var list_4a = CRUDFactory.getListItems("ListG", "column6");
var list_4b = CRUDFactory.getListItems("ListH", "column6");
var list_5a = CRUDFactory.getListItems("ListI", "column7");
var list_5b = CRUDFactory.getListItems("ListJ", "column7");
$q.all([list_1a, list_1b, list_2a, list_2b, list_3a, list_3b, list_4a, list_4b, list_5a, list_5b])
.then(function(results){
var results_1a = results[0].data.d.results;
var results_1b = results[1].data.d.results;
var results_2a = results[2].data.d.results;
var results_2b = results[3].data.d.results;
var results_3a = results[4].data.d.results;
var results_3b = results[5].data.d.results;
var results_4a = results[6].data.d.results;
var results_4b = results[7].data.d.results;
var results_5a = results[8].data.d.results;
var results_5b = results[9].data.d.results;
var combined_1 = results_1a.concat(results_1b);
var combined_2 = results_2a.concat(results_2b);
var combined_3 = results_3a.concat(results_3b);
var combined_4 = results_4a.concat(results_4b);
var combined_5 = results_5a.concat(results_5b);
for(var i = 0; i < combined_1.length; i++){
var currObj = combined_1[i];
currObj["column4"] = combined_2[i].column4;
currObj["column5"] = combined_3[i].column5;
currObj["column6"] = combined_4[i].column6;
currObj["column7"] = combined_5[i].column7;
factory.newObjectArray[i] = currObj;
}
deferred.resolve(factory.newObjectArray);
},
function (error) {
deferred.reject(error);
});
return deferred.promise;
};
这是CRUDFactory中的REST调用：
factory.getListItems = function (listName, columns){
var webUrl = _spPageContextInfo.webAbsoluteUrl + "/_api/web/lists/getByTitle('"+listName+"')/items?$select="+columns+"&$top=5000";
var options = {
headers: { "Accept": "application/json; odata=verbose" },
method: 'GET',
url: webUrl
};
return $http(options);
};
然后是控制器位：
$scope.refreshGridData = function(){
$scope.hideLoadingGif = false;
$scope.GridData = "";
GlobalFactory.getGridInfo()
.then(function(){
$scope.GridData = GlobalFactory.newObjectArray;
$scope.hideLoadingGif = true;
});
};
UPDATE 1：每个请求，这是HTML（只是一个我们正在使用angular-ui-grid的简单div）
<div ui-grid="GridOptions" class="grid" ui-grid-selection ui-grid-exporter ui-grid-save-state></div>
此代码首先声明一些get调用，然后使用$ q.all迭代调用并获取数据。然后它存储结果并将它们合并为5个总数组。然后，因为我的列表结构是正确的和静态的，我能够迭代其中一个合并的数组并将其他数组中的数据拉入一个我分配给factory.newObjectArray的主数组，我将其声明为我的服务中的全局，并用作我的网格数据源。
代码运行并且没有任何错误，但问题是（我相信）“getGridInfo”函数。如果我没有注释掉任何REST调用，浏览器将使用45 MB的数据，这些数据不会被GC拾取，然后在每次点击时复合，直到会话结束或崩溃。如果我注释掉除了一个的所有呼叫，我的页面只使用18.4 MB的内存，这很高，但我可以忍受它。
那是什么交易？我需要在某处摧毁某些东西吗？如果是这样，又怎么样？或者这与我正在使用的REST功能有关吗？
更新2：网格使用的返回结果（factory.newObjectArray）包含总共5,450个项目，每个项目在合并后包含大约80个属性。上面的代码是简化的，显示了每个列表中的几列的拉动，但实际上，我每个列表拉5-10列。
答案 0 :(得分：1)
当天你正在处理大量数据，因此内存问题可能永远是一个问题，你应该考虑是否需要将所有数据都存储在内存中。
您应该尝试实现的主要目标是限制数组的重复，并尽量保持内存占用尽可能低，并在您完成处理时尽快释放内存。
请考虑以下事项。你提到返回的实际列数超过了你的例子，所以我考虑了这一点。
factory.getGridInfo = function () {
var deferred = $q.defer(),
// list definitions
lists = [
{ name: 'ListA', columns: ['column1', 'column2', 'column3'] },
{ name: 'ListB', columns: ['column1', 'column2', 'column3'], combineWith: 'ListA' },
{ name: 'ListC', columns: ['column4'] },
{ name: 'ListD', columns: ['column4'], combineWith: 'ListC' },
{ name: 'ListE', columns: ['column5'] },
{ name: 'ListF', columns: ['column5'], combineWith: 'ListE' },
{ name: 'ListG', columns: ['column6'] },
{ name: 'ListH', columns: ['column6'], combineWith: 'ListG' },
{ name: 'ListI', columns: ['column7'] },
{ name: 'ListJ', columns: ['column7'], combineWith: 'ListI' },
],
// Combines two arrays without creating a new array, mindful of lenth limitations
combineArrays = function (a, b) {
var len = b.length;
for (var i = 0; i < len; i = i + 5000) {
a.unshift.apply(a, b.slice(i, i + 5000));
}
};
$q.all(lists.map(function (list) { return CRUDFactory.getListItems(list.name, list.columns.join()); }))
.then(function (results) {
var listResultMap = {}, var baseList = 'ListA';
// map our results to our list names
for(var i = 0; i < results.length; i++) {
listResultMap[lists[i].name] = results[i].data.d.results;
}
// loop around our lists
for(var i = 0; i < lists.length; i++) {
var listName = lists[i].name, combineWith = lists[i].combineWith;
if(combineWith) {
combineArrays(listResultMap[combineWith], listResultMap[listName]);
delete listResultMap[listName];
}
}
// build result
factory.newObjectArray = listResultMap[baseList].map(function(item) {
for(var i = 0; i < lists.length; i++) {
if(list.name !== baseList) {
for(var c = 0; c < lists[i].columns.length; c++) {
var columnName = lists[i].columns[c];
item[columnName] = listResultMap[list.name][columnName];
}
}
}
return item;
});
// clean up our remaining results
for (var i = 0; i < results.length; i++) {
delete results[i].data.d.results;
delete results[i];
}
deferred.resolve(factory.newObjectArray);
},
function (error) {
deferred.reject(error);
});
return deferred.promise;
};
答案 1 :(得分：0)
我建议添加某种分页选项...将所有结果添加到一个大列表中可能不是一个好主意。
接下来我建议不要使用ng-repeat或在重复功能中添加“track by”。
退房：http://www.alexkras.com/11-tips-to-improve-angularjs-performance/
提问您的查询，问题可能是渲染dom中的所有元素......这可能有点慢（调查）