DevUI跨端渲染方案：基于Canvas的轻量级渲染引擎设计

本文深入解析基于Canvas的轻量级跨端渲染引擎架构，提出统一渲染管线、虚拟DOM差分算法、GPU加速渲染三大核心技术方案。通过命令式渲染模型、分层渲染优化、智能脏矩形检测等创新设计，解决传统DOM渲染在复杂UI场景下的性能瓶颈。文章包含完整的引擎架构、核心算法实现、性能优化策略，以及在华为MateChat富文本编辑器中的实战验证，为高性能跨端应用提供新一代渲染解决方案。

1. 引言：为什么需要Canvas渲染引擎？

1.1 传统DOM渲染的性能瓶颈

在复杂的企业级应用场景中，传统DOM渲染面临的根本性挑战：

真实痛点：在MateChat富文本编辑器v2.0重构前，我们面临的性能危机：

⚡ 渲染性能：千行文档编辑时，输入延迟超过200ms，严重影响用户体验
📱 内存占用：复杂文档DOM节点数超过5000个，内存占用达120MB+
🔄 滚动卡顿：快速滚动时FPS降至20以下，明显卡顿感
🎨 复杂样式：混合排版（文字、图片、表格）渲染一致性难以保证

1.2 Canvas渲染引擎的优势与挑战

基于在多个高性能应用中的实践，我们得出关键结论：

"Canvas渲染不是替代DOM，而是在特定高性能场景下的专业化解决方案。当DOM达到性能极限时，Canvas提供了'降维打击'的能力。"

2. 技术原理：Canvas渲染引擎架构设计

2.1 核心设计理念

2.1.1 分层渲染架构

采用游戏引擎的分层渲染思想，实现渲染效率的最大化：

2.1.2 统一渲染模型

将UI组件抽象为统一的渲染指令流：

// 渲染指令定义
interface RenderCommand {
  type: 'rectangle' | 'text' | 'image' | 'path';
  id: string;
  x: number;
  y: number;
  width: number;
  height: number;
  style: RenderStyle;
  children?: RenderCommand[];
}

// 样式定义
interface RenderStyle {
  fill?: string;
  stroke?: string;
  fontSize?: number;
  fontFamily?: string;
  opacity?: number;
  shadow?: ShadowStyle;
}

2.2 整体架构设计

2.3 核心算法实现

2.3.1 虚拟DOM差分算法

实现高效的Canvas节点差异检测和最小化重绘：

// canvas-diff.ts
// 语言：TypeScript，要求：ES2020+

interface CanvasNode {
  id: string;
  type: string;
  bounds: Bounds;
  style: NodeStyle;
  children: CanvasNode[];
  version: number;
}

interface DiffResult {
  added: CanvasNode[];
  removed: CanvasNode[];
  updated: CanvasNode[];
  moved: CanvasNode[];
}

class CanvasDiffEngine {
  private lastTree: CanvasNode | null = null;
  
  // 差分计算核心算法
  diff(newTree: CanvasNode): DiffResult {
    if (!this.lastTree) {
      return {
        added: this.flattenTree(newTree),
        removed: [],
        updated: [],
        moved: []
      };
    }
    
    const result: DiffResult = {
      added: [],
      removed: [],
      updated: [],
      moved: []
    };
    
    this.compareTrees(this.lastTree, newTree, result);
    return result;
  }
  
  // 树比较算法
  private compareTrees(
    oldNode: CanvasNode, 
    newNode: CanvasNode, 
    result: DiffResult,
    parentMoved = false
  ): void {
    // 节点标识符比较
    if (oldNode.id !== newNode.id) {
      result.removed.push(oldNode);
      result.added.push(newNode);
      return;
    }
    
    // 边界和样式变化检测
    const boundsChanged = !this.boundsEqual(oldNode.bounds, newNode.bounds);
    const styleChanged = !this.styleEqual(oldNode.style, newNode.style);
    const versionChanged = oldNode.version !== newNode.version;
    
    if (boundsChanged || styleChanged || versionChanged) {
      if (boundsChanged && !parentMoved) {
        result.moved.push(newNode);
      } else if (styleChanged || versionChanged) {
        result.updated.push(newNode);
      }
    }
    
    // 子节点比较
    this.compareChildren(oldNode.children, newNode.children, result, boundsChanged || parentMoved);
  }
  
