Question

我有一个ng-repeat加上一些自定义过滤器和一个日期范围过滤器，在Chrome，Mozilla，android中都很棒。但是在使用日期范围过滤器的IE中，一切都停止了。过滤器需要10秒才能注册（我将过滤器绑定到复选框和自由文本），复选框动画也会滞后，直到数据加载为止。如果我删除日期范围过滤器，那么IE中的一切都很好。

该列表是从azure API调用的，该列表目前有8500条记录长，但是不能避免长度，并且除了IE和日期范围函数之外，所有列表都是平滑的。

我已经尝试过在IE中加快速度，例如将:: single绑定添加到所有{{}}值。

我也使用分页并将LimitTo设置为20

但是这些修复似乎是因为ng-repeat和过滤器在IE8 +中一般都很慢，但是对于其他过滤器而言，我只能使用日期范围。

重复：

<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;
    };
});

Answer 1

首先，这是你应该在html中拥有的。将所有过滤移动到控制器功能 - 然后您可以测试它，测试性能等。

    <div class="inner" ng-repeat="app in displayedData">
...

其次，准备您的数据。如果你的后端将日期作为字符串返回（虽然猜不出这是关于什么），但是当你得到它们时解析它们。很明显，从字符串中解析日期比比较两个日期要慢得多。

Answer 2

有一个＆amp;＆amp;＆amp;＆amp;日期范围中的标准函数if语句

通过它进行故障排除，我发现在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 +其他过滤器在IE11中非常慢

2 个答案: