docs: lazy loading & caching

Author: devmahmud

module-7.4-lazy-loading-and-caching-strategies.md

@@ -0,0 +1,107 @@
+#### 7.4. Lazy Loading and Caching Strategies
+
+Lazy loading and caching are powerful techniques for optimizing the loading performance of your web applications. This submodule covers the concepts of lazy loading and caching and provides examples of how to implement them effectively.
+
+##### Lazy Loading
+
+Lazy loading involves deferring the loading of non-essential resources until they are actually needed. This can significantly improve the initial page load time and reduce the overall resource footprint.
+
+**Example: Lazy Loading Images**
+
+Consider a webpage with multiple images. Instead of loading all images at once, you can lazy load them as the user scrolls down the page.
+
+```html
+<!-- Before lazy loading -->
+<img src="image1.jpg" alt="Image 1">
+<img src="image2.jpg" alt="Image 2">
+<img src="image3.jpg" alt="Image 3">
+<!-- ... -->
+
+<!-- After lazy loading -->
+<img data-src="image1.jpg" alt="Image 1">
+<img data-src="image2.jpg" alt="Image 2">
+<img data-src="image3.jpg" alt="Image 3">
+<!-- ... -->
+
+<script>
+  document.addEventListener('DOMContentLoaded', function () {
+    const lazyImages = document.querySelectorAll('img[data-src]');
+
+    lazyImages.forEach(function (lazyImage) {
+      lazyImage.src = lazyImage.dataset.src;
+      lazyImage.removeAttribute('data-src');
+    });
+  });
+</script>
+```
+
+In this example, the actual `src` attribute is set only when the image is about to come into view, reducing the initial page load time.
+
+##### Caching Strategies
+
+Caching involves storing copies of resources to avoid redundant downloads. Proper caching strategies can significantly improve the speed and responsiveness of your web application.
+
+**Example: Caching with Service Workers**
+
+Service workers provide a powerful mechanism for caching assets and enabling offline capabilities. Here's a basic example:
+
+```javascript
+// Service worker script (sw.js)
+const CACHE_NAME = 'my-cache-v1';
+
+self.addEventListener('install', (event) => {
+  event.waitUntil(
+    caches.open(CACHE_NAME).then((cache) => {
+      return cache.addAll([
+        '/',
+        '/index.html',
+        '/styles.css',
+        '/script.js',
+        // ... other assets
+      ]);
+    })
+  );
+});
+
+self.addEventListener('fetch', (event) => {
+  event.respondWith(
+    caches.match(event.request).then((response) => {
+      return response || fetch(event.request);
+    })
+  );
+});
+```
+
+In this example, the service worker caches essential assets during installation and intercepts fetch requests to serve cached content when available.
+
+##### Combining Lazy Loading and Caching
+
+Combining lazy loading and caching can provide a powerful optimization strategy. You can lazy load non-essential resources and cache essential assets for faster subsequent visits.
+
+**Example: Combining Lazy Loading and Caching**
+
+```javascript
+document.addEventListener('DOMContentLoaded', function () {
+  // Lazy load images
+  const lazyImages = document.querySelectorAll('img[data-src]');
+  lazyImages.forEach(function (lazyImage) {
+    lazyImage.src = lazyImage.dataset.src;
+    lazyImage.removeAttribute('data-src');
+  });
+
+  // Cache essential assets with a service worker
+  if ('serviceWorker' in navigator) {
+    navigator.serviceWorker.register('/sw.js')
+      .then((registration) => {
+        console.log('Service Worker registered with scope:', registration.scope);
+      })
+      .catch((error) => {
+        console.error('Service Worker registration failed:', error);
+      });
+  }
+});
+```
+
+In this combined example, lazy loading is applied to images, and a service worker is used for caching essential assets.
+
+By implementing lazy loading and caching strategies, you can create web applications that load quickly, reduce bandwidth usage, and provide a seamless user experience.