Angular 2如何在Internet Explorer 11上改进DOM绘制时间

Question

在Internet Explorer 11上改进Angular 2应用程序性能是否有任何特殊技巧？

我们的网站在Chrome和Firefox中都很常见但是IE在IE 11上显得很慢。我理解其中一些是浏览器引擎的限制，但是当单个更改检测周期导致DOM绘制时为30-40毫秒IE 11，我觉得我们的实现还有其他一些功能。根据记录，Chrome绘制DOM的时间从不超过1毫秒，因此IE的行为速度比对应的慢约30至40倍。

这是我们在localhost实例上进行DOM事件（滚动）的性能监视的IE11快照。

将此与像The Guardian这样的网站进行比较，后者也使用Angular 2.他们网站的DOM事件处理时间几乎总是低于2毫秒，他们在DOM上显示的内容远比我们复杂。

这让我觉得有一些特别适合IE 11的优化技术。这是我们迄今为止尝试过的一系列事项：

1. 从SystemJS迁移到Webpack。提供初始加载速度，但DOM绘画持续时间没有差异。
2. 我们使用core-js而不是es6-shim
3. 使用纯管道进行格式化并避免模板中的任何函数调用。

欢迎任何建议。

Answer 1

不幸的是，Angular不仅仅有一件事会导致IE出现问题。 Angular在DOM树操作和子/父节点跟踪方面工作很重，IE的DOM树不是......真的是树。 Angular在IE和Edge上的很多性能问题都来自它的变化检测周期 - 这使得Angular 1.X超级酷​​，但也让它变得笨拙而变得笨拙。

Angular 2+做了很多工作来解决这个问题，包括为开发人员提供多种选择来改变这种检测策略以最适合这种情况。

更改检测策略

Here's是探索此问题的绝佳资源。将ChangeDetectorRef服务的检测策略更改为“ChangeDetectionStrategy.OnPush”将导致Angular仅对组件输入运行更改检测。如果您在深层嵌套组件中有大量静态信息且没有从深层冒出的事件，这可能是一个很大的加速 - 但是，您需要在需要时手动调整更改检测或手动调用更改检测根据需要进行扫描 - 并不像听起来那么糟糕，并且会为所有平台提供性能提升。

拆卸变更检测器

更大的性能提升将是在用户正在做一些事情时完全分离变化检测器，这些事情会触发大量不必要的变化检测，例如点击和拖动。这可以战略性地用于给性能带来相当大的提升，但是如何实现它将是非常特定于应用程序的。

外角运行

这可能看起来很熟悉，但是如果你有很多影响UI的计算量很大的任务，你可以使用NgZone在Angular的'zone'之外运行逻辑。可能对IE没有太大影响，但仍然是一个很好的做法。

NgFor跟踪

NgFor比旧版ng-repeat更高效，但它仍然不完美，特别是在重绘时（咳嗽IE咳嗽）。由于DOM树实际上不是一棵树，因此这可能是IE性能的重大打击。默认情况下，NgFor会删除整个DOM树以进行重复，并重建它以对其数据进行任何微小更改。赋予NgFor trackBy函数只允许更新需要更改的DOM，从而提高速度（特别是如果您重复复杂/众多元素）。

AOT编译

比平台特定的任何东西都更具普遍性，但无论如何绝对是一个好主意。配置您的应用程序以进行提前编译从构建应用程序中取出Angular编译器，并在构建时完全呈现模板。它可以减少大量的负载和渲染时间，如果您拥有可以使用最少的外部数据构建的大型复杂模板，则可以产生更大的影响。使用Webpack或SystemJS（而不是CLI）会很痛苦，但值得。请参阅官方文档here

其他

你的问题可能根本与Angular无关 - IE在表格渲染和某些样式情况（如在页面渲染后计算元素的动态宽度）等方面存在性能问题。确保研究您的应用正在实施的任何问题。

祝你好运！