A common pattern I see new Angular developers do is call functions directly from their component templates. While this may be convenient, it’s a bad habit to fall into. One of the most powerful parts of Angular is its reactive change detection, but with great power comes great responsibility. This reactiveness can cause unnecessary rendering and scripting. Over time, or as your app sclaes, this will reduce the overall performance of your application. This is where Pipes comes in — they hijack this change detection cycle and only execute when its value has truly changed. Luckily for us, pipes are one of the many features Angular gives us out of the box. They can range from simple to complex tasks and can provide great performance gains when used correctly.

我看到新的Angular开发人员的常见模式是直接从其组件模板调用函数。 尽管这可能很方便，但是这是一个坏习惯。 Angular最强大的部分之一是其响应式变化检测，但功能强大，责任重大。 这种React性可能导致不必要的渲染和脚本编写。 随着时间的流逝，或者随着应用程序的发展，这会降低应用程序的整体性能。 这是Pipes进入的地方-它们劫持了此更改检测周期，并且仅在其值确实发生更改时执行。 对我们来说幸运的是，管道是Angular开箱即用的众多功能之一。 它们的范围从简单到复杂，在正确使用时可以提高性能。

Angular offers many pre-built pipes in their common package — check out the list of them here!

Angular在其通用包装中提供了许多预制管道- 在这里查看它们的列表！

两根烟斗的故事 (The Tale of Two Pipes)

Before we learn how to use pipes, let’s look at the different kinds. There are 2 different types of pipes — pure and impure. Generally speaking, you will want to stick with pure pipes as much as possible. Pure pipes will keep your code more simple, reusable, and performant.

在学习如何使用管道之前，让我们看一下不同的管道。 有2种不同类型的管道-纯管道和不纯管道。 一般来说，您将希望尽可能地坚持使用纯管道。 纯管道将使您的代码更简单，可重用且性能更高。

Pure Pipes

纯管道

Similar to a pure function in programming, a pure pipe is deterministic. This means you can expect the same results when the same arguments are provided. In order to achieve this, there should be no internal state that the pipe relies upon. This allows Angular to safely bypass it’s own change detection and only update the value when the arguments change. In this post, we will mainly explore pure pipes.

类似于编程中的纯函数，纯管道是确定性的。 这意味着当提供相同的参数时，您可以期待相同的结果。 为了实现这一点，管道不应有内部状态。 这使Angular可以安全地绕过它自己的更改检测，并且仅在参数更改时更新值。 在本文中，我们将主要探讨纯管道。

Impure Pipes

不纯管道

On the other hand, impure pipes can rely on internal sate but will change on every change detection cycle. This can really hurt performance when are working with large amounts of data. I would recommend using Angular’s OnPush change detection in conjunction with an impure pipe.

另一方面，不纯净的管道可能依赖内部状态，但会在每个更改检测周期发生变化。 在处理大量数据时，这确实会损害性能。 我建议将Angular的OnPush更改检测与不纯管道一起使用。

For an example of an impure pipe, check out one of Angular’s pre-built AsyncPipe. This pipe allows you to subscribe to an Observable or Promise from your template.

有关不纯管道的示例，请查看Angular的预构建AsyncPipe之一 。 通过此管道，您可以从模板中订阅一个Observable或Promise。

定义自定义管道 (Defining a Custom Pipe)

Defining a custom pipe is really straightforward! First, you will want to create a new folder for custom pipes. It’s a common convention to end pipe files with .pipe.ts. You might notice Angular follows this pattern with other resources like components, services, modules, and more. I highly recommend following Agular’s naming convention. Not only will it help you easily navigate your codebase, but it will make it more maintainable to new or incoming developers.

定义自定义管道非常简单！ 首先，您将要为自定义管道创建一个新文件夹。 以.pipe.ts结尾的管道文件是一种常见的约定。 您可能会注意到Angular在组件，服务，模块等其他资源上都遵循这种模式。 我强烈建议遵循Agular的命名约定。 它不仅可以帮助您轻松浏览代码库，而且还可以使新开发人员或新开发人员更易于维护。

If you arent familiar with Angular’s Style guide, you can check out their documentation here!

如果您不熟悉Angular的样式指南，则可以在此处查看其文档！

Next, you will need to import the Pipe decorator and the PipeTransform interface from @angular/core. The pipe decorator will tell angular how to inject this file into your application. This decorator allows you to give your pipe a name and set the pipe to pure or impure. PipeTransform provides the transform method. The transform method is required on all pipes. This is where you can access the pipe's values and arguments.

