Optimization of persistent cache configuration

Persistence caching is one of the key means to enhance application performance. By properly configuring caching strategies, it can reduce resource loading time, lower server pressure, and improve user experience. The core of cache optimization lies in balancing cache hit rates and resource update frequency, avoiding issues caused by expired or redundant caches.

Basic Principles of Caching Strategies

Browser caching primarily consists of two mechanisms: strong caching and negotiated caching. Strong caching is implemented through the Cache-Control and Expires response headers, bypassing HTTP requests directly. Negotiated caching triggers HTTP requests to validate whether resources are expired using Last-Modified/If-Modified-Since or ETag/If-None-Match.

Example configuration for strong caching:

Cache-Control: max-age=31536000, immutable

This code indicates the resource will not change for one year, making it suitable for static resources like JS/CSS files.

File Fingerprinting and Cache Busting

Generating a hash value based on file content as part of the filename (i.e., file fingerprint) automatically updates the URL when content changes, forcing clients to fetch the new version. Webpack configuration example:

output: {
  filename: '[name].[contenthash:8].js',
  chunkFilename: '[name].[contenthash:8].chunk.js'
}

Actual generated files might look like:

main.a3f4c8b2.js
vendor.d2e5f6a1.js

Hierarchical Caching Strategies

Different resource types should adopt different caching strategies:

1. Permanent Static Resources

   Cache-Control: public, max-age=31536000, immutable
   

   Suitable for third-party libraries or built resources with hashes.

2. Cacheable Dynamic Content

   Cache-Control: public, max-age=600, must-revalidate
   

   Suitable for API responses or data that may change but doesn’t require real-time updates.

3. Non-Cacheable Content

   Cache-Control: no-store, no-cache
   

   Suitable for sensitive data or requests requiring absolute real-time performance.

Cache Control with Service Worker

Service Workers enable more granular caching strategies. Here’s a Workbox configuration example:

import {registerRoute} from 'workbox-routing';
import {CacheFirst, StaleWhileRevalidate} from 'workbox-strategie';

// Core resources use CacheFirst
registerRoute(
  /\.(?:js|css)$/,
  new CacheFirst({
    cacheName: 'static-resources'
  })
);

// API requests use StaleWhileRevalidate
registerRoute(
  /\/api\//,
  new StaleWhileRevalidate({
    cacheName: 'api-responses'
  })
);

CDN Edge Cache Optimization

Special attention is needed for CDN node caching:

Cache-Control: public, max-age=3600, s-maxage=86400

Here, s-maxage controls CDN cache duration (24 hours), while browser cache duration is set to 1 hour.

Cache Size and Eviction Strategies

IndexedDB or Cache API requires storage space management:

// Example of cleaning expired caches
caches.open('my-cache').then(cache => {
  cache.keys().then(keys => {
    keys.forEach(request => {
      cache.match(request).then(response => {
        if (new Date(response.headers.get('date')) < Date.now() - MAX_AGE) {
          cache.delete(request);
        }
      });
    });
  });
});

Solving Cache Issues in Real-World Scenarios

Problem Scenario: Users report seeing outdated styles.
Solution:

1. Ensure CSS files include content hashes.
2. Add version query parameters to HTML files:

   <link href="/styles/main.css?v=20230801" rel="stylesheet">
   

3. Set HTML files to no-cache:

   Cache-Control: no-cache
   

Monitoring and Debugging Cache Behavior

Using Chrome DevTools' Network panel, you can:

• Check requests marked as from disk cache/from memory cache.
• Inspect cache control directives in response headers.
• Test cache invalidation with the Clear site data feature.

Node.js debugging middleware example:

app.use((req, res, next) => {
  res.on('finish', () => {
    console.log(`[Cache] ${req.url}: ${res.getHeader('Cache-Control')}`);
  });
  next();
});

Cache and Security Considerations

Special care is needed when caching sensitive data:

Cache-Control: private, max-age=300

The private directive prevents proxy servers from caching content, suitable for user-specific data.

For security-sensitive data like CSRF tokens, caching should be disabled entirely:

Cache-Control: no-store, must-revalidate

Multi-Environment Cache Strategy Differences

Development and production environments should use different configurations:

webpack.config.js snippet:

module.exports = (env) => ({
  output: {
    filename: env.production 
      ? '[name].[contenthash].js'
      : '[name].js'
  },
  plugins: [
    new HtmlWebpackPlugin({
      meta: env.production ? {
        'Cache-Control': { httpEquiv: 'Cache-Control', content: 'max-age=31536000, immutable' }
      } : {}
    })
  ]
});

Cache Pre-Warming Techniques

For critical resources, prefetching can be done after page load:

// Prefetch resources likely needed for the next page
window.addEventListener('load', () => {
  if (isHighSpeedNetwork()) {
    const link = document.createElement('link');
    link.rel = 'prefetch';
    link.href = '/next-page-data.json';
    document.head.appendChild(link);
  }
});

Measuring Cache Performance Metrics

Use Navigation Timing API to measure cache effectiveness:

const [entry] = performance.getEntriesByType('navigation');
console.log('Total load time:', entry.loadEventEnd - entry.startTime);
console.log('Cached resources:', 
  entry.transferSize === 0 ? 'from cache' : 'network load');