title: Is markForCheck bad for performance with large components tree?
body: <p>For example I have big tree of components.</p>
  
  <pre><code>Comp1 &gt; Comp2 &gt; Comp3 &gt; ... &gt; Comp99 &gt; Comp100
  </code></pre>
  
  <p>If in <code>Comp99</code> I use event binding</p>
  
  <pre><code>&lt;Comp100 (event)="onEvent()"&gt;&lt;/Comp100&gt;
  </code></pre>
  
  <p>or async pipe</p>
  
  <pre><code>&lt;Comp100 [items]="$items | async"&gt;&lt;/Comp100&gt;
  </code></pre>
  
  <p><code>markForCheck</code> will be called internally. This means that <strong>change detection</strong> will be called for <strong>each</strong> component in a branch. Even if they have <strong>OnPush</strong> strategy. I suppose this is not ok for performance. </p>
  
  <p>As for now I see following solutions:</p>
  
  <p>Instead of event binding, pass functions (not valid for DOM events)</p>
  
  <pre><code>&lt;Comp100 [onEvent]="onEvent"&gt;&lt;/Comp100&gt;
  
  onEvent() {}
  </code></pre>
  
  <p>Use custom directive to bind events and not call <code>markForCheck</code> inside of this directive</p>
  
  <pre><code>&lt;div [appBind]="{'click': onClick, 'mousedown': onMouseDown}"&gt;&lt;/div&gt;
  </code></pre>
  
  <p>Write custom async pipe but instead of <code>markForCheck</code> call, for example, <code>detectChanges</code>.</p>
  
  <p>But there is such feeling that I'm missing something. What are common techniques of solving this performance issues?</p>