Learn the concept
Runtime Performance & Profiling
Use Chrome DevTools Performance tab to record and analyze flame charts, identify long tasks, and find layout thrashing. Common fixes include breaking up long tasks, avoiding forced synchronous layouts, using requestAnimationFrame, and moving work to Web Workers.
Performance Analysis:
Common Issues:
Solutions:
scheduler.yield()// BAD: Long blocking task
function processLargeArray(items) {
for (let i = 0; i < items.length; i++) {
heavyComputation(items[i]); // Blocks main thread
}
}
// GOOD: Chunked processing with yielding
async function processLargeArrayAsync(items, chunkSize = 100) {
for (let i = 0; i < items.length; i += chunkSize) {
const chunk = items.slice(i, i + chunkSize);
chunk.forEach(item => heavyComputation(item));
// Yield to browser - allow event handling, rendering
await new Promise(resolve => setTimeout(resolve, 0));
}
}
// Using scheduler.yield() (if available)
async function processWithYield(items) {
for (const item of items) {
heavyComputation(item);
// Yield if task is taking too long
if (scheduler.yield) {
await scheduler.yield();
}
}
}
// Using requestIdleCallback for non-urgent work
function processInBackground(items) {
let index = 0;
function processChunk(deadline) {
while (index < items.length && deadline.timeRemaining() > 0) {
heavyComputation(items[index]);
index++;
}
if (index < items.length) {
requestIdleCallback(processChunk);
}
}
requestIdleCallback(processChunk);
}Using Chrome DevTools' Performance tab to record the interaction, analyze the flame chart to identify long-running JavaScript tasks, forced layouts, or style recalculations that are causing jank.
Moving heavy data processing operations from the main thread to Web Workers to prevent UI unresponsiveness, allowing the user interface to remain smooth and interactive.
Introducing techniques like `requestIdleCallback` or chunking tasks with `setTimeout(..., 0)` to break up long-running scripts, giving the browser opportunities to update the UI and respond to user input.
Create a simple web application that performs a computationally intensive image manipulation (e.g., applying a complex filter) in a Web Worker to keep the main thread free.
Develop a page with a simulated long-running JavaScript task that causes UI freezes, then refactor it using `setTimeout(0)` or `scheduler.yield()` to demonstrate improved responsiveness.
Complex web applications like Google Docs heavily optimize JavaScript runtime performance to handle real-time collaboration, large documents, and rich text editing without freezing the user interface. They employ sophisticated chunking, Web Workers, and efficient DOM manipulation strategies.
Figma, a browser-based design tool, is a prime example of an application that pushes the limits of web performance. They use Web Workers for rendering and calculations, offloading almost all heavy computation from the main thread to deliver a desktop-like experience.