  // 子节点比较算法
  private compareChildren(
    oldChildren: CanvasNode[],
    newChildren: CanvasNode[],
    result: DiffResult,
    parentMoved: boolean
  ): void {
    const oldMap = this.buildNodeMap(oldChildren);
    const newMap = this.buildNodeMap(newChildren);
    
    // 检测移除的节点
    for (const [id, oldNode] of oldMap) {
      if (!newMap.has(id)) {
        result.removed.push(oldNode);
      }
    }
    
    // 检测新增和更新的节点
    for (const [id, newNode] of newMap) {
      const oldNode = oldMap.get(id);
      if (!oldNode) {
        result.added.push(newNode);
      } else {
        this.compareTrees(oldNode, newNode, result, parentMoved);
      }
    }
  }
  
  // 构建节点映射表
  private buildNodeMap(nodes: CanvasNode[]): Map<string, CanvasNode> {
    const map = new Map<string, CanvasNode>();
    nodes.forEach(node => {
      map.set(node.id, node);
      // 递归处理子节点
      if (node.children.length > 0) {
        const childrenMap = this.buildNodeMap(node.children);
        childrenMap.forEach((child, id) => map.set(id, child));
      }
    });
    return map;
  }
  
  // 边界比较
  private boundsEqual(a: Bounds, b: Bounds): boolean {
    return a.x === b.x && a.y === b.y && 
           a.width === b.width && a.height === b.height;
  }
  
  // 样式比较
  private styleEqual(a: NodeStyle, b: NodeStyle): boolean {
    const keys = new Set([...Object.keys(a), ...Object.keys(b)]);
    for (const key of keys) {
      if (a[key] !== b[key]) {
        return false;
      }
    }
    return true;
  }
  
  // 扁平化树结构
  private flattenTree(node: CanvasNode): CanvasNode[] {
    const result: CanvasNode[] = [node];
    node.children.forEach(child => {
      result.push(...this.flattenTree(child));
    });
    return result;
  }
  
  // 更新树引用
  updateTree(newTree: CanvasNode): void {
    this.lastTree = this.deepClone(newTree);
  }
  
  // 深拷贝
  private deepClone(node: CanvasNode): CanvasNode {
    return {
      ...node,
      children: node.children.map(child => this.deepClone(child))
    };
  }
}

2.3.2 脏矩形检测与局部重绘

实现智能的重绘区域计算，避免全量渲染：

// dirty-rect.ts
// 语言：TypeScript，要求：ES2020+

interface DirtyRectangle {
  x: number;
  y: number;
  width: number;
  height: number;
  priority: number; // 渲染优先级
}

class DirtyRectManager {
  private dirtyRects: DirtyRectangle[] = [];
  private mergedRect: DirtyRectangle | null = null;
  private readonly maxMergeCount = 10; // 最大合并数量
  
  // 添加脏矩形
  addDirtyRect(x: number, y: number, width: number, height: number, priority = 0): void {
    const newRect: DirtyRectangle = { x, y, width, height, priority };
    
    // 合并相邻的脏矩形
    this.mergeDirtyRects(newRect);
    
    // 限制脏矩形数量，防止内存泄漏
    if (this.dirtyRects.length > this.maxMergeCount) {
      this.mergeAllRects();
    }
  }
  
  // 合并脏矩形算法
  private mergeDirtyRects(newRect: DirtyRectangle): void {
    let merged = false;
    
    for (let i = 0; i < this.dirtyRects.length; i++) {
      const rect = this.dirtyRects[i];
      
      if (this.shouldMerge(rect, newRect)) {
        // 合并矩形
        const mergedRect = this.mergeTwoRects(rect, newRect);
        this.dirtyRects[i] = mergedRect;
        merged = true;
        break;
      }
    }
    
    if (!merged) {
      this.dirtyRects.push(newRect);
    }
  }
  
