找到真正的罪魁祸首EchartsorAngular

`,changeDetection:ChangeDetectionStrategy.OnPush})exportclassChartComponent{@Input('option')选项：任何；constructor(){}ngOnInit():void{window.addEventListener('resize',this.resize,true);}click():void{this.option={title:'hi'}}resize(){this.option.title='Hi'}}本例中，当页面窗口发生变化，在resize过程中修改了title,dom将不会更新。如下图所示：当click方法被触发时，组件会进行脏检查并更新dom。如果使用OnPush策略，resize中的修改可以更新dom怎么办？代码如下constructor(privateref:ChangeDetectorRef){}resize(){this.option.title='Hi'this.ref.markForCheck();}还是从上到下，angular会找到所有包含这个组件的路径组件逐一进行脏检查（即使顶层组件设置了onPush策略）如下图：answer2:很明显，一个大的组件树不会造成太多的脏检查，因为我们添加了onPush策略，输入没有变化。以下组件不应进行脏检查。虽然添加了onPush策略，但是页面上还有很多不应该运行的代码还在执行。添加onPush策略的记录，右图是添加onPush策略的记录，可以看到添加的onPush策略还在执行script、render、Painting。我们再看一下调用栈，如下图所示：从图中我们发现执行了一段调用栈NgZone的代码。还记得Rope1中提到的NgZone吗？发起脏检查的通知器，它代理原生事件，任何原生异步事件的触发都会导致NgZone运行。那么循环中一定有原生事件在运行！[注：细心的人可能还会发现，图中有些同学会发现正在执行angular.core的代码。answer2中不是已经说了不会有dirtycheck吗？确实没有进行脏检查。Rope2也解释了dirtycheckingstrategy的原理。不要忘记在脏检查之前，会检查组件的输入引用，以确定组件是否应该进行脏检查。]问题3：谁在骚扰NgZone？我们继续看性能分析中的调用栈。只要函数进入了“犯罪现场”，我们就可以找到它的足迹。看看这个！我们找到了animation.js执行的一个步骤函数。看看这个！果然有一个requestAnimationFrametimer()native事件一直在执行，一直没有被销毁！Answer3:原来流氓是echarts的animation.js或者echarts的核心组件zrender在动画结束后没有调用动画中的stop方法。总之，真凶是echarts！（如果你用的是echarts，可以打开调试工具，可以看到那段代码一直在循环执行）凶手找到了，受害者还需要安抚，怎么解决？放弃电子图表？你要知道，有一种流氓，让你恨之入骨，杀不死你。不得不承认echarts的绘图效率在移动端还是不错的。还有地图。谁会用其他图表插件给你画一张某个城市的地图。。。这时候我又得抱住Angular了。虽然我们管不了echarts，但是NgZone是一个很开放的家伙。给我们很大的自由操作空间，就像下面的示例一样，使用runOutsideAngular来跳过zone.js对包装函数内部执行的代码的包装。echarts的requestAnimationFrame再也不会来骚扰我们的NgZone了。导出类EChartsComponent实现OnInit,OnDestroy{@Input()chartid:string;@Input('option')选项：任意；私人图表：任何；@ViewChild('root')私有根；构造函数（私有ngZone：NgZone）{}resizeListener=()=>this.resize();ngOnInit():void{this.ngZone.runOutsideAngular(()=>{this.chart=echarts.init(this.root.nativeElement);this.chart.setOption(this.option,true);window.addEventListener('resize',this.resizeListener,true);})}}优化后5s内的表现如图：故事的结局虽然优化结果并不完美，但是从图中可以看出脚本（echarts的烂代码）在页面稳定静态的时候还在执行。如何解决echarts的循环requestAnimationFrame问题，后续问题留给echarts团队解决。