OffscreenCanvas API 与高级缓存管理 ​

// 妫€娴嬫敮鎸?
if (typeof OffscreenCanvas !== 'undefined') {
  const offscreen = new OffscreenCanvas(256, 256);
  const ctx = offscreen.getContext('2d');
  
  // 缁樺埗
  ctx.fillStyle = 'green';
  ctx.fillRect(0, 0, 256, 256);
  
  // 杞负 Blob 鎴?ImageBitmap
  const blob = await offscreen.convertToBlob();
  const bitmap = await offscreen.transferToImageBitmap();
}

const canvas = document.getElementById('canvas');

// 灏?Canvas 鎺у埗鏉冭浆绉荤粰 Worker
const offscreen = canvas.transferControlToOffscreen();

const worker = new Worker('render-worker.js');
worker.postMessage({ canvas: offscreen }, [offscreen]);

// 鍙戦€佸懡浠?
worker.postMessage({ command: 'render', data: { x: 100, y: 100 } });

let ctx;

self.onmessage = (e) => {
  if (e.data.canvas) {
    // 鎺ユ敹 Canvas
    ctx = e.data.canvas.getContext('2d');
    startRender();
  } else if (e.data.command === 'render') {
    render(e.data.data);
  }
};

function startRender() {
  function loop() {
    ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);
    
    // 澶嶆潅鐨勭粯鍒舵搷浣滐紙涓嶉樆濉炰富绾跨▼锛?
    for (let i = 0; i < 1000; i++) {
      ctx.fillStyle = `hsl(${i * 0.36}, 70%, 50%)`;
      ctx.fillRect(Math.random() * 800, Math.random() * 600, 5, 5);
    }
    
    requestAnimationFrame(loop);
  }
  loop();
}

function render(data) {
  ctx.fillStyle = 'red';
  ctx.fillRect(data.x, data.y, 50, 50);
}

class CacheManager {
  constructor(maxSize = 50 * 1024 * 1024) {  // 50MB
    this.cache = new Map();
    this.currentSize = 0;
    this.maxSize = maxSize;
    this.accessOrder = [];  // LRU 闃熷垪
  }
  
  getCacheSize(canvas) {
    // RGBA 姣忓儚绱?4 瀛楄妭
    return canvas.width * canvas.height * 4;
  }
  
  set(key, canvas) {
    const size = this.getCacheSize(canvas);
    
    // 绉婚櫎鏃х殑缂撳瓨浠ヨ吘鍑虹┖闂?
    while (this.currentSize + size > this.maxSize && this.cache.size > 0) {
      this.evictLRU();
    }
    
    // 濡傛灉宸插瓨鍦紝鍏堢Щ闄?
    if (this.cache.has(key)) {
      this.remove(key);
    }
    
    this.cache.set(key, { canvas, size, timestamp: Date.now() });
    this.currentSize += size;
    this.accessOrder.push(key);
  }
  
  get(key) {
    const entry = this.cache.get(key);
    
    if (entry) {
      // 鏇存柊璁块棶鏃堕棿锛圠RU锛?
      const index = this.accessOrder.indexOf(key);
      if (index > -1) {
        this.accessOrder.splice(index, 1);
        this.accessOrder.push(key);
      }
      
      return entry.canvas;
    }
    
    return null;
  }
  
  remove(key) {
    const entry = this.cache.get(key);
    
    if (entry) {
      this.currentSize -= entry.size;
      this.cache.delete(key);
      
      const index = this.accessOrder.indexOf(key);
      if (index > -1) {
        this.accessOrder.splice(index, 1);
      }
    }
  }
  
  evictLRU() {
    // 绉婚櫎鏈€杩戞渶灏戜娇鐢ㄧ殑缂撳瓨
    if (this.accessOrder.length > 0) {
      const oldestKey = this.accessOrder[0];
      this.remove(oldestKey);
    }
  }
  
  clear() {
    this.cache.clear();
    this.accessOrder = [];
    this.currentSize = 0;
  }
  
