एक कोणीय अनुप्रयोग में स्मृति रिसाव का कारण कैसे बनता है?

मेमोरी मैनेजमेंट क्या है?

1. आवश्यक स्मृति का आवंटन।
2. आवंटित मेमोरी के साथ काम करें, पढ़ने और लिखने के संचालन का प्रदर्शन करें।
3. इसके बाद मेमोरी को रिलीज़ करने की आवश्यकता नहीं है।

कचरा संग्रहण कैसे काम करता है?

▍ झंडा चरण

▍ सफाई चरण

कोणीय स्मृति लीक

@Component({
  selector: 'app-root',
  template: `<app-sub *ngIf="hide"></app-sub>`
})
export class AppComponent {
  hide = false;

  constructor() {
    setInterval(() => this.hide = !this.hide, 50);
  }
}

▍ परिदृश्य # 1: लूप के लिए विशाल

@Component({
  selector:'app-sub',
  // ...
})
export class SubComponent {
  arr = [];

  constructor() {
    for (let i = 0; i < 100000; ++i) {
      this.arr.push(Math.random());
    }
  }
}

▍ परिदृश्य 2: व्यवहार सदस्यता सब्जेक्ट

@Component({
    selector:'app-sub',
    // ...
})
export class SubComponent {
  subject = new BehaviorSubject(42);
  
  constructor() {
    this.subject.subscribe(value => {
        const foo = value;
    });
  }
}

▍ परिदृश्य 3: सदस्यता के अंदर एक वर्ग फ़ील्ड के लिए एक मान निर्दिष्ट करना

@Component({
    selector:'app-sub',
    // ...
})
export class SubComponent {
  subject = new BehaviorSubject(42);
  randomValue = 0;
  
  constructor() {
    this.subject.subscribe(value => {
        this.randomValue = value;
    });
  }
}

परिदृश्य जो सेवा का उपयोग करते हैं

@Injectable({
  providedIn: 'root'
})
export class DummyService {

   some$ = new BehaviorSubject<number>(42);
}

▍ परिदृश्य 4: एक स्ट्रीम का सब्सक्राइब करना और एक स्थानीय स्थिरांक को मान प्रदान करना

@Component({
    selector:'app-sub',
    // ...
})
export class SubComponent {
  
  constructor(private dummyService: DummyService) {
    this.dummyService.some$.subscribe(value => {
        const foo = value;
    });
  }
}

▍ परिदृश्य 5: एक सेवा की सदस्यता लेना और एक वर्ग क्षेत्र के लिए एक मूल्य प्रदान करना

@Component({
    selector:'app-sub',
    // ...
})
export class SubComponent {
  randomValue = 0;
  
  constructor(private dummyService: DummyService) {
    this.dummyService.some$.subscribe(value => {
        this.randomValue = value;
    });
  }
}

▍ स्मृति रिसाव कब हुआ?

उचित सदस्यता कार्य

@Component({
  selector:'app-sub',
  // ...
})
export class SubComponent implements OnDestroy {

  private destroy$: Subject<void> = new Subject<void>();
  randomNumber = 0;

  constructor(private dummyService: DummyService) {
      dummyService.some$.pipe(
          takeUntil(this.destroy$)
      ).subscribe(value => this.randomNumber = value);
  }

  ngOnDestroy(): void {
      this.destroy$.next();
      this.destroy$.complete();
  }
}

स्पष्ट सदस्यता के लिए कैसे याद रखें?

npm install @angular-extensions/lint-rules --save-dev

{
  "extends": [
    "tslint:recommended",
    "@angular-extensions/lint-rules"
  ]
}

सारांश