Ionic 성능개선하기 - Slide 최적화

# 개요

slider 사용시, 성능이 급격하게 나빠지는 현상 발생

 

# 해결책

onSlideChanged 이벤트 발생시, 꼭 필요한 경우에만 호출하도록 조치한다.

import { Component, ChangeDetectionStrategy, ChangeDetectorRef } from '@angular/core'; 

@Component({ 
    selector: 'page-my', 
    templateUrl: 'my-page.html', 
    changeDetection: ChangeDetectionStrategy.OnPush 
}) 
export class MyPage implements OnInit { 

    slides: number[] = []; 
    methodCounter: number = 0; 

    ngOnInit() { 
       let numberOfSlides = 100; 
       for (var i = 0; i < numberOfSlides; i++) { 
          this.slides[i] = i; 
       } 
    } 

    public slideChanged(): void { 
    console.log('slide changed'); 
    this.cd.markForCheck(); 
    } 

    public myMethod(): string { 
    console.log('myMethod called ' + this.methodCounter++); 
    return 'foo'; 
    } 
} 

 

<ion-content> 
<ion-slides (ionSlideDidChange)="slideChanged()"> 
    <ion-slide *ngFor="let slide of slides"> 
     <div> 
     {{slide}} - {{myMethod()}} 
     </div> 
    </ion-slide> 
    </ion-slides> 
</ion-content> 

myMethod() is only called upon initialization or when you explicitly tell so.

 

# 출처

https://stackoverrun.com/ko/q/13071662