摘要：在智驾、机器人标注工具等可视化场景中，图片和点云数据的缓存策略直接影响应用性能。本文深入剖析各种缓存模式的原理、性能差异，并提供针对 Canvas 2D 和 WebGL 的最佳实践方案。
📋 目录
- 引言：为什么缓存策略如此重要？
- 图片缓存的五种模式
- 存储层：内存、IndexedDB、FileSystem API
- Canvas 2D 中的性能对比
- WebGL 中的性能对比
- 点云数据的缓存策略
- 实战：混合缓存架构设计
- 性能测试数据
- 最佳实践总结
引言：为什么缓存策略如此重要？
在开发智驾标注工具、机器人可视化平台时，我们经常面临以下挑战：
- 🖼️ 海量图片：单个项目可能包含数千张高清图像
- 📦 点云数据：单帧点云可达数百万个点，体积庞大
- ⚡ 实时交互：标注、缩放、旋转等操作要求流畅响应
- 💾 离线支持：野外作业场景需要离线缓存能力
错误的缓存策略会导致：
- ❌ 首屏加载慢（3-5秒）
- ❌ 内存溢出（OOM）
- ❌ 标注卡顿（FPS < 30）
- ❌ 存储空间浪费（体积膨胀 5-10 倍）
本文将带你深入理解各种缓存模式，找到最适合你场景的方案。
图片缓存的五种模式
1. HTMLImageElement（传统 DOM Image）
const img = new Image();
img.src = 'image.jpg';
img.onload = () => {
// 使用 img...
};
特点：
- ✅ 浏览器原生支持，使用简单
- ✅ 内存占用较小（保留压缩格式）
- ❌ 首次绘制时才解码，可能卡顿
- ❌ 不支持 Worker 环境
适用场景： 静态展示、简单应用
2. ImageBitmap（现代高性能方案）
const response = await fetch('image.jpg');
const blob = await response.blob();
const bitmap = await createImageBitmap(blob, {
resizeQuality: 'medium',
colorSpaceConversion: 'none'
});
特点：
- ✅ 创建时即解码，绘制零延迟
- ✅ 性能比 DOM Image 快 15-30%
- ✅ 支持 Worker 和 Transfer（零拷贝）
- ✅ 支持裁剪、缩放等预处理
适用场景： 高性能渲染、Worker 处理、视频帧
3. ImageData（像素级操作）
const canvas = document.createElement('canvas');
const ctx = canvas.getContext('2d')!;
const imageData = ctx.createImageData(width, height);
// 直接操作像素
const data = imageData.data;
data[0] = 255; // R
data[1] = 0; // G
data[2] = 0; // B
data[3] = 255; // A
特点：
- ✅ 直接访问像素数据，修改极快
- ✅ 适合频繁修改的场景
- ❌ 内存占用大（未压缩）
- ❌ 绘制性能较差（putImageData 慢）
适用场景： 标注框绘制、滤镜处理、像素级编辑
4. Blob（压缩格式存储）
const response = await fetch('image.jpg');
const blob = await response.blob();
// 存储到 IndexedDB 或 FileSystem
await cache.store(url, blob);
特点：
- ✅ 体积小（保留压缩格式）
- ✅ 适合长期缓存
- ✅ 可直接用于 createImageBitmap
- ❌ 读取时需要解码
适用场景： 离线缓存、网络资源缓存
5. ArrayBuffer / TypedArray（原始二进制）
const arrayBuffer = await blob.arrayBuffer();
const uint8Array = new Uint8Array(arrayBuffer);
// 直接操作二进制数据
uint8Array[0] = 0xFF;
特点：
- ✅ 最底层的数据表示
- ✅ 无额外封装开销
- ✅ 适合自定义格式
- ❌ 需要手动解析
适用场景： 自定义文件格式、点云数据、二进制协议
存储层：内存、IndexedDB、FileSystem API
1. 内存缓存（最快）
class MemoryCache {
private cache = new Map<string, ImageBitmap>();
private maxSize = 10; // 最多缓存 10 个
set(key: string, value: ImageBitmap) {
if (this.cache.size >= this.maxSize) {
const oldestKey = this.cache.keys().next().value;
this.cache.get(oldestKey)?.close();
this.cache.delete(oldestKey);
}
this.cache.set(key, value);
}
get(key: string): ImageBitmap | undefined {
return this.cache.get(key);
}
}
性能： ~1ms 读取
限制： 刷新即丢失，内存有限
适用： 热点数据、频繁访问
2. IndexedDB（结构化存储）
class IDBCache {
async store(key: string, blob: Blob) {
const db = await this.openDB();
const tx = db.transaction('images', 'readwrite');
const store = tx.objectStore('images');
await store.put({ id: key, blob, timestamp: Date.now() });
}
async get(key: string): Promise<ImageBitmap | null> {
const db = await this.openDB();
const tx = db.transaction('images', 'readonly');
const store = tx.objectStore('images');
const record = await new Promise(resolve => {
const req = store.get(key);
req.onsuccess = () => resolve(req.result);
});
if (!record) return null;
return await createImageBitmap(record.blob);
}
}
性能： ~50-100ms 读取（含反序列化）
限制： 有存储配额（通常 50-80% 磁盘空间）
特点： ✅ 有结构化克隆开销
适用： 中期缓存、结构化数据
3. File System Access API（文件系统）
class FileSystemCache {
private dirHandle: FileSystemDirectoryHandle | null = null;
async init() {
this.dirHandle = await window.showDirectoryPicker({ mode: 'readwrite' });
}
async store(filename: string, bitmap: ImageBitmap) {
if (!this.dirHandle) throw new Error('Not initialized');
// 转换为 Blob
const offscreen = new OffscreenCanvas(bitmap.width, bitmap.height);
const ctx = offscreen.getContext('2d')!;
ctx.drawImage(bitmap, 0, 0);
const blob = await offscreen.convertToBlob({ type: 'image/webp', quality: 0.9 });
// 写入文件（无序列化开销）
const fileHandle = await this.dirHandle.getFileHandle(filename, { create: true });
const writable = await fileHandle.createWritable();
await writable.write(blob); // ✅ 直接写入，无序列化
await writable.close();
}
async get(filename: string): Promise<ImageBitmap | null> {
if (!this.dirHandle) return null;
try {
const fileHandle = await this.dirHandle.getFileHandle(filename);
const file = await fileHandle.getFile();
return await createImageBitmap(file); // ✅ 直接读取，无反序列化
} catch {
return null;
}
}
}
性能： ~80-120ms 读取（纯 I/O，无序列化）
限制： 需要用户授权
特点： ❌ 无序列化/反序列化开销
适用： 大文件、离线项目、长期存储
Canvas 2D 中的性能对比
绘制性能测试
class Canvas2DPerformanceTest {
async run() {
const canvas = document.createElement('canvas');
canvas.width = 1920;
canvas.height = 1080;
const ctx = canvas.getContext('2d')!;
// 准备测试数据
const img = new Image();
img.src = 'test.jpg';
await img.decode();
const response = await fetch('test.jpg');
const blob = await response.blob();
const bitmap = await createImageBitmap(blob);
const imageData = ctx.createImageData(img.width, img.height);
console.log('=== Canvas 2D 绘制性能 (1000次) ===\n');
// 测试1：drawImage (DOM Image)
console.time('drawImage (DOM Image)');
for (let i = 0; i < 1000; i++) {
ctx.drawImage(img, 0, 0);
}
console.timeEnd('drawImage (DOM Image)'); // ~18ms ⭐
// 测试2：drawImage (ImageBitmap)
console.time('drawImage (ImageBitmap)');
for (let i = 0; i < 1000; i++) {
ctx.drawImage(bitmap, 0, 0);
}
console.timeEnd('drawImage (ImageBitmap)'); // ~12ms ⭐⭐
// 测试3：putImageData
console.time('putImageData');
for (let i = 0; i < 1000; i++) {
ctx.putImageData(imageData, 0, 0);
}
console.timeEnd('putImageData'); // ~55ms ❌
bitmap.close();
}
}
Canvas 2D 性能排名
| 方法 |
耗时 (1000次) |
性能 |
适用场景 |
drawImage(ImageBitmap) |
~12ms |
⭐⭐⭐ |
高性能渲染 |
drawImage(HTMLImageElement) |
~18ms |
⭐⭐ |
普通渲染 |
drawImage(OffscreenCanvas) |
~15ms |
⭐⭐ |
Worker 渲染 |
putImageData(ImageData) |
~55ms |
⭐ |
像素级操作 |
结论：
- ✅ 优先使用
ImageBitmap + drawImage
- ✅ 避免频繁使用
putImageData
- ✅ 使用离屏 Canvas 批量绘制
WebGL 中的性能对比
纹理上传性能
class WebGLPerformanceTest {
async run() {
const renderer = new THREE.WebGLRenderer();
const gl = renderer.getContext();
const img = new Image();
img.src = 'test.jpg';
await img.decode();
const response = await fetch('test.jpg');
const blob = await response.blob();
const bitmap = await createImageBitmap(blob);
const canvas = document.createElement('canvas');
canvas.width = img.width;
canvas.height = img.height;
const ctx = canvas.getContext('2d')!;
ctx.drawImage(img, 0, 0);
const imageData = ctx.getImageData(0, 0, img.width, img.height);
const data = new Uint8Array(imageData.data);
console.log('=== WebGL 纹理上传性能 ===\n');
// 测试1：HTMLImageElement
console.time('WebGL - HTMLImageElement');
const tex1 = gl.createTexture();
gl.bindTexture(gl.TEXTURE_2D, tex1);
gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, img);
console.timeEnd('WebGL - HTMLImageElement'); // ~3-5ms
// 测试2：ImageBitmap
console.time('WebGL - ImageBitmap');
const tex2 = gl.createTexture();
gl.bindTexture(gl.TEXTURE_2D, tex2);
gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, bitmap);
console.timeEnd('WebGL - ImageBitmap'); // ~2-3ms ⭐
// 测试3：ImageData (首次)
console.time('WebGL - ImageData (first)');
const tex3 = gl.createTexture();
gl.bindTexture(gl.TEXTURE_2D, tex3);
gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, img.width, img.height, 0, gl.RGBA, gl.UNSIGNED_BYTE, data);
console.timeEnd('WebGL - ImageData (first)'); // ~2-3ms
// 测试4：ImageData (更新)
console.time('WebGL - ImageData (update)');
gl.bindTexture(gl.TEXTURE_2D, tex3);
gl.texSubImage2D(gl.TEXTURE_2D, 0, 0, 0, img.width, img.height, gl.RGBA, gl.UNSIGNED_BYTE, data);
console.timeEnd('WebGL - ImageData (update)'); // ~0.5-1ms ⭐⭐
bitmap.close();
}
}
WebGL 纹理更新策略
// 频繁更新场景：使用 DataTexture + texSubImage2D
class DynamicTexture {
private texture: THREE.DataTexture;
private needsUpdate = false;
constructor(width: number, height: number) {
const data = new Uint8Array(width * height * 4);
this.texture = new THREE.DataTexture(data, width, height);
}
// 局部更新（性能最优）
updateRegion(x: number, y: number, width: number, height: number, newData: Uint8Array) {
const gl = renderer.getContext();
const texture = this.texture.__webglTexture;
gl.bindTexture(gl.TEXTURE_2D, texture);
gl.texSubImage2D(
gl.TEXTURE_2D,
0,
x, y,
width, height,
gl.RGBA,
gl.UNSIGNED_BYTE,
newData
);
this.needsUpdate = true;
}
// 标记更新
markUpdate() {
if (this.needsUpdate) {
this.texture.needsUpdate = true;
this.needsUpdate = false;
}
}
}
WebGL 性能排名
| 操作 |
耗时 |
性能 |
适用场景 |
texSubImage2D (局部更新) |
~0.5-1ms |
⭐⭐⭐ |
频繁更新 |
texImage2D (ImageData) |
~2-3ms |
⭐⭐ |
首次上传 |
texImage2D (ImageBitmap) |
~2-3ms |
⭐⭐ |
首次上传 |
texImage2D (HTMLImageElement) |
~3-5ms |
⭐ |
普通上传 |
结论：
- ✅ 首次上传：
ImageBitmap 或 ImageData 均可
- ✅ 频繁更新：
ImageData + texSubImage2D
- ✅ 避免重复上传整个纹理
点云数据的缓存策略
点云数据与图片不同，具有以下特点：
- 📊 数据量大：单帧可达 10-100 万点
- 🎯 结构化：每个点包含位置、颜色、法向量等
- 🔧 需要处理：滤波、分割、配准等
1. 点云数据结构
interface PointCloudData {
positions: Float32Array; // [x, y, z, x, y, z, ...]
colors?: Uint8Array; // [r, g, b, a, r, g, b, a, ...]
normals?: Float32Array; // [nx, ny, nz, nx, ny, nz, ...]
intensities?: Float32Array;
count: number; // 点数量
}
// 内存占用估算
// positions: count * 3 * 4 bytes
// colors: count * 4 * 1 bytes
// 100万点 ≈ 16MB
2. 点云缓存模式
方案1：ArrayBuffer（推荐）
class PointCloudCache {
// 存储为 ArrayBuffer（无额外开销）
async store(key: string, pointCloud: PointCloudData) {
// 序列化为 ArrayBuffer
const metadata = new Uint32Array([pointCloud.count]);
const positions = new Float32Array(pointCloud.positions);
const colors = pointCloud.colors ? new Uint8Array(pointCloud.colors) : null;
// 合并为单个 ArrayBuffer
const totalSize = 4 + positions.byteLength + (colors?.byteLength || 0);
const buffer = new ArrayBuffer(totalSize);
const view = new DataView(buffer);
// 写入元数据
view.setUint32(0, pointCloud.count, true);
// 写入位置
new Float32Array(buffer, 4).set(positions);
// 写入颜色（如果有）
if (colors) {
new Uint8Array(buffer, 4 + positions.byteLength).set(colors);
}
// 存储到 IndexedDB 或 FileSystem
await this.storage.set(key, buffer);
}
// 读取（快速反序列化）
async get(key: string): Promise<PointCloudData | null> {
const buffer = await this.storage.get(key);
if (!buffer) return null;
const view = new DataView(buffer);
const count = view.getUint32(0, true);
const positions = new Float32Array(buffer, 4, count * 3);
const colors = new Uint8Array(buffer, 4 + count * 3 * 4, count * 4);
return {
positions,
colors,
count
};
}
}
优势：
- ✅ 无额外序列化开销
- ✅ 内存布局紧凑
- ✅ 直接用于 WebGL（BufferAttribute）
方案2：压缩存储（节省空间）
class CompressedPointCloudCache {
// 使用 Draco 压缩
async storeCompressed(key: string, pointCloud: PointCloudData) {
// 引入 Draco 编码器
const DracoEncoder = (await import('draco3dgltf')).DracoEncoder;
const encoder = new DracoEncoder();
// 配置压缩参数
encoder.SetSpeed(5); // 0-10, 越高速度越快，压缩率越低
encoder.SetAttributeQuantization(
DracoEncoder.POSITION,
14 // 位置精度
);
// 编码
const encodedBuffer = encoder.Encode(pointCloud.positions, pointCloud.colors);
// 存储压缩后的数据
await this.storage.set(key, encodedBuffer);
}
// 读取并解压
async getCompressed(key: string): Promise<PointCloudData | null> {
const compressedBuffer = await this.storage.get(key);
if (!compressedBuffer) return null;
const DracoDecoder = (await import('draco3dgltf')).DracoDecoder;
const decoder = new DracoDecoder();
// 解码
const pointCloud = decoder.Decode(compressedBuffer);
return pointCloud;
}
}
压缩效果：
- 原始：100万点 ≈ 16MB
- Draco 压缩：100万点 ≈ 2-4MB（压缩比 4-8x）
- 解压时间：~50-100ms
方案3：分块加载（流式渲染）
class ChunkedPointCloudLoader {
private chunkSize = 100000; // 每块 10 万点
// 分块存储
async store(key: string, pointCloud: PointCloudData) {
const chunks = Math.ceil(pointCloud.count / this.chunkSize);
for (let i = 0; i < chunks; i++) {
const start = i * this.chunkSize;
const end = Math.min(start + this.chunkSize, pointCloud.count);
const chunkPositions = pointCloud.positions.slice(start * 3, end * 3);
const chunkColors = pointCloud.colors?.slice(start * 4, end * 4);
const chunkBuffer = this.serializeChunk(chunkPositions, chunkColors);
await this.storage.set(`${key}_chunk_${i}`, chunkBuffer);
}
// 存储元数据
await this.storage.set(`${key}_metadata`, {
count: pointCloud.count,
chunks,
chunkSize: this.chunkSize
});
}
// 按需加载（视锥体裁剪）
async loadInView(camera: THREE.Camera, frustum: THREE.Frustum) {
const metadata = await this.storage.get(`${key}_metadata`);
const chunksToLoad: number[] = [];
// 视锥体裁剪，确定需要加载的块
for (let i = 0; i < metadata.chunks; i++) {
const chunkBounds = await this.getChunkBounds(`${key}_chunk_${i}`);
if (frustum.intersectsBox(chunkBounds)) {
chunksToLoad.push(i);
}
}
// 并发加载可见块
const chunks = await Promise.all(
chunksToLoad.map(i => this.loadChunk(`${key}_chunk_${i}`))
);
return this.mergeChunks(chunks);
}
}
优势：
- ✅ 减少初始加载时间
- ✅ 支持超大点云（千万级）
- ✅ 节省内存
3. 点云在 WebGL 中的优化
class OptimizedPointCloudRenderer {
private geometry: THREE.BufferGeometry;
private material: THREE.PointsMaterial;
private points: THREE.Points;
constructor() {
this.geometry = new THREE.BufferGeometry();
this.material = new THREE.PointsMaterial({
size: 0.01,
vertexColors: true,
sizeAttenuation: true
});
this.points = new THREE.Points(this.geometry, this.material);
}
// 使用 BufferAttribute（避免重复创建）
updatePointCloud(pointCloud: PointCloudData) {
// 位置属性
let positionAttribute = this.geometry.getAttribute('position') as THREE.BufferAttribute;
if (!positionAttribute) {
positionAttribute = new THREE.BufferAttribute(pointCloud.positions, 3);
this.geometry.setAttribute('position', positionAttribute);
} else {
// 局部更新（性能最优）
positionAttribute.copyArray(pointCloud.positions);
positionAttribute.needsUpdate = true;
}
// 颜色属性
if (pointCloud.colors) {
let colorAttribute = this.geometry.getAttribute('color') as THREE.BufferAttribute;
if (!colorAttribute) {
colorAttribute = new THREE.BufferAttribute(pointCloud.colors, 4);
this.geometry.setAttribute('color', colorAttribute);
} else {
colorAttribute.copyArray(pointCloud.colors);
colorAttribute.needsUpdate = true;
}
}
// 更新包围盒
this.geometry.computeBoundingBox();
this.geometry.computeBoundingSphere();
}
// 渐进式加载
async progressiveLoad(pointCloudCache: PointCloudCache, key: string) {
const metadata = await pointCloudCache.getMetadata(key);
const totalChunks = metadata.chunks;
for (let i = 0; i < totalChunks; i++) {
const chunk = await pointCloudCache.loadChunk(key, i);
this.mergeChunk(chunk);
// 每加载一块，渲染一帧
renderer.render(scene, camera);
// 让出主线程
await new Promise(resolve => setTimeout(resolve, 0));
}
}
}
实战：混合缓存架构设计
针对标注工具的完整缓存架构：
class HybridCacheSystem {
// 三层缓存
private memoryCache = new MemoryCache<ImageBitmap>(); // L1: 内存
private idbCache = new IDBCache(); // L2: IndexedDB
private fsCache = new FileSystemCache(); // L3: FileSystem
private pointCloudCache = new PointCloudCache(); // 点云专用
// 智能获取图片
async getImage(url: string): Promise<ImageBitmap> {
const cacheKey = this.generateKey(url);
// L1: 内存缓存（最快）
const memoryHit = this.memoryCache.get(cacheKey);
if (memoryHit) {
console.log('L1 Cache Hit (Memory)');
return memoryHit;
}
// L2: IndexedDB（中速）
const idbBitmap = await this.idbCache.get(url);
if (idbBitmap) {
console.log('L2 Cache Hit (IndexedDB)');
this.memoryCache.set(cacheKey, idbBitmap);
return idbBitmap;
}
// L3: FileSystem（慢速但容量大）
if (this.fsCache.initialized) {
const fsBitmap = await this.fsCache.get(`${cacheKey}.webp`);
if (fsBitmap) {
console.log('L3 Cache Hit (FileSystem)');
this.memoryCache.set(cacheKey, fsBitmap);
await this.idbCache.store(url, await this.bitmapToBlob(fsBitmap));
return fsBitmap;
}
}
// 网络加载
console.log('Cache Miss, Loading from Network');
return await this.loadFromNetwork(url);
}
// 预加载策略
async preload(urls: string[], priority: 'high' | 'low' = 'low') {
const batchSize = priority === 'high' ? 10 : 5;
for (let i = 0; i < urls.length; i += batchSize) {
const batch = urls.slice(i, i + batchSize);
// 并发加载
await Promise.all(batch.map(async (url) => {
const bitmap = await this.getImage(url);
// 高优先级：预热到内存
if (priority === 'high') {
this.memoryCache.set(this.generateKey(url), bitmap);
}
}));
// 让出主线程
await new Promise(resolve => setTimeout(resolve, 50));
}
}
// 点云加载
async getPointCloud(key: string): Promise<PointCloudData> {
// 优先从内存加载
const memoryPCD = this.memoryCache.get(`pcd_${key}`);
if (memoryPCD) return memoryPCD;
// 从专用缓存加载
const pointCloud = await this.pointCloudCache.get(key);
if (pointCloud) {
this.memoryCache.set(`pcd_${key}`, pointCloud);
return pointCloud;
}
throw new Error(`PointCloud not found: ${key}`);
}
private async loadFromNetwork(url: string): Promise<ImageBitmap> {
const response = await fetch(url);
const blob = await response.blob();
const bitmap = await createImageBitmap(blob);
const cacheKey = this.generateKey(url);
// 并行写入多层缓存
await Promise.all([
this.idbCache.store(url, blob),
this.fsCache.initialized
? this.fsCache.store(`${cacheKey}.webp`, bitmap)
: Promise.resolve(),
Promise.resolve().then(() => {
this.memoryCache.set(cacheKey, bitmap);
})
]);
return bitmap;
}
private generateKey(url: string): string {
return url.replace(/[^a-zA-Z0-9]/g, '_');
}
private async bitmapToBlob(bitmap: ImageBitmap): Promise<Blob> {
const offscreen = new OffscreenCanvas(bitmap.width, bitmap.height);
const ctx = offscreen.getContext('2d')!;
ctx.drawImage(bitmap, 0, 0);
return await offscreen.convertToBlob({ type: 'image/webp', quality: 0.9 });
}
}
性能测试数据
图片缓存性能对比（1920x1080，100张）
| 操作 |
内存缓存 |
IndexedDB |
FileSystem API |
| 写入 100 张 |
~10ms |
~800ms |
~600ms |
| 读取 100 张 |
~20ms |
~500ms |
~400ms |
| 序列化开销 |
无 |
有（~30%） |
无 |
| 存储体积 |
~800MB |
~50MB |
~50MB |
| 持久化 |
❌ |
✅ |
✅ |
Canvas 2D 绘制性能（1000次）
| 方法 |
耗时 |
相对性能 |
drawImage(ImageBitmap) |
12ms |
100% ⭐ |
drawImage(HTMLImageElement) |
18ms |
67% |
drawImage(OffscreenCanvas) |
15ms |
80% |
putImageData(ImageData) |
55ms |
22% |
WebGL 纹理上传性能
| 操作 |
耗时 |
适用场景 |
texSubImage2D (局部更新) |
0.5-1ms |
频繁更新 ⭐ |
texImage2D (ImageData) |
2-3ms |
首次上传 |
texImage2D (ImageBitmap) |
2-3ms |
首次上传 ⭐ |
texImage2D (HTMLImageElement) |
3-5ms |
普通上传 |
点云数据性能（100万点）
| 操作 |
原始格式 |
Draco 压缩 |
| 存储体积 |
16MB |
2-4MB (4-8x) |
| 加载时间 |
~50ms |
~100ms |
| 解压时间 |
无 |
~50ms |
| 内存占用 |
16MB |
16MB |
最佳实践总结
📌 图片缓存策略
| 场景 |
推荐方案 |
理由 |
| 静态展示 |
ImageBitmap + 内存缓存 |
零延迟绘制 |
| 频繁更新 |
ImageData + texSubImage2D
|
局部更新最快 |
| 离线缓存 |
FileSystem API + Blob
|
无序列化开销 |
| 网络资源 |
IndexedDB + Blob
|
结构化查询 |
| Worker 处理 |
ImageBitmap + Transfer
|
零拷贝 |
📌 点云缓存策略
| 场景 |
推荐方案 |
理由 |
|
小规模点云 (< 100万点) |
ArrayBuffer + 内存 |
快速访问 |
|
大规模点云 (> 100万点) |
Draco 压缩 + 分块加载 |
节省空间 |
| 实时更新 |
BufferAttribute 局部更新 |
避免重建 |
| 离线项目 |
FileSystem API |
大容量存储 |
📌 通用优化技巧
-
使用 ImageBitmap 替代 HTMLImageElement
// ❌ 不推荐
const img = new Image();
img.src = url;
// ✅ 推荐
const bitmap = await createImageBitmap(await fetch(url).then(r => r.blob()));
-
避免频繁的 putImageData
// ❌ 不推荐
for (let i = 0; i < 100; i++) {
ctx.putImageData(imageData, 0, 0);
}
// ✅ 推荐
const offscreen = new OffscreenCanvas(width, height);
const offCtx = offscreen.getContext('2d')!;
offCtx.putImageData(imageData, 0, 0);
const bitmap = offscreen.transferToImageBitmap();
for (let i = 0; i < 100; i++) {
ctx.drawImage(bitmap, 0, 0);
}
-
WebGL 纹理局部更新
// ❌ 不推荐
texture.needsUpdate = true; // 重新上传整个纹理
// ✅ 推荐
gl.texSubImage2D(...); // 只更新变化的部分
-
分层缓存架构
L1: Memory Cache (10 items) - 1ms
L2: IndexedDB Cache (100 items) - 50ms
L3: FileSystem Cache (unlimited) - 100ms
Network Fallback - 500ms+
-
预加载策略
// 用户空闲时预加载
if ('requestIdleCallback' in window) {
requestIdleCallback(() => {
cache.preload(nextBatchUrls);
}, { timeout: 2000 });
}
🎯 总结
在智驾、机器人标注工具等可视化场景中，选择正确的缓存策略至关重要：
核心要点
-
图片缓存：
- ✅ 优先使用
ImageBitmap（性能最优）
- ✅ 长期存储用
FileSystem API（无序列化开销）
- ✅ 频繁更新用
ImageData + texSubImage2D
-
点云缓存：
- ✅ 小规模：
ArrayBuffer + 内存
- ✅ 大规模：
Draco 压缩 + 分块加载
- ✅ 实时更新：
BufferAttribute 局部更新
-
存储层选择：
-
内存缓存：热点数据（最快，易失）
-
IndexedDB：中期缓存（有查询能力）
-
FileSystem API：长期存储（无序列化开销）
-
性能优化：
- 避免重复解码
- 使用局部更新
- 分块加载大文件
- 预加载策略
最终建议
对于标注工具这类应用，推荐采用混合缓存架构：
// 三层缓存 + 智能预加载
const cache = new HybridCacheSystem();
// 图片：ImageBitmap + FileSystem API
const bitmap = await cache.getImage('image.jpg');
// 点云：Draco 压缩 + 分块加载
const pointCloud = await cache.getPointCloud('scan_001');
通过合理的缓存策略，可以将首屏加载时间从 3-5 秒优化到 0.5-1 秒，标注操作的帧率从 20-30 FPS 提升到 60 FPS，大幅提升用户体验！
📚 参考资料：
💬 互动： 你在项目中遇到过哪些缓存相关的性能问题？欢迎在评论区分享你的经验和解决方案！
本文首发于掘金，转载请注明出处。关注我，获取更多前端可视化、WebGL、性能优化干货！ 🚀
登录