To reduce time "waiting on main thread,"

[jgaffuri]

Consider: Minimizing heavy JavaScript computations by using Web Workers or async/await. Deferring or lazily loading non-essential resources to reduce initial load. Breaking up large tasks into smaller, asynchronous tasks using requestAnimationFrame or setTimeout. Optimizing DOM manipulation by reducing unnecessary changes and batch updates.

[joewdavies]

Some advice from Mr. Chat:

Suggestions for Improving Grid Rendering Efficiency

Here are several strategies to optimize the rendering logic for your gridviz library:

---

1. Optimize Loop Logic and Data Processing

Precompute Values

• Avoid Redundant Computations: Some values, like r2 (resolution * 0.5) and z (geoCanvas.view.z), are recomputed multiple times but can be calculated once outside loops.
• Cache Zoom-Based Calculations: If certain properties depend on zoom level (z), cache those values before entering the loop.

Filter and Sort Early

• Apply filters (cells.filter(this.filter)) and sort operations outside the main rendering loop. This minimizes the number of iterations for rendering.

Combine Similar Properties

• Use bulk settings where possible (e.g., setting geoCanvas.ctx.fillStyle once if many cells share the same color).

---

2. Use Efficient Drawing Techniques

Batch Drawing Operations

Instead of setting styles (fillStyle, etc.) or transformations repeatedly within the loop, group cells by shared attributes like color, shape, and size and render them in batches.

---

3. Leverage Web Workers

Offload heavy computations (e.g., filtering, sorting, or calculating offsets) to a Web Worker. For example:

1. Send raw cells data to the worker.
2. Perform filtering, scaling, and shape assignment in the worker.
3. Return a lightweight set of instructions (e.g., [{x, y, size, color, shape}, ...]) to the main thread for rendering.

This frees up the main thread for UI updates and rendering, reducing perceived lag.

---

4. Use RequestAnimationFrame

Wrap rendering logic in requestAnimationFrame to ensure it aligns with the browser's refresh rate, minimizing dropped frames and enhancing visual smoothness:

function renderFrame() {
    requestAnimationFrame(() => {
        gridviz.redraw(); // Call your redraw logic
    });
}

5. Reduce Canvas State Changes

Minimize state changes like ctx.globalAlpha, ctx.globalCompositeOperation, and transformations (setCanvasTransform). Group cells with similar properties to reduce the number of changes:

• Use ctx.save() and ctx.restore() sparingly, as each call involves a performance cost.

---

6. Optimize Geometric Calculations

Instead of recalculating positions and offsets for every cell:

• Precompute Offsets: Calculate common offsets for each zoom level or resolution once.
• Reusable Path2D: Use Path2D objects for repeated shapes (like circles or triangles). Example:

  const circlePath = new Path2D();
  circlePath.arc(0, 0, radius, 0, Math.PI * 2);
  geoCanvas.ctx.fill(circlePath);

---

7. Reduce Layer Overhead

• Skip Invisible Layers: Ensure if (layer.visible && !layer.visible(z)) continue efficiently excludes non-relevant layers.
• Combine Layers: If multiple layers share the same properties and rendering patterns, consider combining them at lower zoom levels.

---

8. Profile and Optimize Hotspots

Use Chrome DevTools or similar tools to identify rendering bottlenecks:

1. Record a performance profile while zooming and panning.
2. Identify functions consuming the most time.
3. Optimize based on findings (e.g., caching results of computationally expensive calls).

---

9. Consider WebGL for Larger Datasets

If datasets are massive and 2D Canvas becomes a bottleneck:

• Transition to WebGL, which can handle large numbers of objects more efficiently using the GPU.
• Libraries like PixiJS or custom WebGL shaders can help manage rendering gridded data at scale.

---

10. Incremental Rendering

Divide the rendering into chunks to avoid blocking the main thread:

1. Render visible cells first.
2. Load and render additional cells progressively in subsequent animation frames.

Implementation Example: Web Worker + Canvas Rendering

Here’s a basic outline for combining Web Workers and canvas rendering:

Main Thread

const worker = new Worker('dataProcessor.js');
worker.onmessage = (event) => {
    const processedData = event.data; // Lightweight rendering instructions
    renderCells(processedData);      // Render on canvas
};
worker.postMessage({ cells, resolution, zoomLevel });
Web Worker (dataProcessor.js)

onmessage = (event) => {
    const { cells, resolution, zoomLevel } = event.data;
    // Perform filtering and offset calculations
    const processed = cells.map(c => ({
        x: c.x,
        y: c.y,
        color: computeColor(c, zoomLevel),
        size: computeSize(c, resolution, zoomLevel),
        shape: computeShape(c, zoomLevel),
    })).filter(c => c.color !== 'none');
    postMessage(processed);
};

This approach distributes work across threads and accelerates rendering on the main thread.

[joewdavies]

Important: workers can't directly accept functions as arguments. This means that dataset.preprocess cannot be passed to a web worker.

[joewdavies]

Some devTools performance results using TiledGrid with ShapeColorSizeStyle:

• ctx.fillStyle = col appears to be slow. Maybe we should look into grouping cells by color in order to reduce calls to fillStyle.
• this.filter should not be running if the user hasnt defined a filter. I have changed the default to: this.filter = opts.filter || undefined.

[joewdavies]

Some useful guidance: https://web.dev/articles/optimize-long-tasks?utm_source=devtools