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

Question

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

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

这是针对DOM事件(滚动)在我们的localhost实例上进行的性能监视的IE11快照.

将此与像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+做了很多工作来解决这个问题,包括为开发人员提供许多选择来改变这种检测策略以最适合这种情况.

变更检测策略

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

拆卸变化探测器

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

运行外角度

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

NgFor 追踪

NgFor比旧的还要高出几英里ng-repeat,但它仍然不完美,特别是在重新粉刺时(咳嗽IE咳嗽).由于DOM树实际上不是一棵树,因此这可能是IE性能的重大打击.默认情况下,NgFor拆除整个DOM树以进行重复,并重建它以对其数据进行任何微小的更改.提供NgFor一个trackBy函数允许它只更新需要更改的DOM,从而提高速度(特别是如果您重复复杂/众多元素).

AOT编译

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

其他

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

祝好运!