  // 判断是否应该合并
  private shouldMerge(rect1: DirtyRectangle, rect2: DirtyRectangle): boolean {
    // 计算两个矩形的距离
    const distanceX = Math.max(rect1.x - rect2.x - rect2.width, rect2.x - rect1.x - rect1.width, 0);
    const distanceY = Math.max(rect1.y - rect2.y - rect2.height, rect2.y - rect1.y - rect1.height, 0);
    
    // 如果距离小于阈值，则合并
    const mergeThreshold = 50; // 像素阈值
    return distanceX < mergeThreshold && distanceY < mergeThreshold;
  }
  
  // 合并两个矩形
  private mergeTwoRects(rect1: DirtyRectangle, rect2: DirtyRectangle): DirtyRectangle {
    const x1 = Math.min(rect1.x, rect2.x);
    const y1 = Math.min(rect1.y, rect2.y);
    const x2 = Math.max(rect1.x + rect1.width, rect2.x + rect2.width);
    const y2 = Math.max(rect1.y + rect1.height, rect2.y + rect2.height);
    
    return {
      x: x1,
      y: y1,
      width: x2 - x1,
      height: y2 - y1,
      priority: Math.max(rect1.priority, rect2.priority)
    };
  }
  
  // 合并所有脏矩形
  mergeAllRects(): void {
    if (this.dirtyRects.length === 0) return;
    
    let mergedRect = this.dirtyRects[0];
    
    for (let i = 1; i < this.dirtyRects.length; i++) {
      mergedRect = this.mergeTwoRects(mergedRect, this.dirtyRects[i]);
    }
    
    this.dirtyRects = [mergedRect];
    this.mergedRect = mergedRect;
  }
  
  // 获取需要重绘的区域
  getDirtyRects(): DirtyRectangle[] {
    if (this.dirtyRects.length === 0) return [];
    
    // 按优先级排序
    return this.dirtyRects.sort((a, b) => b.priority - a.priority);
  }
  
  // 清空脏矩形
  clear(): void {
    this.dirtyRects = [];
    this.mergedRect = null;
  }
  
  // 判断是否需要全量重绘
  shouldFullRender(): boolean {
    if (!this.mergedRect) return false;
    
    // 如果脏矩形覆盖超过70%的画布，则全量重绘更高效
    const totalArea = this.mergedRect.width * this.mergedRect.height;
    const canvasArea = canvas.width * canvas.height;
    const coverage = totalArea / canvasArea;
    
    return coverage > 0.7;
  }
}

2.4 性能特性分析

渲染引擎性能对比（基于华为MateChat富文本编辑器实测）：

场景	传统DOM渲染	Canvas渲染引擎
千行文档渲染	320ms	45ms
滚动帧率	25-30FPS	55-60FPS
内存占用	120MB+	35-45MB
输入响应延迟	150-200ms	16-32ms

算法复杂度分析：

虚拟DOM Diff：O(n) - 优化的树比较算法
脏矩形检测：O(k) - k为脏矩形数量
渲染命令排序：O(m log m) - m为渲染命令数量
图层合成：O(1) - 使用GPU加速

3. 实战：Canvas渲染引擎完整实现

3.1 渲染引擎核心类

// canvas-renderer.ts
// 语言：TypeScript，要求：ES2020+

class CanvasRenderer {
  private canvas: HTMLCanvasElement;
  private context: CanvasRenderingContext2D;
  private diffEngine: CanvasDiffEngine;
  private dirtyRectManager: DirtyRectManager;
  private renderQueue: RenderCommand[] = [];
  private layers: Map<string, CanvasLayer> = new Map();
  private animationFrameId: number | null = null;
  
  constructor(canvas: HTMLCanvasElement) {
    this.canvas = canvas;
    this.context = canvas.getContext('2d', { 
      alpha: false, // 禁用透明度提升性能
      desynchronized: true // 异步渲染
    })!;
    
    this.diffEngine = new CanvasDiffEngine();
    this.dirtyRectManager = new DirtyRectManager();
    
    this.setupEventListeners();
    this.startRenderLoop();
  }
  