  getStats() {
    return {
      count: this.cache.size,
      size: this.currentSize,
      maxSize: this.maxSize,
      usage: (this.currentSize / this.maxSize * 100).toFixed(2) + '%'
    };
  }
}

// 浣跨敤
const cacheManager = new CacheManager(20 * 1024 * 1024);  // 20MB

// 缂撳瓨鍥惧舰
function getCachedShape(id, width, height, drawFn) {
  let cached = cacheManager.get(id);
  
  if (!cached) {
    cached = prerenderShape(width, height, drawFn);
    cacheManager.set(id, cached);
  }
  
  return cached;
}

// 浣跨敤
const shape1 = getCachedShape('gradient-circle', 100, 100, (ctx) => {
  // 缁樺埗...
});

ctx.drawImage(shape1, x, y);

// 鏌ョ湅缂撳瓨缁熻
console.log(cacheManager.getStats());
// { count: 1, size: 40000, maxSize: 20971520, usage: "0.19%" }

/**
 * 娴嬭瘯锛氫笉鍚屽鏉傚害鍥惧舰鐨勭紦瀛樻敹鐩?
 */
function benchmarkCacheByComplexity() {
  const frames = 1000;
  
  // 鍦烘櫙1锛氱畝鍗曠煩褰紙鏈紦瀛橈級
  console.time('Simple Shape - No Cache');
  for (let i = 0; i < frames; i++) {
    ctx.clearRect(0, 0, 800, 600);
    ctx.fillStyle = '#3498db';
    ctx.fillRect(100, 100, 200, 150);
  }
  console.timeEnd('Simple Shape - No Cache');
  // 缁撴灉锛氱害 25ms
  
  // 鍦烘櫙2锛氱畝鍗曠煩褰紙宸茬紦瀛橈級
  const simpleCache = document.createElement('canvas');
  simpleCache.width = 200;
  simpleCache.height = 150;
  const simpleCtx = simpleCache.getContext('2d');
  simpleCtx.fillStyle = '#3498db';
  simpleCtx.fillRect(0, 0, 200, 150);
  
  console.time('Simple Shape - Cached');
  for (let i = 0; i < frames; i++) {
    ctx.clearRect(0, 0, 800, 600);
    ctx.drawImage(simpleCache, 100, 100);
  }
  console.timeEnd('Simple Shape - Cached');
  // 缁撴灉锛氱害 22ms
  
  console.log('绠€鍗曞浘褰㈢紦瀛樻敹鐩?', ((25-22)/25*100).toFixed(1) + '%');
  // 缁撴灉锛氱害 12%锛屾敹鐩婂緢灏?
  
  // 鍦烘櫙3锛氬鏉傚浘褰紙鏈紦瀛橈級
  console.time('Complex Shape - No Cache');
  for (let i = 0; i < frames; i++) {
    ctx.clearRect(0, 0, 800, 600);
    
    // 澶嶆潅缁樺埗锛氭笎鍙?+ 闃村奖 + 澶氫釜璺緞
    const gradient = ctx.createRadialGradient(200, 175, 0, 200, 175, 100);
    gradient.addColorStop(0, '#3498db');
    gradient.addColorStop(1, '#2c3e50');
    ctx.fillStyle = gradient;
    
    ctx.shadowColor = 'rgba(0, 0, 0, 0.5)';
    ctx.shadowBlur = 20;
    ctx.shadowOffsetX = 5;
    ctx.shadowOffsetY = 5;
    
    for (let j = 0; j < 50; j++) {
      ctx.beginPath();
      ctx.arc(200 + Math.cos(j * 0.126) * 80, 
              175 + Math.sin(j * 0.126) * 80, 10, 0, Math.PI * 2);
      ctx.fill();
    }
    
    ctx.shadowColor = 'transparent';
  }
  console.timeEnd('Complex Shape - No Cache');
  // 缁撴灉锛氱害 850ms
  
  // 鍦烘櫙4锛氬鏉傚浘褰紙宸茬紦瀛橈級
  const complexCache = document.createElement('canvas');
  complexCache.width = 400;
  complexCache.height = 350;
  const complexCtx = complexCache.getContext('2d');
  
  const gradient = complexCtx.createRadialGradient(200, 175, 0, 200, 175, 100);
  gradient.addColorStop(0, '#3498db');
  gradient.addColorStop(1, '#2c3e50');
  complexCtx.fillStyle = gradient;
  
  complexCtx.shadowColor = 'rgba(0, 0, 0, 0.5)';
  complexCtx.shadowBlur = 20;
  complexCtx.shadowOffsetX = 5;
  complexCtx.shadowOffsetY = 5;
  
  for (let j = 0; j < 50; j++) {
    complexCtx.beginPath();
    complexCtx.arc(200 + Math.cos(j * 0.126) * 80, 
                    175 + Math.sin(j * 0.126) * 80, 10, 0, Math.PI * 2);
    complexCtx.fill();
  }
  
  console.time('Complex Shape - Cached');
  for (let i = 0; i < frames; i++) {
    ctx.clearRect(0, 0, 800, 600);
    ctx.drawImage(complexCache, 0, 0);
  }
  console.timeEnd('Complex Shape - Cached');
  // 缁撴灉锛氱害 28ms
  
  console.log('澶嶆潅鍥惧舰缂撳瓨鏀剁泭:', ((850-28)/850*100).toFixed(1) + '%');
  // 缁撴灉锛氱害 96.7%锛屾敹鐩婂法澶?
}

