محاسبات کُند

Angular در هر چرخهٔ change detection به‌صورت همگام کارهای زیر را انجام می‌دهد:

وجود تنها یک محاسبهٔ کُند در template یا یک hook چرخهٔ حیات می‌تواند کل فرایند change detection را کند کند؛ زیرا Angular محاسبات را به‌ترتیب اجرا می‌کند.

• تمام عبارت‌های template را در همهٔ کامپوننت‌ها ارزیابی می‌کند؛ مگر آنکه با توجه به راهبرد تشخیص تغییر هر کامپوننت، رفتار دیگری مشخص شده باشد.
• hookهای چرخهٔ حیات ngDoCheck، ngAfterContentChecked، ngAfterViewChecked و ngOnChanges را اجرا می‌کند.

شناسایی محاسبات کُند

می‌توانید محاسبات سنگین را با profiler ابزار Angular DevTools شناسایی کنید. در timeline عملکرد، روی یک نوار کلیک کنید تا چرخهٔ change detection مربوط به آن را ببینید. نموداری نمایش داده می‌شود که مدت‌زمان صرف‌شده برای change detection هر کامپوننت را نشان می‌دهد. با کلیک روی یک کامپوننت نیز می‌توانید مدت‌زمانی را ببینید که Angular صرف ارزیابی template و hookهای چرخهٔ حیات آن کرده است.

برای نمونه، در تصویر بالا دومین چرخهٔ ثبت‌شدهٔ change detection انتخاب شده است. Angular بیش از ۵۷۳ میلی‌ثانیه برای این چرخه زمان صرف کرده و بیشترین زمان به EmployeeListComponent اختصاص یافته است. در پنل جزئیات می‌بینید که ارزیابی template این کامپوننت بیش از ۲۹۷ میلی‌ثانیه طول کشیده است.

بهینه‌سازی محاسبات کُند

برای حذف محاسبات کُند می‌توانید از روش‌های زیر استفاده کنید:

• بهینه‌سازی الگوریتم زیربنایی. این روش پیشنهاد می‌شود. اگر الگوریتم عامل مشکل را سریع‌تر کنید، کل سازوکار change detection نیز سریع‌تر می‌شود.
• کش‌کردن با pure pipeها. می‌توانید محاسبهٔ سنگین را به یک pipe خالص منتقل کنید. Angular یک pure pipe را تنها زمانی دوباره ارزیابی می‌کند که تشخیص دهد ورودی‌های آن نسبت به اجرای قبلی تغییر کرده‌اند.
• استفاده از memoization. Memoization روشی شبیه pure pipe است؛ با این تفاوت که pure pipe تنها آخرین نتیجهٔ محاسبه را نگه می‌دارد، اما memoization می‌تواند چند نتیجه را ذخیره کند.
• پرهیز از repaint و reflow در hookهای چرخهٔ حیات. برخی عملیات مرورگر را وادار می‌کنند layout صفحه را به‌صورت همگام دوباره محاسبه یا صفحه را مجدد render کند. از آنجا که reflow و repaint معمولاً کُند هستند، بهتر است آن‌ها را در هر چرخهٔ change detection اجرا نکنید.

Pure pipe و memoization موازنه‌های متفاوتی دارند. Pure pipe مفهومی داخلی در Angular است، در حالی که memoization یک روش عمومی مهندسی نرم‌افزار برای کش‌کردن نتیجهٔ توابع محسوب می‌شود. اگر محاسبهٔ سنگین را بارها با آرگومان‌های متفاوت اجرا کنید، سربار حافظهٔ memoization می‌تواند قابل‌توجه باشد.