Ionic/Angular 应用性能问题排查

[pengkobe]

一般来说，要对使用框架的应用进行性能问题排查要比不使用框架的应用要复杂，你不知道框架做了什么优化操作，也不知道你是否误用了框架的 Api。这不，我就遇到性能问题了，由于界面刷新比较频繁，且用到了 ionic 路由操作，遇到了 dom node 节点和 js heap 缓慢上升的情况，但是打开控制台，全是一堆的 system 和 debug 对象，让人很是忧伤。此外，由于内存回收的时间节点不确定，也增加了排查的难度。所以第一件事情某不过于排除无关对象了，这是堆映射中可能列出的一些内容

• (compiled code): Represents JavaScript code compiled by Chrome. Consider this internal - we have no control over it.( 内部 )
• (array): Internally used array object. Again, internal.( 内部 )
• Array: A JavaScript array. Often we have a lot of data in arrays.
• Object: A plain old JavaScript object.
• (closure): A closure.
• system / Context: The underlying data require to call a function, for example the actual data used by a closure.
• system: Internally used data.( 内部 )

除了这些，如 HTMLDivElement 也是有谷歌浏览器自己创建的

问题集

• ngFor 内存问题，多层嵌套导致 Array 数据量增大
• string 中包含的字符串在不断增加，之前所有的没有清除掉
• 在大页面切换以及页面内 slide 切换以及数据请求返回时都回增加 Dom 节点，但是也不一定有问题，因为会在某一时间统一进行回收
• 部分订阅需要手动取消掉，Angular 中何时取消订阅,代码使用建议

  // in some component
  destroyed = new Subject();
  ngOnInit(): void {
  this.service.getData()
    .pipe(takeUntil(this.destroyed))
    .subscribe((data) => {
     // do something else
  });
  }
  ngOnDestroy() {
  this.destroyed.next();
  this.destroyed.complete();
  }

参考

• https://www.dwmkerr.com/fixing-memory-leaks-in-angularjs-applications/