接下来，您将需要从@angular/core导入Pipe装饰器和PipeTransform接口。 管道装饰器将告诉angular如何将该文件注入您的应用程序。 该装饰器允许您给管道命名，并将管道设置为pure管道或impure管道。 PipeTransform提供了变换方法。 在所有管道上都需要使用transform方法。 在这里可以访问管道的值和参数。

管道示例 (Example Pipe)

In the example below, I created a pipe called ListPipe. This pipe will receive an array of strings and add a space at the end of each one. For example, the input could look something like ['foo', 'bar', 'baz'] and the output would be['foo ', 'bar ', 'baz '].

在下面的示例中，我创建了一个名为ListPipe的管道。 该管道将​​接收一个字符串数组，并在每个字符串的末尾添加一个空格。 例如，输入看起来可能像['foo', 'bar', 'baz'] ，而输出则是['foo ', 'bar ', 'baz '] 。

Not too bad, right? With just a few lines of code, you now have a pipe that applies some basic formatting to a collection of items.

还不错吧？ 现在仅需几行代码，您便拥有了一个将一些基本格式应用于项目集合的管道。

使用自定义管道 (Using Custom Pipes)

Now that we have implemented a pipe, let’s look at how to use it. In order to use a pipe in a template, you will need to declare it in a module. It’s common for pipes to be reused throughout an application and should be included in a core module as pipes will act as singletons and only need to be declared once. If this pipe will only be used in by one module, you should import it directly into that feature module. Once you’ve done that, you will be able to use your pipe in templates like this:

现在我们已经实现了管道，让我们看一下如何使用它。 为了在模板中使用管道，您将需要在模块中声明它。 在整个应用程序中重复使用管道是很常见的，应将其包含在核心模块中，因为管道将充当单例，只需要声明一次即可。 如果此管道仅由一个模块使用，则应将其直接导入该功能模块。 完成此操作后，您将可以在模板中使用管道，如下所示：

<p>{{ myArray | list }}</p>

If your pipe took arguments you would provide a colon-separated list after the pipe name

如果您的管道使用了参数，则可以在管道名称后提供一个以冒号分隔的列表

<p>{{ myArray | list:arg1:arg2 }}</p>

You can also chain multiple pipes by separating them with |

您也可以通过|分隔多个管道来链接它们

<p>{{ myArray | list | anotherPipe }}</p>

但是为什么选择Tho？ (But Why Tho?)

Now you know how to declare these things but why should you go through the trouble? Performance! If you want to create a performant app with a great user experience your app needs pipes!

现在您知道如何声明这些内容了，但是为什么要麻烦一下呢？ 性能 ！ 如果您想创建具有出色用户体验的高性能应用，则您的应用需要管道！

In order to demonstrate the impact pipes can have on performance, I created two (almost) identical applications. I used these projects to run the same test against. Both projects have a table with 1000 rows of randomly generated data and lorem ipsum. It also comes equipped with a side nav containing the row information that comes out from the left when you click a row.

为了演示管道对性能的影响，我创建了两个(几乎)相同的应用程序。 我使用这些项目对它进行了相同的测试。 这两个项目都有一个包含1000行随机生成的数据和lorem ipsum的表。 它还带有侧面导航，其中包含单击行时从左侧显示的行信息。

减少您的应用程序的CPU使用率 (Decrease your apps CPU usage)

First, let’s look at the CPU usage. You can monitor the CPU usage of a webpage with the chrome dev tools. In the top right of your dev tools, go ahead and click on the 3 dot ellipsis. Slide on down to More Tools and from that menu select Performance Monitor. You should see a new pane with some graphs with live data immediately streaming into these graphs.

首先，让我们看一下CPU使用率。 您可以使用chrome dev工具监视网页的CPU使用率。 在开发工具的右上角，继续并单击3 dot ellipsis 。 向下滑动至“ More Tools然后从该菜单中选择“ Performance Monitor 。 您应该看到一个新的窗格，其中包含一些带有实时数据的图形，这些数据会立即流到这些图形中。

The first interaction I tested was opening and closing the side nav drawer. The top picture is with pipes and the bottom is without:

我测试的第一个交互是打开和关闭侧面导航抽屉。 顶部图片带有管道，而底部图片没有：

In both of these screenshots, you can see the spike when I opened or closed the side nav. The application without pipes has these dramatic peaks with heavy purple throughout — this is due to angular re-rendering more often than necessary. Clicking the drawer triggers Angular’s change detection and causes every function in the template to execute again — even if the input/output hasn’t changed.

