কৌণিক এর পরিবর্তন সনাক্তকরণ অপ্টিমাইজ করুন

আরও ভাল ব্যবহারকারীর অভিজ্ঞতার জন্য দ্রুত পরিবর্তন সনাক্তকরণ প্রয়োগ করুন।

Minko Gechev

কৌণিক পর্যায়ক্রমে তার পরিবর্তন সনাক্তকরণ প্রক্রিয়া চালায় যাতে ডেটা মডেলের পরিবর্তনগুলি একটি অ্যাপের দৃশ্যে প্রতিফলিত হয়। পরিবর্তন সনাক্তকরণ ম্যানুয়ালি বা একটি অ্যাসিঙ্ক্রোনাস ইভেন্টের মাধ্যমে ট্রিগার করা যেতে পারে (উদাহরণস্বরূপ, একটি ব্যবহারকারীর মিথস্ক্রিয়া বা একটি XHR সমাপ্তি)।

পরিবর্তন শনাক্তকরণ একটি শক্তিশালী টুল, কিন্তু যদি এটি প্রায়শই চালানো হয়, তবে এটি প্রচুর গণনা ট্রিগার করতে পারে এবং প্রধান ব্রাউজার থ্রেড ব্লক করতে পারে।

এই পোস্টে আপনি শিখবেন কিভাবে আপনার অ্যাপ্লিকেশনের কিছু অংশ বাদ দিয়ে পরিবর্তন শনাক্তকরণ প্রক্রিয়া নিয়ন্ত্রণ এবং অপ্টিমাইজ করা যায় এবং শুধুমাত্র প্রয়োজনে পরিবর্তন শনাক্তকরণ চালানো হয়।

কৌণিক এর পরিবর্তন সনাক্তকরণ ভিতরে

Angular এর পরিবর্তন সনাক্তকরণ কিভাবে কাজ করে তা বোঝার জন্য, আসুন একটি নমুনা অ্যাপ দেখি!

আপনি এই GitHub সংগ্রহস্থলে অ্যাপটির কোড খুঁজে পেতে পারেন।

অ্যাপটি একটি কোম্পানির দুটি বিভাগের কর্মচারীদের তালিকা করে - বিক্রয় এবং গবেষণা ও উন্নয়ন - এবং দুটি উপাদান রয়েছে:

• AppComponent , যা অ্যাপের মূল উপাদান, এবং
• EmployeeListComponent এর দুটি উদাহরণ, একটি বিক্রয়ের জন্য এবং একটি R&D এর জন্য।

আপনি AppComponent এর টেমপ্লেটে EmployeeListComponent এর দুটি উদাহরণ দেখতে পারেন:

<app-employee-list
  [data]="salesList"
  department="Sales"
  (add)="add(salesList, $event)"
  (remove)="remove(salesList, $event)"
></app-employee-list>

<app-employee-list
  [data]="rndList"
  department="R&D"
  (add)="add(rndList, $event)"
  (remove)="remove(rndList, $event)"
></app-employee-list>

প্রতিটি কর্মীর জন্য একটি নাম এবং একটি সংখ্যাসূচক মান আছে। অ্যাপটি কর্মচারীর সাংখ্যিক মানকে ব্যবসায়িক গণনায় পাস করে এবং স্ক্রীনে ফলাফলটি কল্পনা করে।

এখন EmployeeListComponent এ একবার দেখুন:

const fibonacci = (num: number): number => {
  if (num === 1 || num === 2) {
    return 1;
  }
  return fibonacci(num - 1) + fibonacci(num - 2);
};

@Component(...)
export class EmployeeListComponent {
  @Input() data: EmployeeData[];
  @Input() department: string;
  @Output() remove = new EventEmitter<EmployeeData>();
  @Output() add = new EventEmitter<string>();

  label: string;

  handleKey(event: any) {
    if (event.keyCode === 13) {
      this.add.emit(this.label);
      this.label = '';
    }
  }

  calculate(num: number) {
    return fibonacci(num);
  }
}

EmployeeListComponent কর্মীদের একটি তালিকা এবং একটি বিভাগের নাম ইনপুট হিসাবে গ্রহণ করে। যখন ব্যবহারকারী একজন কর্মচারীকে অপসারণ বা যোগ করার চেষ্টা করে, তখন উপাদানটি একটি সংশ্লিষ্ট আউটপুট ট্রিগার করে। উপাদানটি calculate পদ্ধতিকেও সংজ্ঞায়িত করে, যা ব্যবসায়িক গণনা বাস্তবায়ন করে।

এখানে EmployeeListComponent এর টেমপ্লেট রয়েছে:

<h1 title="Department">{{ department }}</h1>
<mat-form-field>
  <input placeholder="Enter name here" matInput type="text" [(ngModel)]="label" (keydown)="handleKey($event)">
</mat-form-field>
<mat-list>
  <mat-list-item *ngFor="let item of data">
    <h3 matLine title="Name">
      {{ item.label }}
    </h3>
    <md-chip title="Score" class="mat-chip mat-primary mat-chip-selected" color="primary" selected="true">
      {{ calculate(item.num) }}
    </md-chip>
  </mat-list-item>
