RxJS（Reactive Extensions for JavaScript）是一个基于观察者模式（Observer Pattern）中的可观察对象（Observable）和按需触发的计算（Lazy Evaluation）的库。它使得异步数据流的处理更加简单和可预测。但是，如果不谨慎地使用 RxJS，可能会导致额外的性能消耗。本文将介绍如何通过一些技巧来避免这些消耗。
避免创建多个 Observable
每次订阅一个 Observable 都会创建一个新的执行上下文（Execution Context），从而消耗计算资源。因此，在创建一个 Observable 时，应该尽量避免让它被多个订阅者使用。这可以通过在多个订阅者之间共享一个已经订阅的 Observable 来实现。例如：
// 不好的实现
click$.subscribe(() => console.log('Clicked!'));
click$.subscribe(() => console.log('Clicked again!'));
// 好的实现
const handleClick = () => console.log('Clicked!');
click$.subscribe(handleClick);
click$.subscribe(handleClick);在第一种实现中，每次点击事件都会创建一个新的执行上下文，而在第二种实现中，多个订阅者共享一个执行上下文。
缓存 Observable
对于滚动、定时器等常常触发事件的场景，应该避免频繁地创建 Observable。相反，可以通过缓存 Observable 的方式来重复利用它，从而避免性能消耗。例如：
// 不好的实现
fromEvent(window, 'scroll').subscribe(() => console.log('Scrolled!'));
// 好的实现
const scroll$ = fromEvent(window, 'scroll').pipe(share());
scroll$.subscribe(() => console.log('Scrolled!'));在第一种实现中，每次滚动都会创建一个新的 Observable，而在第二种实现中，多个订阅者共享一个 Observable，从而避免了重复创建。
避免额外的操作符
RxJS 中提供了许多操作符来操作 Observable，例如 map、filter、scan 等等。但是，不恰当地使用这些操作符也会导致额外的性能消耗。因此，应该尽量避免使用不必要的操作符。例如：
-- -------------------- ---- -------
-- -----
------------------- --------
------
------------ -- ---------------
--------- -- ---------------
----- -- ----------------
---------- -- -- --- - -- ---
--------------------------- ---------
-
-------------
-- ----
------------------- --------
------
------------ -- ---------------
--------- -- ---------------
---------- -- -- --- - -- ---
--------------------------- ---------
-
------------ -- ----------------在第一种实现中，使用了不必要的操作符 tap，从而导致额外的计算开销。而在第二种实现中，使用 subscribe 来代替 tap，避免了额外的性能消耗。
使用合适的操作符
尽管应该尽量避免使用不必要的操作符，但是有时候也应该使用合适的操作符来尽可能地优化性能。例如：
// 不好的实现 const slow$ = interval(1000); slow$.subscribe(() => expensiveOperation()); // 好的实现 const fast$ = interval(50); fast$.pipe(sample(slow$)).subscribe(() => expensiveOperation());
在第一种实现中，每秒钟都会执行 expensiveOperation，从而导致性能消耗。而在第二种实现中，使用 sample 操作符，仅在 slow$ 发出时才执行 expensiveOperation，从而优化了性能。
结论
使用 RxJS 可以使得在处理异步数据流时更加简单和可预测。但是，在使用 RxJS 时，也需要谨慎地处理性能问题。本文介绍了如何通过一些技巧来避免额外的消耗。希望这些技巧能够帮助读者更好地优化自己的代码。
参考资料
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67052613d91dce0dc852148e