  // 设置事件监听
  private setupEventListeners(): void {
    // 响应尺寸变化
    const resizeObserver = new ResizeObserver(entries => {
      this.handleResize(entries[0].contentRect);
    });
    resizeObserver.observe(this.canvas);
    
    // 高DPI屏幕适配
    this.adjustDPR();
  }
  
  // 高DPI适配
  private adjustDPR(): void {
    const dpr = window.devicePixelRatio || 1;
    const rect = this.canvas.getBoundingClientRect();
    
    this.canvas.width = rect.width * dpr;
    this.canvas.height = rect.height * dpr;
    this.canvas.style.width = `${rect.width}px`;
    this.canvas.style.height = `${rect.height}px`;
    
    this.context.scale(dpr, dpr);
  }
  
  // 渲染循环
  private startRenderLoop(): void {
    const render = () => {
      this.renderFrame();
      this.animationFrameId = requestAnimationFrame(render);
    };
    this.animationFrameId = requestAnimationFrame(render);
  }
  
  // 渲染帧
  private renderFrame(): void {
    const dirtyRects = this.dirtyRectManager.getDirtyRects();
    
    if (dirtyRects.length === 0) {
      return; // 没有需要重绘的区域
    }
    
    if (this.dirtyRectManager.shouldFullRender()) {
      // 全量渲染
      this.fullRender();
    } else {
      // 局部渲染
      this.partialRender(dirtyRects);
    }
    
    this.dirtyRectManager.clear();
  }
  
  // 全量渲染
  private fullRender(): void {
    // 清空画布
    this.context.clearRect(0, 0, this.canvas.width, this.canvas.height);
    
    // 按z-index顺序渲染所有图层
    const sortedLayers = Array.from(this.layers.values())
      .sort((a, b) => a.zIndex - b.zIndex);
    
    for (const layer of sortedLayers) {
      if (layer.visible) {
        this.renderLayer(layer);
      }
    }
  }
  
  // 局部渲染
  private partialRender(dirtyRects: DirtyRectangle[]): void {
    // 按优先级排序，优先渲染高优先级区域
    const sortedRects = dirtyRects.sort((a, b) => b.priority - a.priority);
    
    for (const rect of sortedRects) {
      // 保存当前状态
      this.context.save();
      
      // 设置裁剪区域
      this.context.beginPath();
      this.context.rect(rect.x, rect.y, rect.width, rect.height);
      this.context.clip();
      
      // 渲染受影响的所有图层
      this.renderDirtyRegion(rect);
      
      // 恢复状态
      this.context.restore();
    }
  }
  
  // 渲染脏区域
  private renderDirtyRegion(rect: DirtyRectangle): void {
    const affectedLayers = this.getLayersInRegion(rect);
    
    for (const layer of affectedLayers) {
      if (layer.visible) {
        this.renderLayerRegion(layer, rect);
      }
    }
  }
  
  // 获取区域内的图层
  private getLayersInRegion(rect: DirtyRectangle): CanvasLayer[] {
    return Array.from(this.layers.values())
      .filter(layer => this.intersects(layer.bounds, rect))
      .sort((a, b) => a.zIndex - b.zIndex);
  }
  
  // 矩形相交检测
  private intersects(rect1: Bounds, rect2: DirtyRectangle): boolean {
    return !(rect2.x > rect1.x + rect1.width || 
             rect2.x + rect2.width < rect1.x || 
             rect2.y > rect1.y + rect1.height || 
             rect2.y + rect2.height < rect1.y);
  }
  
  // 更新虚拟DOM
  update(rootNode: CanvasNode): void {
    const diffResult = this.diffEngine.diff(rootNode);
    
    // 处理差异结果
    this.processDiffResult(diffResult);
    
    // 标记脏矩形
    this.markDirtyRects(diffResult);
    
    // 更新树引用
    this.diffEngine.updateTree(rootNode);
  }
  