/**
 * 娴嬭瘯锛氱灞廋anvas鐨勫唴瀛樺崰鐢?
 */
function benchmarkCacheMemory() {
  // 璁＄畻鍗曚釜缂撳瓨鐨勫唴瀛?
  function calcMemory(width, height) {
    return width * height * 4;  // RGBA 4瀛楄妭/鍍忕礌
  }
  
  const scenarios = [
    { size: '灏?100x100)', width: 100, height: 100 },
    { size: '涓?400x400)', width: 400, height: 400 },
    { size: '澶?1000x1000)', width: 1000, height: 1000 },
    { size: '鍏ㄥ睆(1920x1080)', width: 1920, height: 1080 }
  ];
  
  scenarios.forEach(s => {
    const memory = calcMemory(s.width, s.height);
    const mb = (memory / 1024 / 1024).toFixed(2);
    console.log(`${s.size}: ${mb} MB`);
  });
  
  // 缁撴灉锛?
  // 灏?100x100): 0.04 MB
  // 涓?400x400): 0.61 MB
  // 澶?1000x1000): 3.81 MB
  // 鍏ㄥ睆(1920x1080): 8.29 MB
  
  // 澶氫釜缂撳瓨鐨勬€诲唴瀛?
  const cacheCount = 100;
  const avgSize = { width: 200, height: 200 };
  const totalMemory = calcMemory(avgSize.width, avgSize.height) * cacheCount;
  console.log(`\n100涓?00x200缂撳瓨: ${(totalMemory / 1024 / 1024).toFixed(2)} MB`);
  // 缁撴灉锛氱害 15.26 MB
}

/**
 * 娴嬭瘯锛氬姩鎬佸睘鎬у彉鍖栨椂鐨勭紦瀛樻洿鏂版垚鏈?
 */
