Performance Interview Questions

Change Detection determines UI updates based on data changes. Default strategy checks all components, OnPush checks only on reference changes. Improper implementation can cause performance issues. Optimize using immutable objects, pure pipes, OnPush strategy.

Lazy Loading loads modules on demand, reducing initial bundle size. Implemented through routing configuration using loadChildren. Improves initial load time, reduces memory usage. Consider module boundaries, preloading strategies.

Ahead-of-Time compilation compiles templates during build. Benefits: faster rendering, smaller payload, earlier error detection. Default in production builds. Eliminates need for template compiler in runtime.

Memory optimization through: proper unsubscription from observables, avoiding memory leaks, cleaning up event listeners, implementing trackBy for ngFor. Consider component lifecycle, large data handling.

trackBy provides unique identifier for items in ngFor. Helps Angular track items efficiently, reduces DOM operations. Improves performance with large lists, frequent updates. Customize based on data structure.

Virtual scrolling renders only visible items using ScrollingModule. Improves performance with large lists. Configure through CDK virtual scroll viewport. Consider item size, buffer size, scroll strategy.

Pure pipes execute only on input changes, impure on every change detection. Pure pipes better for performance, cache results. Use impure pipes sparingly. Consider transformation complexity, update frequency.

Bundle optimization through: tree shaking, lazy loading, proper imports, removing unused dependencies. Use built-in optimization flags, analyze bundles. Consider code splitting, dynamic imports.

Tree Shaking removes unused code from final bundle. Enabled by default in production builds. Requires proper module imports, side-effect free code. Important for reducing application size.

Caching implemented through services, HTTP interceptors. Cache API responses, computed values, static assets. Consider cache invalidation, storage limits. Important for reducing server requests.

Web Workers run scripts in background threads. Offload heavy computations, improve responsiveness. Implement using Angular CLI generation. Consider data transfer overhead, use cases.

Form optimization through: proper validation timing, minimal form controls, efficient value updates. Consider updateOn option, form structure. Important for complex forms, frequent updates.

enableProdMode disables development checks and warnings. Improves performance in production. Call before bootstrapping application. Important for production deployments.

Preloading loads modules after initial load. Configure through PreloadAllModules or custom strategy. Balance between performance and resource usage. Consider user patterns, network conditions.

Best practices: proper change detection, lazy loading, AOT compilation, bundle optimization, caching implementation. Regular performance audits, monitoring. Consider user experience, metrics.

SSR using Angular Universal. Improves initial load, SEO. Configure through Angular CLI commands. Consider hydration, state transfer. Important for SEO-critical applications.

Differential loading serves modern/legacy bundles based on browser support. Reduces bundle size for modern browsers. Enabled by default in new projects. Consider browser support requirements.

Image optimization through: lazy loading, proper sizing, format selection, CDN usage. Implement loading attribute, responsive images. Consider bandwidth usage, caching strategies.

Ivy is Angular's rendering engine. Benefits: smaller bundles, faster compilation, better debugging. Default since Angular 9. Enables tree-shakable components, improved build optimization.

Performance monitoring through: browser dev tools, Angular profiler, custom metrics. Track key indicators, implement logging. Consider user metrics, error tracking. Important for continuous optimization.

Performance budgets set size limits for bundles. Configure in angular.json. Enforce during build process. Consider different types (bundle, initial), thresholds. Important for maintaining performance.

Router optimization through: preloading strategies, route guards optimization, minimal route data. Consider navigation timing, caching. Important for smooth user experience.

Code splitting divides code into smaller chunks. Improves initial load time, enables lazy loading. Implement through route-level splitting, dynamic imports. Consider bundle size, loading strategy.

Library optimization through: selective imports, lazy loading, alternatives evaluation. Consider bundle impact, necessity. Important for maintaining lean application.

Service workers enable offline capabilities, caching. Improve load times, reduce server load. Configure through Angular PWA package. Consider cache strategies, update flow.

Efficient infinite scrolling through: virtual scrolling, data chunking, proper cleanup. Consider memory management, loading states. Important for large data sets.

Common bottlenecks: excessive change detection, large bundles, unoptimized images, memory leaks. Identify through profiling, monitoring. Consider regular performance audits.

Material optimization through: selective imports, lazy loading components, proper theming. Consider bundle size impact, usage patterns. Important for Material-based applications.

Zone.js affects change detection performance. Consider zone-less operations, manual change detection. Optimize through proper zone usage, async operations. Important for application responsiveness.