Boost Map Rendering Performance with Web Workers: A Practical Guide

What is a Web Worker?

Web Workers provide a separate JavaScript runtime in the browser to solve the lack of multithreading, allowing heavy data processing without access to the DOM or Window object.

Creating and Using a Worker

var worker = new Worker('worker.js');
worker.onmessage = function (e) {
    var data = e.data;
};
worker.postMessage(['message']);

In worker.js:

self.onmessage = function(e) {
    var messages = e.data;
    var workerResult = {};
    // do something
    ...
    postMessage(workerResult);
};

Why Use Web Workers in a WebGL Map Engine?

Map rendering requires triangulation of thousands of points per grid, which can take dozens to hundreds of milliseconds. Running this on the main thread blocks UI updates, causing noticeable lag. Workers can perform these pure‑math calculations in parallel, keeping the UI responsive.

Data Transfer Overhead

Transferring large objects between the main thread and workers uses structured cloning, which is costly. Serializing the data with JSON.stringify and parsing it on the other side reduces transfer time from ~900 ms to ~80 ms, and caching further drops it to ~20 ms.

Transferable Objects

Transferable objects (e.g., ArrayBuffer, ImageBitmap) bypass cloning by transferring ownership, cutting transfer time to about 1 ms.

postMessage({
    road: roadData, // Float32Array
    area: areaData, // Float32Array
    other: someSmallData // normal Object
}, [roadData.buffer, areaData.buffer]);

Choosing the Number of Workers

Use navigator.hardwareConcurrency to detect the number of logical processors; a typical fallback is 4. Adjust based on actual workload and monitor each worker’s impact with the browser’s Performance panel.

Performance Comparison

Transfer Method

Worker postMessage (ms)

Main thread onmessage (ms)

Object Transfer

100‑150

50‑80

Serialization

20‑50

10

Transferable Object

1

1

Industry Practices

Techniques like serialization and transferable objects are widely adopted; similar approaches are discussed in the book WebGL Insights . Mozilla’s WebGLWorker concept moves WebGL commands into a worker and forwards them to the main thread for execution.

Key Takeaways

Web Workers run off the main thread and cannot access DOM or Window.

They can use XMLHttpRequest for data fetching.

Determine worker count via hardwareConcurrency and test performance.

Reduce data‑transfer cost with JSON serialization or Transferable Objects.