# Optimisasi Performa (Angular)

> OnPush strategy, trackBy, virtual scrolling, lazy loading, preloading, bundle size, Core Web Vitals, profiling

- 22 pertanyaan wawancara
- Senior
- [Pertanyaan Wawancara: Angular](https://sharpskill.dev/id/technologies/angular/pertanyaan-wawancara.md)

## 1. Apa itu strategi OnPush di Angular?

**Jawaban**

OnPush adalah strategi change detection yang membatasi pemeriksaan pada kasus di mana input komponen berubah berdasarkan referensi atau ketika event internal terpicu. Optimisasi ini secara signifikan mengurangi jumlah siklus deteksi dalam aplikasi kompleks. Menerapkan OnPush secara default pada komponen presentasional adalah praktik terbaik untuk meningkatkan performa.

## 2. Apa peran utama trackBy dalam direktif ngFor?

**Jawaban**

trackBy memungkinkan Angular untuk mengidentifikasi secara unik setiap item dalam daftar, sehingga menghindari pembuatan ulang DOM lengkap selama pembaruan. Tanpa trackBy, Angular menghancurkan dan membuat ulang semua elemen meskipun hanya satu item yang berubah. Menggunakan trackBy dengan pengidentifikasi unik secara signifikan meningkatkan performa daftar dinamis.

## 3. Apa itu lazy loading dalam konteks routing Angular?

**Jawaban**

Lazy loading adalah teknik pemuatan modul yang ditangguhkan yang hanya mengunduh kode saat rute yang sesuai diaktifkan. Ini mengurangi ukuran bundle awal dan mempercepat tampilan pertama aplikasi. Modul yang dimuat secara lazy didefinisikan dengan loadChildren dalam konfigurasi rute.

## 19 pertanyaan lagi tersedia

- Metode mana yang harus dipicu untuk memaksa pemeriksaan dengan OnPush?
- Apa keuntungan utama virtual scrolling untuk daftar besar?

Daftar gratis: https://sharpskill.dev/id/login

## Topik wawancara Angular lainnya

- [Dasar-dasar TypeScript](https://sharpskill.dev/id/technologies/angular/pertanyaan-wawancara/typescript-basics.md): 25 pertanyaan, Junior
- [TypeScript Lanjutan](https://sharpskill.dev/id/technologies/angular/pertanyaan-wawancara/typescript-advanced.md): 20 pertanyaan, Junior
- [Dasar-Dasar Angular](https://sharpskill.dev/id/technologies/angular/pertanyaan-wawancara/angular-fundamentals.md): 20 pertanyaan, Junior
- [Komponen dan siklus hidup](https://sharpskill.dev/id/technologies/angular/pertanyaan-wawancara/components-lifecycle.md): 20 pertanyaan, Junior
- [Services & Dependency Injection](https://sharpskill.dev/id/technologies/angular/pertanyaan-wawancara/services-dependency-injection.md): 20 pertanyaan, Junior
- [Organisasi Modul Angular](https://sharpskill.dev/id/technologies/angular/pertanyaan-wawancara/modules-organization.md): 22 pertanyaan, Mid-Level
- [Angular CLI](https://sharpskill.dev/id/technologies/angular/pertanyaan-wawancara/angular-cli.md): 18 pertanyaan, Junior
- [Direktif dan Pipe](https://sharpskill.dev/id/technologies/angular/pertanyaan-wawancara/directives-pipes.md): 22 pertanyaan, Mid-Level
- [Routing dan Navigasi](https://sharpskill.dev/id/technologies/angular/pertanyaan-wawancara/routing-navigation.md): 24 pertanyaan, Mid-Level
- [Reactive Forms](https://sharpskill.dev/id/technologies/angular/pertanyaan-wawancara/forms-reactive.md): 26 pertanyaan, Mid-Level
- [Template-driven Forms](https://sharpskill.dev/id/technologies/angular/pertanyaan-wawancara/forms-template-driven.md): 16 pertanyaan, Mid-Level
- [Dasar-Dasar RxJS](https://sharpskill.dev/id/technologies/angular/pertanyaan-wawancara/rxjs-fundamentals.md): 22 pertanyaan, Mid-Level
- [Operator RxJS](https://sharpskill.dev/id/technologies/angular/pertanyaan-wawancara/rxjs-operators.md): 24 pertanyaan, Mid-Level
- [HttpClient & Panggilan API](https://sharpskill.dev/id/technologies/angular/pertanyaan-wawancara/http-client.md): 22 pertanyaan, Mid-Level
- [Manajemen State Dasar](https://sharpskill.dev/id/technologies/angular/pertanyaan-wawancara/state-management-basics.md): 20 pertanyaan, Mid-Level
- [Change Detection](https://sharpskill.dev/id/technologies/angular/pertanyaan-wawancara/change-detection.md): 20 pertanyaan, Mid-Level
- [Angular Signals](https://sharpskill.dev/id/technologies/angular/pertanyaan-wawancara/angular-signals.md): 20 pertanyaan, Mid-Level
- [Standalone Components](https://sharpskill.dev/id/technologies/angular/pertanyaan-wawancara/standalone-components.md): 18 pertanyaan, Mid-Level
- [Unit Testing Angular](https://sharpskill.dev/id/technologies/angular/pertanyaan-wawancara/testing-unit.md): 22 pertanyaan, Mid-Level
- [Pengujian End-to-End](https://sharpskill.dev/id/technologies/angular/pertanyaan-wawancara/testing-e2e.md): 18 pertanyaan, Mid-Level
- [Build dan optimasi](https://sharpskill.dev/id/technologies/angular/pertanyaan-wawancara/build-optimization.md): 20 pertanyaan, Mid-Level
- [Dasar-dasar NgRx](https://sharpskill.dev/id/technologies/angular/pertanyaan-wawancara/ngrx-fundamentals.md): 24 pertanyaan, Senior
- [NgRx Lanjutan](https://sharpskill.dev/id/technologies/angular/pertanyaan-wawancara/ngrx-advanced.md): 24 pertanyaan, Senior
- [Arsitektur Angular](https://sharpskill.dev/id/technologies/angular/pertanyaan-wawancara/angular-architecture.md): 22 pertanyaan, Senior
- [Keamanan dan Praktik Terbaik](https://sharpskill.dev/id/technologies/angular/pertanyaan-wawancara/security-best-practices.md): 20 pertanyaan, Senior
- [Pola RxJS Lanjutan](https://sharpskill.dev/id/technologies/angular/pertanyaan-wawancara/advanced-rxjs-patterns.md): 22 pertanyaan, Senior
- [Angular Universal & SSR](https://sharpskill.dev/id/technologies/angular/pertanyaan-wawancara/angular-universal-ssr.md): 20 pertanyaan, Senior
- [Micro-frontend Angular](https://sharpskill.dev/id/technologies/angular/pertanyaan-wawancara/micro-frontends-angular.md): 20 pertanyaan, Senior

---

Source: SharpSkill (https://sharpskill.dev), tech interview preparation for your real stack.
HTML version of this page: https://sharpskill.dev/id/technologies/angular/pertanyaan-wawancara/performance-optimization