function benchmarkCacheUpdate() {
  const frames = 1000;
  
  // 鍦烘櫙1锛氭瘡甯ч兘鍙樺寲锛堢紦瀛樻棤鎰忎箟锛?
  console.time('Change Every Frame - Cached');
  const cache1 = document.createElement('canvas');
  cache1.width = 200;
  cache1.height = 200;
  const cacheCtx1 = cache1.getContext('2d');
  
  for (let i = 0; i < frames; i++) {
    // 姣忓抚閲嶅缓缂撳瓨
    cacheCtx1.clearRect(0, 0, 200, 200);
    cacheCtx1.fillStyle = `hsl(${i % 360}, 70%, 50%)`;  // 棰滆壊姣忓抚鍙樺寲
    cacheCtx1.fillRect(0, 0, 200, 200);
    
    // 浣跨敤缂撳瓨
    ctx.drawImage(cache1, 100, 100);
  }
  console.timeEnd('Change Every Frame - Cached');
  // 缁撴灉锛氱害 35ms
  
  // 鍦烘櫙2锛氭瘡甯ч兘鍙樺寲锛堜笉缂撳瓨锛?
  console.time('Change Every Frame - No Cache');
  for (let i = 0; i < frames; i++) {
    ctx.fillStyle = `hsl(${i % 360}, 70%, 50%)`;
    ctx.fillRect(100, 100, 200, 200);
  }
  console.timeEnd('Change Every Frame - No Cache');
  // 缁撴灉锛氱害 28ms
  
  console.log('棰戠箒鍙樺寲鏃剁紦瀛樺弽鑰屾參:', ((35-28)/28*100).toFixed(1) + '%');
  // 缁撴灉锛氭參绾?25%
  
  // 鍦烘櫙3锛氭瘡10甯у彉鍖栦竴娆★紙缂撳瓨鏈夋剰涔夛級
  console.time('Change Every 10 Frames - Cached');
  const cache3 = document.createElement('canvas');
  cache3.width = 200;
  cache3.height = 200;
  const cacheCtx3 = cache3.getContext('2d');
  
  for (let i = 0; i < frames; i++) {
    // 姣?0甯ч噸寤轰竴娆＄紦瀛?
    if (i % 10 === 0) {
      cacheCtx3.clearRect(0, 0, 200, 200);
      cacheCtx3.fillStyle = `hsl(${Math.floor(i/10) * 36}, 70%, 50%)`;
      cacheCtx3.fillRect(0, 0, 200, 200);
    }
    
    ctx.drawImage(cache3, 100, 100);
  }
  console.timeEnd('Change Every 10 Frames - Cached');
  // 缁撴灉锛氱害 26ms
  
  console.log('浣庨鍙樺寲鏃剁紦瀛樻湁浼樺娍:', ((28-26)/28*100).toFixed(1) + '%');
  // 缁撴灉锛氬揩绾?7%
}

// 缁忛獙鍏紡
const updateInterval = 10;  // 甯?
const shouldCache = updateInterval >= 10;  // 鑷冲皯10甯т笉鍙樻墠鍊煎緱缂撳瓨

class TileCache {
  constructor() {
    this.cache = new Map();
  }
  
  getTile(tileId) {
    if (!this.cache.has(tileId)) {
      // 棣栨娓叉煋鍒扮灞廋anvas
      const canvas = this.renderTile(tileId);
      this.cache.set(tileId, canvas);
    }
    return this.cache.get(tileId);
  }
  
  renderTile(tileId) {
    const canvas = document.createElement('canvas');
    canvas.width = 64;
    canvas.height = 64;
    const ctx = canvas.getContext('2d');
    
    // 澶嶆潅缁樺埗...
    this.drawComplexTile(ctx, tileId);
    
    return canvas;
  }
}

// 浣跨敤
const tileCache = new TileCache();

function renderMap(map) {
  for (let y = 0; y < map.height; y++) {
    for (let x = 0; x < map.width; x++) {
      const tileId = map.tiles[y][x];
      const cached = tileCache.getTile(tileId);  // 澶嶇敤缂撳瓨
      ctx.drawImage(cached, x * 64, y * 64);
    }
  }
}

class AvatarCache {
  constructor(maxSize = 100) {
    this.cache = new LRUCache(maxSize);  // 浣跨敤LRU閬垮厤鍐呭瓨婧㈠嚭
  }
  
  getProcessedAvatar(imageUrl) {
    let cached = this.cache.get(imageUrl);
    
    if (!cached) {
      cached = this.processAvatar(imageUrl);
      this.cache.set(imageUrl, cached);
    }
    
    return cached;
  }
  
