如果"Angular doesn't offer filter/orderBy pipes because they perform poorly and prevent aggressive mi

Question

过滤，尤其是排序是昂贵的操作。当Angular每秒多次调用这些管道方法时，用户体验甚至可能会严重降解中等尺寸的列表。过滤器和Orderby经常在AngularJS应用程序中滥用，导致人们抱怨Angular本身很慢。从间接意义上说，Angularjs首先提供过滤器和订单来准备这种性能陷阱。

参考。https://angular.io/docs/ts/latest/guide/pipes.html#！#no-filter-pipe

如果我需要使用搜索输入或单击某些过滤器按钮过滤或订购数据，那么实现不使用管道的最佳替代方案是什么？

Answer 1

问题在于我们大多数开发人员的懒惰。当我们使用模板代码时，我们只希望它能在不关心负载的情况下工作。假设您有这样的对象：

{
staff: [
    {name: 'Bill', title: 'dev', color: 'blue', id:9},
    {name: 'Luisa', title: 'dev', color: 'red', id:5},
    {name: 'Jim', title: 'dev', color: 'blue'}, id:1451],
company: {
    name: 'superCo'
}
}

，在您的组件中，您想订购id

所以，您要做：ngFor="staff of data.staff | orderBy('id')发生的事情是：好的，加载所有数据，转到此用户，获取ID，将其与其他所有数据进行比较，好的，转到此用户，获取ID，将其与其他人进行比较，OK Get Get它转到下一个用户，获取ID，将其与其他用户进行比较，好的。.好的，我全部浏览了它们，这是一个数组，仅在模板渲染中存在

好，为每个用户构建所有数据模型和组件。

如果运行一次，这很好...但是在每个检测周期中都可以做

您的整个对象/排序/过滤会一遍又一遍地运行，如果它很复杂，或者您有大量数据，它可能会变得笨重。您的sortBy('id')每秒运行5-10次。

现在，帮助事物的一种方法是将您的检测效果更改为 onPush()

这只会让您在特定想要而不是经常频繁的情况下运行对象上的周期。这对>任何列表或一组数据都是有益的。但这仍然是一个巨大的负担。

更好的事情是创建您自己的排序功能doSort()或其他任何东西。单击或其他任何内容时运行此操作，然后它仅更改数据阵列一次，触发onPush()检测并在后续通过时忽略。

模板代码也很难编写测试。当您将逻辑转移到组件代码本身时，您现在可以具有filterColors()或所需的任何功能，然后对数据运行。

我知道它不像过去的.orderBy('id').filterBy(selectedColor)那样花哨或酷，但是它的速度明显更快，更可检验。

我有点漫步，希望对某些人有帮助。