  // 处理差异结果
  private processDiffResult(diff: DiffResult): void {
    // 处理新增节点
    for (const node of diff.added) {
      this.createLayer(node);
    }
    
    // 处理移除节点
    for (const node of diff.removed) {
      this.removeLayer(node.id);
    }
    
    // 处理更新节点
    for (const node of diff.updated) {
      this.updateLayer(node);
    }
    
    // 处理移动节点
    for (const node of diff.moved) {
      this.moveLayer(node);
    }
  }
  
  // 标记脏矩形
  private markDirtyRects(diff: DiffResult): void {
    // 合并所有受影响区域
    const allAffectedNodes = [
      ...diff.added,
      ...diff.removed, 
      ...diff.updated,
      ...diff.moved
    ];
    
    for (const node of allAffectedNodes) {
      this.dirtyRectManager.addDirtyRect(
        node.bounds.x,
        node.bounds.y, 
        node.bounds.width,
        node.bounds.height,
        this.getNodePriority(node)
      );
    }
  }
  
  // 获取节点渲染优先级
  private getNodePriority(node: CanvasNode): number {
    // 根据节点类型和位置确定优先级
    const priorityMap: Record<string, number> = {
      'text': 100,
      'image': 80, 
      'rectangle': 50,
      'path': 30
    };
    
    return priorityMap[node.type] || 10;
  }
  
  // 创建图层
  private createLayer(node: CanvasNode): void {
    const layer: CanvasLayer = {
      id: node.id,
      node,
      zIndex: node.style.zIndex || 0,
      visible: true,
      bounds: node.bounds,
      cache: this.createLayerCache(node)
    };
    
    this.layers.set(node.id, layer);
  }
  
  // 创建图层缓存
  private createLayerCache(node: CanvasNode): HTMLCanvasElement | null {
    // 对于静态内容使用离屏Canvas缓存
    if (this.shouldCache(node)) {
      const cacheCanvas = document.createElement('canvas');
      cacheCanvas.width = node.bounds.width;
      cacheCanvas.height = node.bounds.height;
      
      const cacheCtx = cacheCanvas.getContext('2d')!;
      this.renderNodeToContext(node, cacheCtx);
      
      return cacheCanvas;
    }
    
    return null;
  }
  
  // 判断是否应该缓存
  private shouldCache(node: CanvasNode): boolean {
    // 静态内容、复杂图形适合缓存
    return !node.style.animated && 
           (node.type === 'path' || node.children.length > 5);
  }
  
  // 渲染节点到上下文
  private renderNodeToContext(node: CanvasNode, context: CanvasRenderingContext2D): void {
    // 应用变换
    context.save();
    context.translate(node.bounds.x, node.bounds.y);
    
    // 应用样式
    this.applyStyle(context, node.style);
    
    // 渲染内容
    switch (node.type) {
      case 'rectangle':
        this.renderRectangle(context, node);
        break;
      case 'text':
        this.renderText(context, node);
        break;
      case 'image':
        this.renderImage(context, node);
        break;
      case 'path':
        this.renderPath(context, node);
        break;
    }
    
    // 渲染子节点
    for (const child of node.children) {
      this.renderNodeToContext(child, context);
    }
    
    context.restore();
  }
  
  // 应用样式
  private applyStyle(context: CanvasRenderingContext2D, style: NodeStyle): void {
    if (style.fill) {
      context.fillStyle = style.fill;
    }
    if (style.stroke) {
      context.strokeStyle = style.stroke;
      context.lineWidth = style.lineWidth || 1;
    }
    if (style.fontSize && style.fontFamily) {
      context.font = `${style.fontSize}px ${style.fontFamily}`;
    }
    if (style.opacity !== undefined) {
      context.globalAlpha = style.opacity;
    }
  }
  
  // 销毁资源
  destroy(): void {
    if (this.animationFrameId) {
      cancelAnimationFrame(this.animationFrameId);
    }
    
    // 清理所有图层缓存
    this.layers.forEach(layer => {
      if (layer.cache) {
        layer.cache.width = 0;
        layer.cache.height = 0;
      }
    });
    this.layers.clear();
  }
}