  processAvatar(imageUrl) {
    const size = 80;
    const canvas = document.createElement('canvas');
    canvas.width = size;
    canvas.height = size;
    const ctx = canvas.getContext('2d');
    
    // 鍦嗗舰瑁佸壀
    ctx.beginPath();
    ctx.arc(size / 2, size / 2, size / 2, 0, Math.PI * 2);
    ctx.clip();
    
    // 缁樺埗鍥惧儚
    ctx.drawImage(image, 0, 0, size, size);
    
    // 杈规
    ctx.strokeStyle = '#ffffff';
    ctx.lineWidth = 2;
    ctx.stroke();
    
    return canvas;
  }
}

// 绮掑瓙绯荤粺锛氱洿鎺ョ粯鍒舵渶蹇?
function renderParticles() {
  particles.forEach(p => {
    ctx.fillStyle = p.color;
    ctx.fillRect(p.x, p.y, p.size, p.size);  // 绠€鍗曢珮鏁?
  });
}

class ChartRenderer {
  constructor() {
    // 缂撳瓨闈欐€佸厓绱犲埌绂诲睆Canvas
    this.axesCache = this.prerenderAxes();
    
    // 鍔ㄦ€佹暟鎹眰
    this.dataCanvas = document.createElement('canvas');
    this.dataCtx = this.dataCanvas.getContext('2d');
  }
  
  prerenderAxes() {
    const canvas = document.createElement('canvas');
    canvas.width = this.width;
    canvas.height = this.height;
    const ctx = canvas.getContext('2d');
    
    // 缁樺埗鍧愭爣杞淬€佹爣绛俱€佺綉鏍硷紙鍙敾涓€娆★級
    this.drawAxes(ctx);
    this.drawLabels(ctx);
    this.drawGrid(ctx);
    
    return canvas;
  }
  
  render(data) {
    // 缁樺埗缂撳瓨鐨勫潗鏍囪酱
    this.ctx.drawImage(this.axesCache, 0, 0);
    
    // 娓呴櫎骞堕噸缁樻暟鎹紙涓嶇紦瀛橈級
    this.dataCtx.clearRect(0, 0, this.width, this.height);
    this.drawData(this.dataCtx, data);
    this.ctx.drawImage(this.dataCanvas, 0, 0);
  }
}

/**
 * 缂撳瓨鏀剁泭璁＄畻鍣?
 */
class CacheROICalculator {
  /**
   * @param {number} drawTime - 鏈紦瀛樼粯鍒舵椂闂?ms)
   * @param {number} cacheDrawTime - 缂撳瓨鏇存柊鏃堕棿(ms)
   * @param {number} drawImageTime - drawImage鏃堕棿(ms锛岄€氬父0.02-0.05)
   * @param {number} reuseCount - 棰勬湡澶嶇敤娆℃暟
   * @param {number} updateFrequency - 鏇存柊棰戠巼锛?=姣忓抚锛?0=姣?0甯э級
   * @return {object} - 鏀剁泭鍒嗘瀽
   */
  calculate(drawTime, cacheDrawTime, drawImageTime, reuseCount, updateFrequency) {
    // 鏈紦瀛樻€绘垚鏈?
    const noCacheCost = drawTime * reuseCount;
    
    // 缂撳瓨鎬绘垚鏈?
    const updateCount = Math.ceil(reuseCount / updateFrequency);
    const cacheCost = cacheDrawTime * updateCount + drawImageTime * reuseCount;
    
    // 鏀剁泭
    const benefit = noCacheCost - cacheCost;
    const benefitPercent = (benefit / noCacheCost * 100).toFixed(1);
    
    return {
      noCacheCost,
      cacheCost,
      benefit,
      benefitPercent,
      shouldCache: benefit > 0,
      speedup: (noCacheCost / cacheCost).toFixed(1) + 'x'
    };
  }
}

// 浣跨敤绀轰緥
const calc = new CacheROICalculator();

// 鍦烘櫙1锛氬鏉傚浘褰紝姣?0甯ф洿鏂颁竴娆★紝澶嶇敤100娆?
const result1 = calc.calculate(5, 5, 0.03, 100, 10);
console.log(result1);
// {
//   noCacheCost: 500,
//   cacheCost: 53,
//   benefit: 447,
//   benefitPercent: "89.4%",
//   shouldCache: true,
//   speedup: "9.4x"
// }

