Cordova 角度2变化检测在DOM中很慢

我有一个（相当大和复杂的）web应用程序。我们通常将其包装在本机应用程序中

我的问题是，我有一个拆分器元素，它可以被拖动并调整它旁边的元素的大小。我通过此拆分器元素的拖动事件创建了Observable，并在TypeScript中计算其旁边元素的宽度，然后将其绑定到DOM元素，如下所示：

[style.width.%]="width$ | async"

我使用一个可观察的异步管道。我还尝试了一个简单的变量

两者的问题在于，在cordova应用程序中，这种情况发生得非常缓慢。我检查每一行，每一项计算的速度都和浏览器中的一样快，但是当我将值推送到DOM（

width$.next（calculatedWidth）

，或者只是一个简单的值）时，它的速度不如浏览器中的快。它落后了。我拖动拆分器，然后等待2-3秒，它就会跳到正确的位置。同时，浏览器中的相同代码也可以在同一台设备上实时运行

为了让事情变得更奇怪，我尝试用我自己的方式来处理更改检测，我直接像这样操纵元素的宽度：

element.nativeElement.style.width = ...; 

如果我这样做，那么变化会立即发生

非常感谢您的任何帮助，因为在问题解决之前，我无法继续前进。当然，我可以继续使用直接操纵，但我在应用程序的其他地方也使用DOM绑定，而且速度也一样慢，如果我在那里也使用直接操纵，那将非常复杂和难看

编辑：

以下解释的代码示例：

把事情弄清楚。我正在使用Chrome和v56.x版本的系统WebView在android设备上进行测试

对于体系结构：

我有一个main-app.component，它有一个拆分器，用来控制元素左侧的宽度。事件处理和事件订阅是通过可观察对象完成的

Observable.fromEvent(this.splitter.nativeElement, 'mouseDown')...

在拆分器的右侧有另一个组件，比如说一个组件加载器。它使用

*ngComponentOutlet

动态加载组件，并在加载的组件内部维护一个可用的服务，以检查组件的可用空间。这是必要的，以使加载的组件对尺寸变化作出响应。我知道我也可以在组件中实现它，但我在一些情况下需要它，我希望避免重复。因此，我创建了一个服务，componentLoader将其提供给注入器，并维护其中的值，加载的组件可以通过一个可观察的事件监听更改

组件加载程序使用以下方法监视其宽度：

ngDoCheck() {
    let width = this.root.nativeElement.offsetWidth;
    this.screenSizeService.width = Math.round(((width / window.innerWidth) * 100));
}

在每个变化检测圆上，它刷新宽度。据我所知，这是用角度2观察元素宽度的唯一方法，但这是一种黑客行为，所以如果有人知道其他方法，那真的很感激

问题是，当我绑定分割元素的计数宽度时，另一个组件的宽度也会改变。这两种检测运行速度都非常慢，但只在cordova包装的应用程序中运行。在浏览器上，它可以正常工作

---

设备上的系统WebView和杂务版本相同：56.0.2924.87

是否使用

ChangeDetectionStrategy.OnPush

？您是否在生产构建或开发模式下进行了测试？我不使用OnPush策略。我在android发布包中的一个产品构建中对其进行了测试。我还签入了debug，但问题仍然存在。众所周知，debug很慢，特别是在触发了大量事件的情况下<如果性能相关，强烈建议使用“代码>推送”。您可以考虑在Angulars区域之外登记事件处理程序。在Angulars区域内侦听的事件会导致应用程序范围内的更改检测运行。即使在生产环境中也很慢。奇怪的是，它只在cordova应用程序内部运行缓慢。如果我在同一台设备上的Chrome中观看，那么它工作正常且快速。如果您的设备是iOS，则WebView没有与Chrome相同的引擎。