Performance tuning for 100k points
Quick answer
This tutorial starts by measuring frames with requestAnimationFrame and matching symptoms to four bottlenecks: picking and accessor work on the CPU, fragment fill rate, per-frame layer rebuilds and data copying. It shows stable ids, cached layer instances, precomputed positions, pickable only where needed, useDevicePixels and aggregation. Readers can find the real cost before changing layer types or data volume.
Key points
- Keep layer ids and instances stable and call setProps only with changed props.
- Precompute d.position and d.size once so accessors avoid allocating arrays.
- Disable pickable and strokes, and tune useDevicePixels, before reducing data.
Example
var frames = 0, last = performance.now(), fps = 0;
function tick(now) {
frames++;
if (now - last >= 1000) {
fps = Math.round(frames * 1000 / (now - last));
frames = 0;
last = now;
label.textContent = fps + ' fps';
}
requestAnimationFrame(tick);
}
requestAnimationFrame(tick);/* 差：每次调用都新建，且没有 id */
deckgl.setProps({
layers: [new deck.ScatterplotLayer({ data: data, getPosition: getPos })]
});
/* 好：图层实例缓存，只换数据引用 */
var pointsLayer = new deck.ScatterplotLayer({
id: 'points',
data: data,
getPosition: getPos
});
deckgl.setProps({ layers: [pointsLayer] });Notes
- data.concat creates a new array and forces a full vertex re-upload.
- Creating layers, colors or config objects inside the frame loop causes GC hitches.
English edition written for Atlaslog. Code is taken from the original Chinese page and runs unchanged.
Atlaslog (2026). Performance tuning for 100k points. https://www.jingweizhi.com/en/deckgl/tutorials/performance.html (accessed 2026-11-03).