Mobile performance optimization strategies

Rendering Performance Optimization

Mobile rendering performance directly impacts user experience, with the core focus being on reducing repaints and reflows. Use the transform and opacity properties for animation effects, as these properties do not trigger reflows:

.box {
  transform: translate3d(0, 0, 0);
  opacity: 0.9;
  transition: transform 0.3s ease;
}

Avoid frequent DOM manipulations and batch style modifications. Use requestAnimationFrame instead of setTimeout for animations:

function animate() {
  element.style.transform = `translateX(${position}px)`;
  position += 1;
  if (position < 100) {
    requestAnimationFrame(animate);
  }
}
requestAnimationFrame(animate);

Network Request Optimization

Mobile network environments are complex, and reducing HTTP requests is key. Merge CSS/JS files and use sprites to reduce image requests:

<!-- Before merging -->
<link href="style1.css" rel="stylesheet">
<link href="style2.css" rel="stylesheet">

<!-- After merging -->
<link href="combined.css" rel="stylesheet">

Enable HTTP/2 multiplexing and use resource preloading:

<link rel="preload" href="critical.css" as="style">
<link rel="prefetch" href="next-page.html">

Memory Management

Mobile devices have limited memory, so special attention must be paid to memory leaks. Unbind event listeners promptly:

// Bad example
element.addEventListener('click', onClick);

// Correct approach
function addListener() {
  element.addEventListener('click', onClick);
}
function removeListener() {
  element.removeEventListener('click', onClick);
}

Avoid common memory leak scenarios:

// Memory leak caused by closures
function createHeavyObject() {
  const largeObj = new Array(1000000).fill('*');
  return function() {
    console.log(largeObj.length);
  };
}

Image Optimization Strategies

Mobile image loading requires balancing quality and performance. Use responsive images:

<picture>
  <source media="(max-width: 600px)" srcset="small.jpg">
  <source media="(min-width: 1200px)" srcset="large.jpg">
  <img src="medium.jpg" alt="Example image">
</picture>

Implement lazy loading:

const lazyImages = document.querySelectorAll('img[data-src]');

const observer = new IntersectionObserver((entries) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      const img = entry.target;
      img.src = img.dataset.src;
      observer.unobserve(img);
    }
  });
});

lazyImages.forEach(img => observer.observe(img));

JavaScript Execution Optimization

Avoid long tasks blocking the main thread. Split time-consuming operations into multiple tasks:

// Before optimization
function processLargeArray(array) {
  for (let i = 0; i < array.length; i++) {
    // Time-consuming operation
  }
}

// After optimization
function processInChunks(array, chunkSize, callback) {
  let index = 0;
  function doChunk() {
    const chunkEnd = Math.min(index + chunkSize, array.length);
    while (index < chunkEnd) {
      // Process current chunk
      callback(array[index]);
      index++;
    }
    if (index < array.length) {
      setTimeout(doChunk, 0);
    }
  }
  doChunk();
}

Use Web Workers for CPU-intensive tasks:

// main.js
const worker = new Worker('worker.js');
worker.postMessage({ data: largeArray });
worker.onmessage = function(e) {
  console.log('Result:', e.data);
};

// worker.js
self.onmessage = function(e) {
  const result = processData(e.data);
  self.postMessage(result);
};

Cache Strategy Application

Use caching effectively to reduce network requests. Implement offline caching with Service Worker:

// service-worker.js
const CACHE_NAME = 'v1';
const urlsToCache = [
  '/',
  '/styles/main.css',
  '/scripts/app.js'
];

self.addEventListener('install', event => {
  event.waitUntil(
    caches.open(CACHE_NAME)
      .then(cache => cache.addAll(urlsToCache))
  );
});

self.addEventListener('fetch', event => {
  event.respondWith(
    caches.match(event.request)
      .then(response => response || fetch(event.request))
  );
});

Optimize local storage:

// Use IndexedDB to store large amounts of structured data
const request = indexedDB.open('MyDatabase', 1);

request.onupgradeneeded = (event) => {
  const db = event.target.result;
  const store = db.createObjectStore('data', { keyPath: 'id' });
  store.createIndex('name', 'name', { unique: false });
};

request.onsuccess = (event) => {
  const db = event.target.result;
  const transaction = db.transaction('data', 'readwrite');
  const store = transaction.objectStore('data');
  
  store.put({ id: 1, name: 'Example', value: 'Data' });
};

Touch Event Optimization

Mobile touch events require special handling. Avoid the 300ms click delay:

<meta name="viewport" content="width=device-width, initial-scale=1">

Optimize scrolling with the touch-action CSS property:

.scroll-container {
  touch-action: pan-y;
}

Implement high-performance touch event handling:

let startY;
const container = document.querySelector('.scroll-container');

container.addEventListener('touchstart', (e) => {
  startY = e.touches[0].clientY;
}, { passive: true });

container.addEventListener('touchmove', (e) => {
  const y = e.touches[0].clientY;
  const dy = y - startY;
  // Handle scrolling logic
}, { passive: true });

Device Adaptation Strategy

Optimize for different device characteristics. Detect network status:

const connection = navigator.connection || navigator.mozConnection || navigator.webkitConnection;

if (connection) {
  console.log('Network type:', connection.type);
  console.log('Effective network type:', connection.effectiveType);
  console.log('Data saver mode:', connection.saveData);
}

Adjust strategies based on device memory:

if (navigator.deviceMemory) {
  const memory = navigator.deviceMemory; // In GB
  if (memory < 1) {
    // Optimize for low-memory devices
  }
}

Code Splitting and On-Demand Loading

Modern frontend framework practices for code splitting. React dynamic imports:

const LazyComponent = React.lazy(() => import('./LazyComponent'));

function MyComponent() {
  return (
    <Suspense fallback={<div>Loading...</div>}>
      <LazyComponent />
    </Suspense>
  );
}

Async components in Vue:

const AsyncComp = () => ({
  component: import('./AsyncComponent.vue'),
  loading: LoadingComponent,
  error: ErrorComponent,
  delay: 200,
  timeout: 3000
})

Critical Rendering Path Optimization

Optimize first-screen rendering time. Inline critical CSS:

<style>
  /* Critical CSS content */
  .header { position: fixed; top: 0; }
  .main-content { margin-top: 60px; }
</style>

Load non-critical resources asynchronously:

<link rel="stylesheet" href="non-critical.css" media="print" onload="this.media='all'">

Preload fonts using <link rel=preload>:

<link rel="preload" href="font.woff2" as="font" type="font/woff2" crossorigin>

Animation Performance Special Optimization

Achieve smooth 60fps animations. Use will-change to hint the browser:

.animated-element {
  will-change: transform, opacity;
}

Avoid layout thrashing during animations:

// Bad example - triggers forced synchronous layout
function animate() {
  element.style.left = element.offsetLeft + 1 + 'px';
  requestAnimationFrame(animate);
}

// Good example - use transform
function animate() {
  element.style.transform = `translateX(${position}px)`;
  position += 1;
  requestAnimationFrame(animate);
}

Build Tool Optimization

Modern build tool configurations for mobile optimization. Webpack code splitting:

// webpack.config.js
module.exports = {
  optimization: {
    splitChunks: {
      chunks: 'all',
      minSize: 30000,
      maxSize: 244000,
    }
  }
};

Babel on-demand polyfill:

// babel.config.js
module.exports = {
  presets: [
    ['@babel/preset-env', {
      useBuiltIns: 'usage',
      corejs: 3,
      targets: {
        ios: '10',
        android: '5'
      }
    }]
  ]
};