Angular 5应用IE11文本框输入卡顿，请求优化方案

遇到过类似的Angular 5 + IE11性能坑，尤其是输入卡顿和内存飙升的情况，以下是亲测有效的解决方案，你可以逐一排查尝试：

默认的Default变更检测策略会在每个事件循环遍历整个组件树，IE11的JS引擎性能弱，这会直接导致输入时的严重卡顿。

• 把输入框所在组件的变更检测策略改为OnPush，只有当组件输入属性变化或手动触发时才更新视图：

  import { Component, ChangeDetectionStrategy } from '@angular/core';
  
  @Component({
    selector: 'app-input-container',
    templateUrl: './input-container.component.html',
    changeDetection: ChangeDetectionStrategy.OnPush
  })
  export class InputContainerComponent {}
  

• 配合ChangeDetectorRef手动触发必要的变更检测，避免无意义的遍历：

  import { ChangeDetectorRef } from '@angular/core';
  
  constructor(private cdr: ChangeDetectorRef) {}
  
  onInputValueChange(value: string) {
    this.inputValue = value;
    this.cdr.markForCheck(); // 仅标记当前组件及父组件需要检测
  }
  

IE11下Zone.js对输入事件的监听会频繁触发全局变更检测，你可以把输入事件的处理放到Angular Zone外，再按需手动触发检测：

import { NgZone } from '@angular/core';

constructor(private ngZone: NgZone) {}

ngOnInit() {
  const inputElement = document.getElementById('target-input');
  this.ngZone.runOutsideAngular(() => {
    inputElement.addEventListener('input', (e) => {
      const inputValue = (e.target as HTMLInputElement).value;
      // 回到Zone内更新数据并触发检测
      this.ngZone.run(() => {
        this.inputValue = inputValue;
      });
    });
  });
}

也可以用RxJS防抖减少变更检测触发频率，兼顾性能和用户体验：

import { Subject } from 'rxjs';
import { debounceTime } from 'rxjs/operators';

private inputSubject = new Subject<string>();

ngOnInit() {
  this.inputSubject.pipe(debounceTime(100)).subscribe(value => {
    this.inputValue = value;
  });
}

onInputChange(value: string) {
  this.inputSubject.next(value);
}

ngOnDestroy() {
  this.inputSubject.unsubscribe();
}

你提到切换组件后内存增加100MB，大概率存在内存泄漏，这会持续拖慢页面响应速度：

• 组件内的RxJS订阅必须在ngOnDestroy中清理，建议用takeUntil统一管理：

  import { Subject } from 'rxjs';
  import { takeUntil } from 'rxjs/operators';
  
  private destroy$ = new Subject<void>();
  
  ngOnInit() {
    this.userService.getUserInfo().pipe(takeUntil(this.destroy$)).subscribe(info => {
      this.userInfo = info;
    });
  }
  
  ngOnDestroy() {
    this.destroy$.next();
    this.destroy$.complete();
  }
  

• 清理DOM元素引用：如果用@ViewChild/@ViewChildren获取了DOM节点，组件销毁时要把引用置空：

  @ViewChild('inputRef') inputRef: ElementRef;
  
  ngOnDestroy() {
    this.inputRef = null;
  }
  

• 避免在模板中绑定复杂函数或getter，比如{{ formatInputValue() }}，每次变更检测都会执行该函数，IE11下会累积大量性能开销，建议提前计算好值再绑定。

• 确保tsconfig.json的target设置为es5，IE11不支持ES6+语法，编译成ES5能减少转译带来的性能损耗：

  {
    "compilerOptions": {
      "target": "es5",
      // 其他配置...
    }
  }
  

• 启用AOT编译，AOT会在构建阶段把模板编译成JS，减少运行时的模板解析工作，这对IE11的性能提升非常明显：
  在angular.json的build配置里开启：

  "architect": {
    "build": {
      "options": {
        "aot": true,
        // 其他配置...
      }
    }
  }
  

Angular 5默认的polyfill可能包含不必要的内容，导致初始JS体积过大、内存占用高：

• 只引入IE11必需的polyfill，在polyfills.ts中调整：

  import 'core-js/es6/symbol';
  import 'core-js/es6/object';
  import 'core-js/es6/function';
  import 'core-js/es6/string';
  import 'core-js/es6/array';
  import 'core-js/es6/map';
  import 'core-js/es6/set';
  import 'zone.js/dist/zone';
  

  避免引入多余的polyfill，减少初始加载的资源体积。

内容的提问来源于stack exchange，提问作者user3843805