</mat-list>

এই কোডটি তালিকার সমস্ত কর্মচারীর উপর পুনরাবৃত্তি করে এবং প্রত্যেকের জন্য একটি তালিকা আইটেম রেন্ডার করে। এতে EmployeeListComponent এ ঘোষিত ইনপুট এবং label সম্পত্তির মধ্যে দ্বি-মুখী ডেটা বাইন্ডিংয়ের জন্য একটি ngModel নির্দেশও অন্তর্ভুক্ত রয়েছে।

EmployeeListComponent এর দুটি উদাহরণের সাথে, অ্যাপটি নিম্নলিখিত উপাদান ট্রি গঠন করে:

AppComponent হল অ্যাপ্লিকেশনের মূল উপাদান। এর চাইল্ড কম্পোনেন্ট হল EmployeeListComponent এর দুটি উদাহরণ। প্রতিটি উদাহরণে আইটেমগুলির একটি তালিকা রয়েছে (E ₁ , E ₂ , ইত্যাদি) যা বিভাগের পৃথক কর্মচারীদের প্রতিনিধিত্ব করে।

যখন ব্যবহারকারী একটি EmployeeListComponent এর ইনপুট বাক্সে একটি নতুন কর্মচারীর নাম লিখতে শুরু করে, তখন AppComponent থেকে শুরু করে সমগ্র উপাদান গাছের জন্য কৌণিক ট্রিগার পরিবর্তন সনাক্তকরণ শুরু করে। এর মানে হল যে ব্যবহারকারী যখন টেক্সট ইনপুটে টাইপ করছেন, কৌণিক বারবার প্রতিটি কর্মচারীর সাথে যুক্ত সাংখ্যিক মানগুলি পুনঃগণনা করছে তা যাচাই করার জন্য যে তারা শেষ চেক থেকে পরিবর্তিত হয়নি।

এটি কতটা ধীর হতে পারে তা দেখতে, StackBlitz-এ প্রোজেক্টের অ-অপ্টিমাইজ করা সংস্করণ খুলুন এবং একজন কর্মচারীর নাম লেখার চেষ্টা করুন।

উদাহরণ প্রকল্প সেট আপ করে এবং Chrome DevTools-এর পারফরম্যান্স ট্যাব খোলার মাধ্যমে আপনি যাচাই করতে পারেন যে মন্থরতা fibonacci ফাংশন থেকে এসেছে৷

1. DevTools খুলতে `Control+Shift+J` (বা Mac এ `Command+Option+J`) টিপুন।
2. পারফরমেন্স ট্যাবে ক্লিক করুন।

এখন Record এ ক্লিক করুন ( পারফরম্যান্স প্যানেলের উপরের-বাম কোণে) এবং অ্যাপের একটি পাঠ্য বাক্সে টাইপ করা শুরু করুন। কয়েক সেকেন্ডের মধ্যে, রেকর্ড ক্লিক করুন আবার রেকর্ডিং বন্ধ করতে। একবার Chrome DevTools এটি সংগ্রহ করা সমস্ত প্রোফাইলিং ডেটা প্রক্রিয়া করে, আপনি এইরকম কিছু দেখতে পাবেন:

তালিকায় অনেক কর্মচারী থাকলে, এই প্রক্রিয়াটি ব্রাউজারের UI থ্রেড ব্লক করতে পারে এবং ফ্রেম ড্রপ হতে পারে, যা ব্যবহারকারীর খারাপ অভিজ্ঞতার দিকে নিয়ে যায়।

স্কিপিং কম্পোনেন্ট সাবট্রিস

ব্যবহারকারী যখন সেলস EmployeeListComponent জন্য টেক্সট ইনপুট টাইপ করে তখন আপনি জানেন যে R&D বিভাগের ডেটা পরিবর্তন হচ্ছে না—তাই এর উপাদানে পরিবর্তন সনাক্তকরণ চালানোর কোনো কারণ নেই। R&D দৃষ্টান্ত পরিবর্তন শনাক্তকরণ ট্রিগার করে না তা নিশ্চিত করতে, EmployeeListComponent এর changeDetectionStrategy OnPush এ সেট করুন:

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

@Component({
  selector: 'app-employee-list',
  template: `...`,
  changeDetection: ChangeDetectionStrategy.OnPush,
  styleUrls: ['employee-list.component.css']
})
export class EmployeeListComponent {...}

এখন যখন ব্যবহারকারী একটি টেক্সট ইনপুটে টাইপ করে, পরিবর্তন সনাক্তকরণ শুধুমাত্র সংশ্লিষ্ট বিভাগের জন্য ট্রিগার হয়:

আপনি এখানে এই অপ্টিমাইজেশানটি আসল অ্যাপ্লিকেশনটিতে প্রয়োগ করতে পারেন।

আপনি অফিসিয়াল কৌণিক ডকুমেন্টেশনে OnPush পরিবর্তন সনাক্তকরণ কৌশল সম্পর্কে আরও পড়তে পারেন।

