日期过滤器导致 ng-repeat+other 过滤器在 IE11 中速度极慢
Date filter causes ng-repeat+other filters to be extremely slow in IE11
我有一个 ng-repeat 加上一些自定义过滤器和一个日期范围过滤器,在 Chrome、Mozilla、android 中都非常好用。但是在带有日期范围过滤器的 IE 中,一切都会停止。过滤器需要 10 秒来注册(我有过滤器绑定到复选框和自由文本),复选框动画也会延迟到数据加载。如果我删除日期范围过滤器,那么 IE 中的一切都很好。
列表是从天蓝色调用的API,列表目前有8500条记录,但长度无法避免,除了IE和日期范围功能外,所有运行都很顺利.
我已经尝试了一些方法来在 IE 中加快它的速度,例如将 :: 单一绑定添加到所有 {{ }} 值。
我也在使用分页并将 LimitTo 设置为 20
但是这些修复似乎是在 IE8+ 中的 ng-repeat 和过滤器通常很慢的情况下进行的,但是我的其他过滤器没有问题,它只适用于日期范围。
重复:
<div class="inner" ng-repeat="app in displayedData = ( applications
| orderBy: sortType:sortReverse
| filter: FAl
| filterStatus: FStatus
| filterStage: FStage
| dateRange: startDate:endDate
) | start: (currentPage - 1) * perPage | limitTo: perPage">
<div class="record" ng-class-odd="'odd odd-Record'" ng-class-even="'even even-Record'" data-toggle="collapse" data-target="#{{ app.Id }}">
<div class="field field-Name">{{ app.Lastname }}</div>
<div class="field field-AccountNumber">{{ app.AccountNumber }}</div>
<div class="field field-AppDate">{{ app.DateApplied | date : "dd/MM/yyyy"}}</div>
</div>
日期范围过滤器:
//Filter: Dates
App.filter('dateRange', function () {
return function (applications, startDate, endDate) {
var filtered = [];
var start_date = startDate.toString();
var end_date = endDate.toString();
angular.forEach(applications, function (value) {
if (Date.parse(value.DateApplied) > Date.parse(start_date) && Date.parse(value.DateApplied) < Date.parse(end_date)) {
filtered.push(value);
}
});
return filtered;
};
});
日期范围的值从 pikaday 日期选择器发送:
<h4>Date Range</h4>
<div>
<label style="font-weight: 500">Start Date</label>
<input style="float: right; width: 128px;" type="text" id="datepickerStartDate" ng-model="startDate">
</div>
<div>
<label style="float: left; font-weight: 500">End Date</label>
<input style="float: right; width: 128px;" type="text" id="datepickerEndDate" ng-model="endDate">
</div>
其他过滤器都是下面的格式,只是传递了不同的特定字段值。
//Filter: Status
App.filter('filterStatus', function () {
return function (applications, Status) {
var items = {
status: Status,
out: []
};
angular.forEach(applications, function (value, key) {
if (this.status[value.Status] === true) {
this.out.push(value);
}
}, items);
return items.out;
};
});
首先,这是您在 html 中应该拥有的内容。将所有过滤移动到控制器功能 - 然后您可以对其进行测试,测试性能等
<div class="inner" ng-repeat="app in displayedData">
...
其次,准备数据。如果您的后端 return 日期为字符串(尽管猜不出这是什么意思),请在获取它们时解析它们。很明显,从字符串中解析日期比比较两个日期要慢得多。
如果语句
的日期范围函数中有一个 && 条件,就会出现问题
通过它解决问题,我发现在 IF 中只检查一件事就停止了所有的缓慢。
我改为分别为开始日期和结束日期创建过滤器
App.filter('startDate', function () {
return function (applications, startDate) {
var items = {
startdate: startDate,
out: []
};
angular.forEach(applications, function (value, key) {
if (Date.parse(value.DateApplied) > Date.parse(this.startdate)) {
this.out.push(value);
}
}, items);
return items.out;
};
});
App.filter('endDate', function () {
return function (applications, endDate) {
var items = {
enddate: endDate,
out: []
};
angular.forEach(applications, function (value, key) {
if (Date.parse(value.DateApplied) < Date.parse(this.enddate)) {
this.out.push(value);
}
}, items);
return items.out;
};
});
这解决了 IE 中出现的极度缓慢问题。遗憾的是,我不确定 为什么 这会导致问题。
我有一个 ng-repeat 加上一些自定义过滤器和一个日期范围过滤器,在 Chrome、Mozilla、android 中都非常好用。但是在带有日期范围过滤器的 IE 中,一切都会停止。过滤器需要 10 秒来注册(我有过滤器绑定到复选框和自由文本),复选框动画也会延迟到数据加载。如果我删除日期范围过滤器,那么 IE 中的一切都很好。
列表是从天蓝色调用的API,列表目前有8500条记录,但长度无法避免,除了IE和日期范围功能外,所有运行都很顺利.
我已经尝试了一些方法来在 IE 中加快它的速度,例如将 :: 单一绑定添加到所有 {{ }} 值。
我也在使用分页并将 LimitTo 设置为 20
但是这些修复似乎是在 IE8+ 中的 ng-repeat 和过滤器通常很慢的情况下进行的,但是我的其他过滤器没有问题,它只适用于日期范围。
重复:
<div class="inner" ng-repeat="app in displayedData = ( applications
| orderBy: sortType:sortReverse
| filter: FAl
| filterStatus: FStatus
| filterStage: FStage
| dateRange: startDate:endDate
) | start: (currentPage - 1) * perPage | limitTo: perPage">
<div class="record" ng-class-odd="'odd odd-Record'" ng-class-even="'even even-Record'" data-toggle="collapse" data-target="#{{ app.Id }}">
<div class="field field-Name">{{ app.Lastname }}</div>
<div class="field field-AccountNumber">{{ app.AccountNumber }}</div>
<div class="field field-AppDate">{{ app.DateApplied | date : "dd/MM/yyyy"}}</div>
</div>
日期范围过滤器:
//Filter: Dates
App.filter('dateRange', function () {
return function (applications, startDate, endDate) {
var filtered = [];
var start_date = startDate.toString();
var end_date = endDate.toString();
angular.forEach(applications, function (value) {
if (Date.parse(value.DateApplied) > Date.parse(start_date) && Date.parse(value.DateApplied) < Date.parse(end_date)) {
filtered.push(value);
}
});
return filtered;
};
});
日期范围的值从 pikaday 日期选择器发送:
<h4>Date Range</h4>
<div>
<label style="font-weight: 500">Start Date</label>
<input style="float: right; width: 128px;" type="text" id="datepickerStartDate" ng-model="startDate">
</div>
<div>
<label style="float: left; font-weight: 500">End Date</label>
<input style="float: right; width: 128px;" type="text" id="datepickerEndDate" ng-model="endDate">
</div>
其他过滤器都是下面的格式,只是传递了不同的特定字段值。
//Filter: Status
App.filter('filterStatus', function () {
return function (applications, Status) {
var items = {
status: Status,
out: []
};
angular.forEach(applications, function (value, key) {
if (this.status[value.Status] === true) {
this.out.push(value);
}
}, items);
return items.out;
};
});
首先,这是您在 html 中应该拥有的内容。将所有过滤移动到控制器功能 - 然后您可以对其进行测试,测试性能等
<div class="inner" ng-repeat="app in displayedData">
...
其次,准备数据。如果您的后端 return 日期为字符串(尽管猜不出这是什么意思),请在获取它们时解析它们。很明显,从字符串中解析日期比比较两个日期要慢得多。
如果语句
的日期范围函数中有一个 && 条件,就会出现问题通过它解决问题,我发现在 IF 中只检查一件事就停止了所有的缓慢。
我改为分别为开始日期和结束日期创建过滤器
App.filter('startDate', function () {
return function (applications, startDate) {
var items = {
startdate: startDate,
out: []
};
angular.forEach(applications, function (value, key) {
if (Date.parse(value.DateApplied) > Date.parse(this.startdate)) {
this.out.push(value);
}
}, items);
return items.out;
};
});
App.filter('endDate', function () {
return function (applications, endDate) {
var items = {
enddate: endDate,
out: []
};
angular.forEach(applications, function (value, key) {
if (Date.parse(value.DateApplied) < Date.parse(this.enddate)) {
this.out.push(value);
}
}, items);
return items.out;
};
});
这解决了 IE 中出现的极度缓慢问题。遗憾的是,我不确定 为什么 这会导致问题。