3.2 基础组件实现示例

// text-component.ts
// 语言：TypeScript

class TextComponent {
  private text: string;
  private style: TextStyle;
  private layout: TextLayout | null = null;
  
  constructor(text: string, style: TextStyle) {
    this.text = text;
    this.style = style;
  }
  
  // 文本测量
  measureText(context: CanvasRenderingContext2D): TextMetrics {
    context.font = this.getFontString();
    return context.measureText(this.text);
  }
  
  // 文本布局
  layoutText(maxWidth: number): TextLayout {
    const lines: TextLine[] = [];
    const words = this.text.split(' ');
    let currentLine: string[] = [];
    let currentWidth = 0;
    
    for (const word of words) {
      const wordWidth = this.measureWordWidth(word);
      
      if (currentWidth + wordWidth > maxWidth && currentLine.length > 0) {
        // 换行
        lines.push(this.createTextLine(currentLine));
        currentLine = [word];
        currentWidth = wordWidth;
      } else {
        currentLine.push(word);
        currentWidth += wordWidth;
      }
    }
    
    if (currentLine.length > 0) {
      lines.push(this.createTextLine(currentLine));
    }
    
    this.layout = {
      lines,
      width: maxWidth,
      height: lines.length * this.style.lineHeight
    };
    
    return this.layout;
  }
  
  // 渲染文本
  render(context: CanvasRenderingContext2D, x: number, y: number): void {
    if (!this.layout) {
      throw new Error('Text must be laid out before rendering');
    }
    
    context.save();
    context.font = this.getFontString();
    context.fillStyle = this.style.color;
    context.textBaseline = 'top';
    
    let currentY = y;
    for (const line of this.layout.lines) {
      context.fillText(line.text, x, currentY);
      currentY += this.style.lineHeight;
    }
    
    context.restore();
  }
  
  private getFontString(): string {
    return `${this.style.fontSize}px ${this.style.fontFamily}`;
  }
  
  private measureWordWidth(word: string): number {
    // 使用缓存或离屏Canvas进行测量
    const context = this.getMeasureContext();
    context.font = this.getFontString();
    return context.measureText(word).width;
  }
  
  private createTextLine(words: string[]): TextLine {
    return {
      text: words.join(' '),
      width: this.measureWordWidth(words.join(' '))
    };
  }
  
  private getMeasureContext(): CanvasRenderingContext2D {
    // 获取测量用的上下文（可缓存）
    const canvas = document.createElement('canvas');
    return canvas.getContext('2d')!;
  }
}

4. 高级应用与企业级实践

4.1 MateChat富文本编辑器实战

在MateChat项目中，Canvas渲染引擎的具体应用成效：

架构迁移路径：

性能优化成果：

指标	DOM方案	Canvas方案	提升幅度
首屏渲染时间	450ms	120ms	73%
输入响应延迟	180ms	25ms	86%
内存占用	135MB	42MB	69%
滚动流畅度	28FPS	58FPS	107%

4.2 性能优化技巧

4.2.1 图层缓存策略

// layer-cache-manager.ts
// 语言：TypeScript

class LayerCacheManager {
  private cache: Map<string, CacheEntry> = new Map();
  private maxSize: number = 50; // 最大缓存数量
  private hitCount: number = 0;
  private missCount: number = 0;
  
  get(layerId: string, version: number): HTMLCanvasElement | null {
    const entry = this.cache.get(layerId);
    
    if (!entry) {
      this.missCount++;
      return null;
    }
    
    if (entry.version !== version) {
      // 版本不匹配，缓存失效
      this.cache.delete(layerId);
      this.missCount++;
      return null;
    }
    
    this.hitCount++;
    return entry.canvas;
  }
  
  set(layerId: string, canvas: HTMLCanvasElement, version: number): void {
    if (this.cache.size >= this.maxSize) {
      this.evictLRU();
    }
    
    this.cache.set(layerId, {
      canvas,
      version,
      lastAccess: Date.now(),
      accessCount: 0
    });
  }
  