এই অপ্টিমাইজেশানের প্রভাব দেখতে, StackBlitz-এ অ্যাপ্লিকেশনটিতে একজন নতুন কর্মী লিখুন।

বিশুদ্ধ পাইপ ব্যবহার করে

যদিও EmployeeListComponent এর জন্য পরিবর্তন শনাক্তকরণ কৌশলটি এখন OnPush এ সেট করা হয়েছে, তবুও Angular একটি বিভাগের সমস্ত কর্মচারীদের জন্য সাংখ্যিক মান পুনরায় গণনা করে যখন ব্যবহারকারী সংশ্লিষ্ট পাঠ্য ইনপুটে টাইপ করে।

এই আচরণ উন্নত করতে আপনি বিশুদ্ধ পাইপ সুবিধা নিতে পারেন. বিশুদ্ধ এবং অশুদ্ধ উভয় পাইপ ইনপুট গ্রহণ করে এবং ফলাফল প্রদান করে যা একটি টেমপ্লেটে ব্যবহার করা যেতে পারে। উভয়ের মধ্যে পার্থক্য হল যে একটি বিশুদ্ধ পাইপ তার ফলাফল পুনঃগণনা করবে শুধুমাত্র যদি এটি তার পূর্ববর্তী আহ্বান থেকে একটি ভিন্ন ইনপুট পায়।

মনে রাখবেন যে অ্যাপটি কর্মচারীর সাংখ্যিক মানের উপর ভিত্তি করে প্রদর্শনের জন্য একটি মান গণনা করে, যা EmployeeListComponent এ সংজ্ঞায়িত calculate পদ্ধতি ব্যবহার করে। আপনি যদি গণনাটিকে একটি বিশুদ্ধ পাইপে স্থানান্তরিত করেন, তবে কৌণিকটি পাইপের অভিব্যক্তিটি পুনরায় গণনা করবে যখন এর আর্গুমেন্ট পরিবর্তন হবে। ফ্রেমওয়ার্ক রেফারেন্স চেক করার মাধ্যমে পাইপের আর্গুমেন্ট পরিবর্তিত হয়েছে কিনা তা নির্ধারণ করবে। এর মানে হল যে একজন কর্মচারীর সাংখ্যিক মান আপডেট না করা পর্যন্ত Angular কোনো পুনঃগণনা করবে না।

CalculatePipe নামক একটি পাইপে কীভাবে ব্যবসার হিসাব সরানো যায় তা এখানে রয়েছে:

import { Pipe, PipeTransform } from '@angular/core';

const fibonacci = (num: number): number => {
  if (num === 1 || num === 2) {
    return 1;
  }
  return fibonacci(num - 1) + fibonacci(num - 2);
};

@Pipe({
  name: 'calculate'
})
export class CalculatePipe implements PipeTransform {
  transform(val: number) {
    return fibonacci(val);
  }
}

পাইপের transform পদ্ধতি fibonacci ফাংশনকে আহ্বান করে। লক্ষ্য করুন যে পাইপটি বিশুদ্ধ। কৌণিক সমস্ত পাইপ বিশুদ্ধ বিবেচনা করবে যদি না আপনি অন্যথায় উল্লেখ করেন।

অবশেষে, EmployeeListComponent এর জন্য টেমপ্লেটের ভিতরে অভিব্যক্তি আপডেট করুন:

<mat-chip-list>
  <md-chip>
    {{ item.num | calculate }}
  </md-chip>
</mat-chip-list>

এটাই! এখন যখন ব্যবহারকারী কোনও বিভাগের সাথে যুক্ত টেক্সট ইনপুটে টাইপ করে, অ্যাপটি পৃথক কর্মচারীদের জন্য সংখ্যাসূচক মান পুনরায় গণনা করবে না।

নিচের অ্যাপটিতে আপনি দেখতে পাচ্ছেন টাইপিং কতটা মসৃণ!

শেষ অপ্টিমাইজেশনের প্রভাব দেখতে StackBlitz-এ এই উদাহরণটি ব্যবহার করে দেখুন ।

মূল অ্যাপ্লিকেশনটির বিশুদ্ধ পাইপ অপ্টিমাইজেশন সহ কোডটি এখানে উপলব্ধ।

উপসংহার

একটি কৌণিক অ্যাপে রানটাইম মন্থরতার সম্মুখীন হলে:

1. স্লোডাউনগুলি কোথা থেকে আসছে তা দেখতে Chrome DevTools-এর সাহায্যে অ্যাপ্লিকেশনটিকে প্রোফাইল করুন৷
2. একটি উপাদানের সাবট্রি ছাঁটাই করতে OnPush পরিবর্তন সনাক্তকরণ কৌশল প্রবর্তন করুন।
3. ফ্রেমওয়ার্ককে গণনা করা মানগুলির ক্যাশিং সঞ্চালনের অনুমতি দেওয়ার জন্য বিশুদ্ধ পাইপে ভারী গণনাগুলি সরান৷