在这两个屏幕截图中，您都可以看到打开或关闭侧面导航时的峰值。 没有管道的应用会出现这些剧烈的峰值，并且整个区域都带有深紫色-这是由于角度重新渲染比必要时更多。 单击抽屉会触发Angular的更改检测，并导致模板中的每个功能再次执行-即使输入/输出没有更改。

减少您的应用脚本编写时间 (Reduce your apps scripting time)

Next, I wanted to know is how often the functions get called in either of the apps. To find out, I added a console.count('The Function Name Here') to each function. In the app without Pipes, at 1000 rows of data, each function executes 4000 times on page load! And remember that is for each function, for the 3 functions that's a grand total of 12000 calls!

接下来，我想知道在两个应用程序中调用这些函数的频率。 为了找出console.count('The Function Name Here') ，我向每个函数添加了console.count('The Function Name Here') 。 在没有管道的应用程序中，在1000行数据中，每个函数在页面加载时执行4000次！ 请记住，这是针对每个函数的，对于三个函数而言，总共是12000次调用！

Now let’s compare that to the app with pipes — each pipe executes 1000 times. Now that is better! That is a 75% decrease from the app without pipes. We are completely ignoring change detection because our values haven't changed. Angular accomplishes this by storing all values in the current view in an array. Each pipe has it’s own corresponding index in that array. This allows them to easily access that value by index to check if it has changed before it runs any computations.

现在，将其与带有管道的应用程序进行比较-每个管道执行1000次。 现在更好了！ 与没有管道的应用程序相比，减少了75％。 我们完全忽略更改检测，因为我们的值没有更改。 Angular通过将当前视图中的所有值存储在数组中来实现此目的。 每个管道在该数组中都有自己的对应索引。 这使他们可以轻松地按索引访问该值，以在运行任何计算之前检查它是否已更改。

增加FPS并减少GPU (Increase FPS and Reduce GPU)

The last thing I wanted to explore was the frame rates between the apps. You can toggle Chrome’s FPS monitor under rendering in the more tools dropdown. I tested the same interaction as above— opening and closing the side nav — for both applications. Here are the two results I got — the image on the left is from the app with pipes and the image on the right is the app without pipes:

我想探讨的最后一件事是应用之间的帧频。 您可以在more tools下拉菜单中的渲染下切换Chrome的FPS监视器。 我针对这两个应用程序测试了与上述相同的交互-打开和关闭侧面导航。 这是我得到的两个结果-左边的图像来自带有管道的应用程序，右边的图像是不带有管道的应用程序：

First, let's unpack the FPS graph we see. Each green spike is when I opened or closed the side nav, you can see a clear difference between the spikes. In the app without pipes, the frame rate drops to 0 (or close to it) when the side nav is toggled. When we see FPS at or around 0, we know the user is not getting a visual response back right away. Not only does this make your app feel slow and bulky but it can really hurt your site’s conversion rates. Humans have very short attention spans and if they have to wait a second or two for their content to show, there is a good chance they will go somewhere else to find it altogether. Generally speaking, keeping your app between 30–60 FPS will provide your user with the best experience.

首先，让我们解压缩我们看到的FPS图。 每个绿色尖峰都是在我打开或关闭侧面导航时，可以看到尖峰之间的明显区别。 在没有管道的应用中，切换侧面导航时，帧频会降至0(或接近于此)。 当我们看到FPS等于或接近0时，我们知道用户没有立即获得视觉响应。 这不仅会使您的应用变慢且笨拙，而且确实会损害网站的转化率。 人类的注意力跨度很短，如果他们不得不等待一两秒钟才能展示其内容，那么他​​们很有可能会去其他地方找到它。 一般来说，将您的应用保持在30-60 FPS之间将为您的用户提供最佳体验。

This report also gives you the overall GPU usage. GPU — or graphical processing unit — this is the unit in which renders your user interface. In the application with pipes, our app used 23% less GPU to render and update the page. Decreasing your GPU will in return decrease your FPS.

该报告还为您提供了整体GPU使用情况。 GPU —或图形处理单元—这是渲染用户界面的单元。 在带有管道的应用程序中，我们的应用程序使用GPU渲染和更新页面的时间减少了23％。 降低GPU的回报会降低FPS。

结束 (The end)

Next time you are about to use a function in a template — reach for a pipe instead! Remember to keep your pipes pure, single purposed, and reusable. Sticking to these few rules will insure a performant Angular application!

下次您将要在模板中使用函数时-代替管道！ 记住要保持管道的纯净，单一目的和可重复使用。 遵循这几条规则将确保性能良好的Angular应用程序！