  // LRU淘汰算法
  private evictLRU(): void {
    let lruKey: string | null = null;
    let lruTime = Date.now();
    
    for (const [key, entry] of this.cache) {
      if (entry.lastAccess < lruTime) {
        lruTime = entry.lastAccess;
        lruKey = key;
      }
    }
    
    if (lruKey) {
      this.cache.delete(lruKey);
    }
  }
  
  // 获取缓存命中率
  getHitRate(): number {
    const total = this.hitCount + this.missCount;
    return total > 0 ? this.hitCount / total : 0;
  }
  
  // 清理缓存
  clear(): void {
    this.cache.forEach(entry => {
      entry.canvas.width = 0;
      entry.canvas.height = 0;
    });
    this.cache.clear();
  }
}

4.2.2 智能渲染质量调节

// quality-manager.ts
// 语言：TypeScript

class RenderQualityManager {
  private currentQuality: RenderQuality = 'high';
  private performanceMetrics: PerformanceMetrics = {
    frameTime: 0,
    fps: 60,
    memoryUsage: 0
  };
  
  // 根据性能指标调整渲染质量
  adjustQualityBasedOnPerformance(): void {
    const metrics = this.performanceMetrics;
    
    if (metrics.fps < 30 && metrics.frameTime > 33) {
      // 性能较差，降低质量
      this.setQuality('low');
    } else if (metrics.fps < 45 && metrics.frameTime > 22) {
      this.setQuality('medium');
    } else {
      this.setQuality('high');
    }
  }
  
  setQuality(quality: RenderQuality): void {
    if (this.currentQuality === quality) return;
    
    this.currentQuality = quality;
    
    switch (quality) {
      case 'high':
        this.applyHighQualitySettings();
        break;
      case 'medium':
        this.applyMediumQualitySettings();
        break;
      case 'low':
        this.applyLowQualitySettings();
        break;
    }
  }
  
  private applyHighQualitySettings(): void {
    // 高质量设置
    this.setAntialiasing(true);
    this.setShadowQuality('high');
    this.setTextureFiltering('linear');
  }
  
  private applyMediumQualitySettings(): void {
    // 中等质量设置
    this.setAntialiasing(false);
    this.setShadowQuality('medium');
    this.setTextureFiltering('nearest');
  }
  
  private applyLowQualitySettings(): void {
    // 低质量设置
    this.setAntialiasing(false);
    this.setShadowQuality('off');
    this.setTextureFiltering('nearest');
    this.setCacheStrategy('aggressive');
  }
  
  // 更新性能指标
  updateMetrics(frameTime: number, memoryUsage: number): void {
    this.performanceMetrics = {
      frameTime,
      fps: 1000 / frameTime,
      memoryUsage
    };
    
    this.adjustQualityBasedOnPerformance();
  }
}

4.3 故障排查指南

症状：Canvas渲染出现闪烁或部分内容不显示

排查步骤：

检查脏矩形计算：

// 调试脏矩形计算
const debugDirtyRects = (dirtyRects: DirtyRectangle[]) => {
  console.log('Dirty rects count:', dirtyRects.length);
  dirtyRects.forEach((rect, index) => {
    console.log(`Rect ${index}:`, rect);
  });
  
  // 可视化显示脏矩形
  drawDebugOverlay(dirtyRects);
};

验证图层缓存：

// 检查缓存命中率
const checkCachePerformance = (cacheManager: LayerCacheManager) => {
  console.log('Cache hit rate:', cacheManager.getHitRate());
  console.log('Cache size:', cacheManager.getSize());
};

分析渲染性能：

// 性能分析工具
const startProfiling = () => {
  const startTime = performance.now();
  
  return {
    end: () => {
      const endTime = performance.now();
      const frameTime = endTime - startTime;
      console.log(`Frame render time: ${frameTime.toFixed(2)}ms`);
      return frameTime;
    }
  };
};