// 鍦烘櫙2锛氱畝鍗曞浘褰紝姣忓抚鏇存柊
const result2 = calc.calculate(0.1, 0.1, 0.03, 100, 1);
console.log(result2);
// {
//   noCacheCost: 10,
//   cacheCost: 13,
//   benefit: -3,
//   benefitPercent: "-30.0%",
//   shouldCache: false,
//   speedup: "0.8x"
// }

/**
 * 鏅鸿兘缂撳瓨锛氳嚜鍔ㄥ喅绛栨槸鍚︾紦瀛?
 */
class SmartCache {
  constructor() {
    this.cache = new Map();
    this.stats = new Map();  // 璁板綍姣忎釜瀵硅薄鐨勭粯鍒舵椂闂?
  }
  
  draw(id, drawFn, ctx, x, y) {
    // 棣栨缁樺埗锛氳褰曟椂闂?
    if (!this.stats.has(id)) {
      const start = performance.now();
      drawFn(ctx, x, y);
      const drawTime = performance.now() - start;
      
      this.stats.set(id, { drawTime, count: 1 });
      
      // 濡傛灉缁樺埗鏃堕棿 > 1ms锛屽€煎緱缂撳瓨
      if (drawTime > 1) {
        this.cacheObject(id, drawFn);
      }
    } else {
      const stat = this.stats.get(id);
      stat.count++;
      
      // 浣跨敤缂撳瓨
      if (this.cache.has(id)) {
        ctx.drawImage(this.cache.get(id), x, y);
      } else {
        drawFn(ctx, x, y);
        
        // 澶嶇敤3娆″悗锛岃€冭檻缂撳瓨
        if (stat.count >= 3 && stat.drawTime > 0.5) {
          this.cacheObject(id, drawFn);
        }
      }
    }
  }
  
  cacheObject(id, drawFn) {
    const canvas = document.createElement('canvas');
    canvas.width = 200;  // 鏍规嵁瀹為檯灏哄
    canvas.height = 200;
    const ctx = canvas.getContext('2d');
    drawFn(ctx, 0, 0);
    this.cache.set(id, canvas);
    console.log(`缂撳瓨瀵硅薄 ${id}锛堢粯鍒舵椂闂? ${this.stats.get(id).drawTime.toFixed(2)}ms锛塦);
  }
}

/**
 * 缂撳瓨鎬ц兘鐩戞帶
 */
class CacheMonitor {
  constructor() {
    this.hits = 0;
    this.misses = 0;
    this.totalDrawTime = 0;
    this.totalCacheTime = 0;
  }
  
  recordHit(cacheTime) {
    this.hits++;
    this.totalCacheTime += cacheTime;
  }
  
  recordMiss(drawTime) {
    this.misses++;
    this.totalDrawTime += drawTime;
  }
  
  getReport() {
    const hitRate = (this.hits / (this.hits + this.misses) * 100).toFixed(1);
    const avgDrawTime = (this.totalDrawTime / this.misses).toFixed(2);
    const avgCacheTime = (this.totalCacheTime / this.hits).toFixed(2);
    const speedup = (avgDrawTime / avgCacheTime).toFixed(1);
    
    return {
      hitRate: hitRate + '%',
      avgDrawTime: avgDrawTime + 'ms',
      avgCacheTime: avgCacheTime + 'ms',
      speedup: speedup + 'x'
    };
  }
}

// 浣跨敤
const monitor = new CacheMonitor();

function drawWithMonitoring(id, drawFn) {
  if (cache.has(id)) {
    const start = performance.now();
    ctx.drawImage(cache.get(id), x, y);
    monitor.recordHit(performance.now() - start);
  } else {
    const start = performance.now();
    drawFn();
    monitor.recordMiss(performance.now() - start);
  }
}

// 姣忕杈撳嚭鎶ュ憡
setInterval(() => {
  console.log(monitor.getReport());
}, 1000);