Definition:
Lazy Loading is a design pattern that delays the initialization or loading of resources until they are actually needed, rather than loading everything upfront. This improves performance by reducing initial load time and memory usage.
Benefits vs Trade-offs
- Benefits: Faster initial load, Lower memory usage, Better user experience
- Trade-offs: Potential delay when accessing, More complex implementation, Possible loading indicators needed
Example:
- Web Development - Image Lazy Loading
<!-- Images load only when they come into viewport -->
<img src="placeholder.jpg" data-src="actual-image.jpg" loading="lazy" alt="Example">- JavaScript - Module Lazy Loading
// Module is loaded only when function is called
async function loadFeature() {
const module = await import('./heavy-feature.js');
return module.default();
}