大屏渲染性能优化完整技术文档

图层1 (背景层): 静态背景、网格线 - 只绘制一次
图层2 (内容层): 数据点、图形 - 数据变化时绘制
图层3 (动画层): 粒子、特效 - 每帧绘制
图层4 (交互层): 鼠标hover、tooltip - 交互时绘制

class LayeredCanvas {
  constructor(container) {
    this.container = container
    this.layers = []
    this.init()
  }

  init() {
    // 创建多个Canvas图层
    const layerNames = ['background', 'content', 'animation', 'interaction']

    layerNames.forEach((name, index) => {
      const canvas = document.createElement('canvas')
      canvas.style.position = 'absolute'
      canvas.style.left = '0'
      canvas.style.top = '0'
      canvas.style.zIndex = index
      canvas.width = this.container.offsetWidth
      canvas.height = this.container.offsetHeight

      this.container.appendChild(canvas)

      this.layers.push({
        name,
        canvas,
        ctx: canvas.getContext('2d'),
        dirty: true
      })
    })
  }

  getLayer(name) {
    return this.layers.find(layer => layer.name === name)
  }

  markDirty(name) {
    const layer = this.getLayer(name)
    if (layer) {
      layer.dirty = true
    }
  }

  render() {
    this.layers.forEach(layer => {
      if (layer.dirty) {
        // 只重绘dirty的图层
        this.renderLayer(layer)
        layer.dirty = false
      }
    })
  }

  renderLayer(layer) {
    // 子类实现具体绘制逻辑
  }
}

普通渲染: 每帧计算+绘制 (10ms+5ms=15ms/帧)
离屏渲染: 预计算一次+每帧绘制 (10ms+0.5ms=0.5ms/帧)
性能提升: 30倍

class OffscreenRenderer {
  constructor() {
    this.cache = new Map()
  }

  // 预渲染到离屏Canvas
  preRender(key, width, height, drawFn) {
    const offscreen = document.createElement('canvas')
    offscreen.width = width
    offscreen.height = height
    const ctx = offscreen.getContext('2d')

    drawFn(ctx)

    this.cache.set(key, offscreen)
  }

  // 使用缓存的离屏Canvas
  render(ctx, key, x, y) {
    const offscreen = this.cache.get(key)
    if (offscreen) {
      ctx.drawImage(offscreen, x, y)
    }
  }

  // 清除缓存
  clear(key) {
    if (key) {
      this.cache.delete(key)
    } else {
      this.cache.clear()
    }
  }
}

class DirtyRectDetector {
  constructor() {
    this.dirtyRects = []
  }

  // 添加脏矩形
  addDirty(x, y, width, height) {
    this.dirtyRects.push({ x, y, width, height })
  }

  // 合并重叠的矩形
  merge() {
    // 简化版: 计算包含所有脏矩形的最小矩形
    if (this.dirtyRects.length === 0) return null

    let minX = Infinity
    let minY = Infinity
    let maxX = -Infinity
    let maxY = -Infinity

    this.dirtyRects.forEach(rect => {
      minX = Math.min(minX, rect.x)
      minY = Math.min(minY, rect.y)
      maxX = Math.max(maxX, rect.x + rect.width)
      maxY = Math.max(maxY, rect.y + rect.height)
    })

    return {
      x: minX,
      y: minY,
      width: maxX - minX,
      height: maxY - minY
    }
  }

  // 清空脏矩形
  clear() {
    this.dirtyRects = []
  }

  // 渲染脏区域
  render(ctx, renderFn) {
    const dirtyRect = this.merge()

    if (dirtyRect) {
      // 只清除和重绘脏区域
      ctx.save()
      ctx.beginPath()
      ctx.rect(dirtyRect.x, dirtyRect.y, dirtyRect.width, dirtyRect.height)
      ctx.clip()

      ctx.clearRect(dirtyRect.x, dirtyRect.y, dirtyRect.width, dirtyRect.height)
      renderFn(ctx, dirtyRect)

      ctx.restore()
    }

    this.clear()
  }
}

主线程 → Worker: postMessage(data)
Worker → 主线程: postMessage(result)

// main.js
const worker = new Worker('worker.js')

worker.postMessage({
  type: 'calculate',
  data: largeDataArray
})

worker.onmessage = (e) => {
  const result = e.data
  updateChart(result)
}

// worker.js
self.onmessage = (e) => {
  const { type, data } = e.data

  if (type === 'calculate') {
    // 耗时计算
    const result = complexCalculation(data)

    self.postMessage(result)
  }
}

function complexCalculation(data) {
  // 大数据处理
  return data.map(item => {
    // 复杂运算...
    return processedItem
  })
}

/* 推荐使用 */
transform: translate3d(x, y, 0);
transform: scale(1.2);
transform: rotate(45deg);
opacity: 0.8;
filter: blur(5px);

/* 避免使用 */
left: 100px;  /* 触发layout */
width: 200px; /* 触发layout */
margin: 10px; /* 触发layout */

.accelerated {
  transform: translateZ(0);
  /* 或 */
  will-change: transform;
  /* 或 */
  backface-visibility: hidden;
}

/* 提前声明将要变化的属性 */
.element {
  will-change: transform, opacity;
}

/* 动画结束后移除 */
.element.animated {
  will-change: auto;
}

<template>
  <div class="layered-canvas-demo">
    <div class="controls">
      <button @click="toggleAnimation">
        {{ isAnimating ? '暂停动画' : '开始动画' }}
      </button>
      <button @click="addParticles">添加粒子</button>
      <button @click="clearParticles">清除粒子</button>
      <div class="stats">
        <span>FPS: {{ fps }}</span>
        <span>粒子数: {{ particleCount }}</span>
      </div>
    </div>

    <div ref="canvasContainer" class="canvas-container"></div>
  </div>
</template>

<script setup>
import { ref, onMounted, onUnmounted } from 'vue'

// 粒子类
class Particle {
  constructor(x, y) {
    this.x = x
    this.y = y
    this.vx = (Math.random() - 0.5) * 4
    this.vy = (Math.random() - 0.5) * 4
    this.radius = Math.random() * 3 + 1
    this.color = `hsl(${Math.random() * 60 + 180}, 100%, 50%)`
  }

  update(width, height) {
    this.x += this.vx
    this.y += this.vy

    if (this.x < 0 || this.x > width) this.vx *= -1
    if (this.y < 0 || this.y > height) this.vy *= -1
  }

  draw(ctx) {
    ctx.beginPath()
    ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2)
    ctx.fillStyle = this.color
    ctx.fill()
  }
}

// 分层Canvas管理器
class LayeredCanvasManager {
  constructor(container) {
    this.container = container
    this.layers = {}
    this.particles = []
    this.animationId = null
    this.isAnimating = false
    this.lastTime = 0
    this.fps = 60
    this.frameCount = 0
    this.fpsUpdateTime = 0

    this.init()
  }

  init() {
    const width = this.container.offsetWidth
    const height = this.container.offsetHeight

    // 创建图层
    const layerNames = ['background', 'grid', 'animation', 'overlay']

    layerNames.forEach((name, index) => {
      const canvas = document.createElement('canvas')
      canvas.width = width
      canvas.height = height
      canvas.style.position = 'absolute'
      canvas.style.left = '0'
      canvas.style.top = '0'
      canvas.style.zIndex = index

      this.container.appendChild(canvas)

      this.layers[name] = {
        canvas,
        ctx: canvas.getContext('2d'),
        dirty: true
      }
    })

    this.renderStatic()
  }

  // 渲染静态图层(只绘制一次)
  renderStatic() {
    this.renderBackground()
    this.renderGrid()
  }

  renderBackground() {
    const { ctx, canvas } = this.layers.background

    // 渐变背景
    const gradient = ctx.createLinearGradient(0, 0, 0, canvas.height)
    gradient.addColorStop(0, '#0a0e27')
    gradient.addColorStop(1, '#1a1f3a')

    ctx.fillStyle = gradient
    ctx.fillRect(0, 0, canvas.width, canvas.height)

    this.layers.background.dirty = false
  }

  renderGrid() {
    const { ctx, canvas } = this.layers.grid

    ctx.strokeStyle = 'rgba(0, 246, 255, 0.1)'
    ctx.lineWidth = 1

    // 绘制网格
    const gridSize = 50

    for (let x = 0; x < canvas.width; x += gridSize) {
      ctx.beginPath()
      ctx.moveTo(x, 0)
      ctx.lineTo(x, canvas.height)
      ctx.stroke()
    }

    for (let y = 0; y < canvas.height; y += gridSize) {
      ctx.beginPath()
      ctx.moveTo(0, y)
      ctx.lineTo(canvas.width, y)
      ctx.stroke()
    }

    this.layers.grid.dirty = false
  }

  // 渲染动画图层(每帧绘制)
  renderAnimation() {
    const { ctx, canvas } = this.layers.animation

    // 清空画布
    ctx.clearRect(0, 0, canvas.width, canvas.height)

    // 更新和绘制粒子
    this.particles.forEach(particle => {
      particle.update(canvas.width, canvas.height)
      particle.draw(ctx)
    })
  }

  // 渲染覆盖层(显示信息)
  renderOverlay() {
    const { ctx, canvas } = this.layers.overlay

    ctx.clearRect(0, 0, canvas.width, canvas.height)

    // 显示图层信息
    ctx.fillStyle = '#00f6ff'
    ctx.font = '14px monospace'
    ctx.fillText('分层渲染演示', 10, 20)
    ctx.fillText(`图层: ${Object.keys(this.layers).length}`, 10, 40)
    ctx.fillText(`粒子: ${this.particles.length}`, 10, 60)
  }

  addParticles(count = 50) {
    const { canvas } = this.layers.animation

    for (let i = 0; i < count; i++) {
      const x = Math.random() * canvas.width
      const y = Math.random() * canvas.height
      this.particles.push(new Particle(x, y))
    }
  }

  clearParticles() {
    this.particles = []
  }

  start() {
    if (this.isAnimating) return

    this.isAnimating = true
    this.lastTime = performance.now()
    this.animate()
  }

  stop() {
    this.isAnimating = false
    if (this.animationId) {
      cancelAnimationFrame(this.animationId)
      this.animationId = null
    }
  }

  animate(currentTime = 0) {
    if (!this.isAnimating) return

    // 计算FPS
    this.frameCount++
    if (currentTime - this.fpsUpdateTime > 1000) {
      this.fps = this.frameCount
      this.frameCount = 0
      this.fpsUpdateTime = currentTime
    }

    // 渲染
    this.renderAnimation()
    this.renderOverlay()

    this.animationId = requestAnimationFrame((time) => this.animate(time))
  }

  destroy() {
    this.stop()
    Object.values(this.layers).forEach(layer => {
      layer.canvas.remove()
    })
  }
}

// 组件状态
const canvasContainer = ref(null)
let manager = null
const isAnimating = ref(false)
const fps = ref(60)
const particleCount = ref(0)

// FPS更新
setInterval(() => {
  if (manager) {
    fps.value = manager.fps
    particleCount.value = manager.particles.length
  }
}, 100)

const toggleAnimation = () => {
  if (!manager) return

  if (isAnimating.value) {
    manager.stop()
  } else {
    manager.start()
  }

  isAnimating.value = !isAnimating.value
}

const addParticles = () => {
  if (manager) {
    manager.addParticles(50)
  }
}

const clearParticles = () => {
  if (manager) {
    manager.clearParticles()
  }
}

onMounted(() => {
  manager = new LayeredCanvasManager(canvasContainer.value)
  manager.addParticles(100)
  manager.start()
  isAnimating.value = true
})

onUnmounted(() => {
  if (manager) {
    manager.destroy()
  }
})
</script>

<style scoped>
.layered-canvas-demo {
  padding: 20px;
  background: #0a0e27;
  border-radius: 10px;
  color: #fff;
}

.controls {
  display: flex;
  gap: 10px;
  margin-bottom: 15px;
  align-items: center;
}

.controls button {
  padding: 10px 20px;
  background: #00f6ff;
  border: none;
  border-radius: 5px;
  color: #000;
  font-weight: bold;
  cursor: pointer;
  transition: all 0.3s ease;
}

.controls button:hover {
  background: #00d9e6;
  transform: translateY(-2px);
}

.stats {
  margin-left: auto;
  display: flex;
  gap: 20px;
  color: #00f6ff;
  font-family: monospace;
}

.canvas-container {
  position: relative;
  width: 100%;
  height: 500px;
  border: 2px solid #00f6ff;
  border-radius: 8px;
  overflow: hidden;
}
</style>

<template>
  <div class="offscreen-demo">
    <div class="mode-selector">
      <label>
        <input type="radio" value="normal" v-model="renderMode" />
        普通渲染
      </label>
      <label>
        <input type="radio" value="offscreen" v-model="renderMode" />
        离屏渲染
      </label>
    </div>

    <div class="performance-stats">
      <div class="stat">
        <span>FPS:</span>
        <strong :class="fpsClass">{{ fps }}</strong>
      </div>
      <div class="stat">
        <span>渲染时间:</span>
        <strong>{{ renderTime }}ms</strong>
      </div>
      <div class="stat">
        <span>模式:</span>
        <strong>{{ renderModeName }}</strong>
      </div>
    </div>

    <canvas ref="mainCanvas" class="main-canvas"></canvas>
  </div>
</template>

<script setup>
import { ref, computed, watch, onMounted, onUnmounted } from 'vue'

const mainCanvas = ref(null)
const renderMode = ref('offscreen')
const fps = ref(60)
const renderTime = ref(0)

let ctx = null
let offscreenCanvas = null
let offscreenCtx = null
let animationId = null
let frameCount = 0
let lastTime = 0
let fpsTime = 0

// 渲染模式名称
const renderModeName = computed(() => {
  return renderMode.value === 'offscreen' ? '离屏渲染' : '普通渲染'
})

// FPS样式
const fpsClass = computed(() => {
  if (fps.value >= 55) return 'good'
  if (fps.value >= 30) return 'medium'
  return 'bad'
})

// 绘制复杂图形
function drawComplexShape(context, x, y, size) {
  const startTime = performance.now()

  context.save()
  context.translate(x, y)

  // 绘制复杂的星形
  context.beginPath()
  for (let i = 0; i < 10; i++) {
    const angle = (i * Math.PI * 2) / 10
    const radius = i % 2 === 0 ? size : size / 2
    const px = Math.cos(angle) * radius
    const py = Math.sin(angle) * radius

    if (i === 0) {
      context.moveTo(px, py)
    } else {
      context.lineTo(px, py)
    }
  }
  context.closePath()

  // 渐变填充
  const gradient = context.createRadialGradient(0, 0, 0, 0, 0, size)
  gradient.addColorStop(0, '#00f6ff')
  gradient.addColorStop(1, '#0066cc')
  context.fillStyle = gradient
  context.fill()

  // 描边
  context.strokeStyle = '#00ffff'
  context.lineWidth = 2
  context.stroke()

  context.restore()

  return performance.now() - startTime
}

// 普通渲染
function normalRender() {
  const canvas = mainCanvas.value
  const width = canvas.width
  const height = canvas.height

  ctx.clearRect(0, 0, width, height)

  let totalTime = 0

  // 绘制100个复杂图形
  for (let i = 0; i < 100; i++) {
    const x = (i % 10) * (width / 10) + width / 20
    const y = Math.floor(i / 10) * (height / 10) + height / 20
    const size = 30

    totalTime += drawComplexShape(ctx, x, y, size)
  }

  renderTime.value = totalTime.toFixed(2)
}

// 离屏渲染
function offscreenRender() {
  const canvas = mainCanvas.value
  const width = canvas.width
  const height = canvas.height

  ctx.clearRect(0, 0, width, height)

  const startTime = performance.now()

  // 直接绘制预渲染的离屏Canvas
  for (let i = 0; i < 100; i++) {
    const x = (i % 10) * (width / 10) + width / 20
    const y = Math.floor(i / 10) * (height / 10) + height / 20

    ctx.drawImage(offscreenCanvas, x - 30, y - 30)
  }

  renderTime.value = (performance.now() - startTime).toFixed(2)
}

// 动画循环
function animate(currentTime) {
  frameCount++

  // 计算FPS
  if (currentTime - fpsTime > 1000) {
    fps.value = frameCount
    frameCount = 0
    fpsTime = currentTime
  }

  // 根据模式选择渲染方法
  if (renderMode.value === 'offscreen') {
    offscreenRender()
  } else {
    normalRender()
  }

  animationId = requestAnimationFrame(animate)
}

// 初始化离屏Canvas
function initOffscreen() {
  offscreenCanvas = document.createElement('canvas')
  offscreenCanvas.width = 60
  offscreenCanvas.height = 60
  offscreenCtx = offscreenCanvas.getContext('2d')

  // 预渲染复杂图形到离屏Canvas
  drawComplexShape(offscreenCtx, 30, 30, 30)
}

// 监听模式切换
watch(renderMode, () => {
  fps.value = 60
  frameCount = 0
})

onMounted(() => {
  const canvas = mainCanvas.value
  canvas.width = canvas.offsetWidth
  canvas.height = canvas.offsetHeight
  ctx = canvas.getContext('2d')

  initOffscreen()

  lastTime = performance.now()
  fpsTime = lastTime
  animate(lastTime)
})

onUnmounted(() => {
  if (animationId) {
    cancelAnimationFrame(animationId)
  }
})
</script>

<style scoped>
.offscreen-demo {
  padding: 20px;
  background: #0a0e27;
  border-radius: 10px;
  color: #fff;
}

.mode-selector {
  display: flex;
  gap: 20px;
  margin-bottom: 15px;
}

.mode-selector label {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  padding: 8px 15px;
  background: rgba(0, 246, 255, 0.1);
  border-radius: 5px;
  transition: all 0.3s ease;
}

.mode-selector label:hover {
  background: rgba(0, 246, 255, 0.2);
}

.mode-selector input[type="radio"] {
  cursor: pointer;
}

.performance-stats {
  display: flex;
  gap: 30px;
  padding: 15px;
  background: rgba(0, 0, 0, 0.3);
  border-radius: 8px;
  margin-bottom: 15px;
}

.stat {
  display: flex;
  gap: 10px;
  align-items: center;
}

.stat span {
  color: #aaa;
}

.stat strong {
  color: #00f6ff;
  font-size: 20px;
}

.stat strong.good {
  color: #4caf50;
}

.stat strong.medium {
  color: #ff9800;
}

.stat strong.bad {
  color: #f44336;
}

.main-canvas {
  width: 100%;
  height: 500px;
  background: rgba(0, 0, 0, 0.3);
  border: 2px solid #00f6ff;
  border-radius: 8px;
}
</style>

<template>
  <div class="worker-demo">
    <div class="controls">
      <button @click="processInMain">主线程处理</button>
      <button @click="processInWorker">Worker处理</button>
      <button @click="generateData">生成数据</button>
    </div>

    <div class="status-panel">
      <div class="status-item">
        <span>数据量:</span>
        <strong>{{ dataSize }}</strong>
      </div>
      <div class="status-item">
        <span>处理状态:</span>
        <strong :class="statusClass">{{ status }}</strong>
      </div>
      <div class="status-item">
        <span>耗时:</span>
        <strong>{{ processingTime }}ms</strong>
      </div>
      <div class="status-item">
        <span>UI响应:</span>
        <strong :class="responseClass">{{ uiResponse }}</strong>
      </div>
    </div>

    <div class="test-area">
      <h4>UI响应测试</h4>
      <button @click="testCount++">点击测试 ({{ testCount }})</button>
      <p>在数据处理过程中点击此按钮测试UI是否响应</p>
    </div>

    <div class="result-area">
      <h4>处理结果</h4>
      <pre>{{ resultPreview }}</pre>
    </div>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue'

const dataSize = ref(0)
const status = ref('空闲')
const processingTime = ref(0)
const uiResponse = ref('正常')
const testCount = ref(0)
const result = ref(null)

// 状态样式
const statusClass = computed(() => {
  return {
    'status-idle': status.value === '空闲',
    'status-processing': status.value === '处理中',
    'status-done': status.value === '完成'
  }
})

// 响应样式
const responseClass = computed(() => {
  return {
    'response-good': uiResponse.value === '正常',
    'response-bad': uiResponse.value === '阻塞'
  }
})

// 结果预览
const resultPreview = computed(() => {
  if (!result.value) return '暂无结果'

  const preview = result.value.slice(0, 5)
  return JSON.stringify(preview, null, 2) + '\n...'
})

// 生成测试数据
const generateData = () => {
  const size = 1000000
  dataSize.value = size
  status.value = '空闲'
  processingTime.value = 0
  result.value = null
}

// 复杂计算函数
function complexCalculation(data) {
  return data.map((item, index) => {
    // 模拟复杂计算
    let result = item
    for (let i = 0; i < 100; i++) {
      result = Math.sqrt(result * result + i)
    }
    return {
      index,
      original: item,
      processed: result,
      timestamp: Date.now()
    }
  })
}

// 主线程处理
const processInMain = () => {
  if (!dataSize.value) {
    alert('请先生成数据')
    return
  }

  status.value = '处理中'
  uiResponse.value = '阻塞'

  // 生成数据
  const data = Array.from({ length: dataSize.value }, () => Math.random() * 100)

  const startTime = performance.now()

  // 在主线程执行计算(会阻塞UI)
  setTimeout(() => {
    const processed = complexCalculation(data)

    processingTime.value = Math.round(performance.now() - startTime)
    result.value = processed
    status.value = '完成'
    uiResponse.value = '正常'
  }, 10)
}

// Worker处理
const processInWorker = () => {
  if (!dataSize.value) {
    alert('请先生成数据')
    return
  }

  status.value = '处理中'
  uiResponse.value = '正常'

  // 生成数据
  const data = Array.from({ length: dataSize.value }, () => Math.random() * 100)

  const startTime = performance.now()

  // 创建Worker
  const workerCode = `
    self.onmessage = function(e) {
      const data = e.data

      const result = data.map((item, index) => {
        let result = item
        for (let i = 0; i < 100; i++) {
          result = Math.sqrt(result * result + i)
        }
        return {
          index,
          original: item,
          processed: result,
          timestamp: Date.now()
        }
      })

      self.postMessage(result)
    }
  `

  const blob = new Blob([workerCode], { type: 'application/javascript' })
  const workerUrl = URL.createObjectURL(blob)
  const worker = new Worker(workerUrl)

  worker.postMessage(data)

  worker.onmessage = (e) => {
    processingTime.value = Math.round(performance.now() - startTime)
    result.value = e.data
    status.value = '完成'

    worker.terminate()
    URL.revokeObjectURL(workerUrl)
  }

  worker.onerror = (error) => {
    console.error('Worker错误:', error)
    status.value = '错误'
    worker.terminate()
  }
}

// 初始化
generateData()
</script>

<style scoped>
.worker-demo {
  padding: 20px;
  background: #0a0e27;
  border-radius: 10px;
  color: #fff;
}

.controls {
  display: flex;
  gap: 10px;
  margin-bottom: 15px;
}

.controls button {
  padding: 10px 20px;
  background: #00f6ff;
  border: none;
  border-radius: 5px;
  color: #000;
  font-weight: bold;
  cursor: pointer;
  transition: all 0.3s ease;
}

.controls button:hover {
  background: #00d9e6;
  transform: translateY(-2px);
}

.status-panel {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 15px;
  padding: 15px;
  background: rgba(0, 246, 255, 0.1);
  border-radius: 8px;
  margin-bottom: 15px;
}

.status-item {
  text-align: center;
}

.status-item span {
  display: block;
  color: #aaa;
  font-size: 12px;
  margin-bottom: 5px;
}

.status-item strong {
  display: block;
  font-size: 18px;
}

.status-idle {
  color: #666;
}

.status-processing {
  color: #ff9800;
}

.status-done {
  color: #4caf50;
}

.response-good {
  color: #4caf50;
}

.response-bad {
  color: #f44336;
}

.test-area {
  padding: 15px;
  background: rgba(0, 0, 0, 0.3);
  border-radius: 8px;
  margin-bottom: 15px;
}

.test-area h4 {
  color: #00f6ff;
  margin-bottom: 10px;
}

.test-area button {
  padding: 8px 16px;
  background: #4caf50;
  border: none;
  border-radius: 5px;
  color: #fff;
  font-weight: bold;
  cursor: pointer;
  margin-bottom: 10px;
}

.test-area p {
  color: #aaa;
  font-size: 14px;
  margin: 0;
}

.result-area {
  padding: 15px;
  background: rgba(0, 0, 0, 0.3);
  border-radius: 8px;
}

.result-area h4 {
  color: #00f6ff;
  margin-bottom: 10px;
}

.result-area pre {
  background: rgba(0, 0, 0, 0.5);
  padding: 15px;
  border-radius: 5px;
  color: #00f6ff;
  font-family: 'Courier New', monospace;
  font-size: 12px;
  overflow-x: auto;
  margin: 0;
}
</style>

<template>
  <div class="gpu-demo">
    <div class="mode-selector">
      <h4>选择动画方式:</h4>
      <label>
        <input type="checkbox" v-model="useTransform" />
        Transform (GPU加速)
      </label>
      <label>
        <input type="checkbox" v-model="usePosition" />
        Left/Top (CPU)
      </label>
    </div>

    <div class="performance-monitor">
      <div class="monitor-item">
        <span>FPS:</span>
        <strong :class="fpsClass">{{ fps }}</strong>
      </div>
      <div class="monitor-item">
        <span>CPU占用:</span>
        <strong>{{ cpuUsage }}%</strong>
      </div>
      <div class="monitor-item">
        <span>动画元素:</span>
        <strong>{{ elementCount }}</strong>
      </div>
    </div>

    <div class="animation-container" ref="container">
      <div
        v-for="i in elementCount"
        :key="i"
        class="animated-box"
        :class="{
          'use-transform': useTransform,
          'use-position': usePosition
        }"
        :style="getBoxStyle(i)"
      ></div>
    </div>

    <div class="explanation">
      <h4>性能对比说明:</h4>
      <ul>
        <li>Transform: 使用GPU加速,性能好,帧率高</li>
        <li>Left/Top: 触发Layout,性能差,帧率低</li>
        <li>建议: 动画优先使用transform和opacity</li>
      </ul>
    </div>
  </div>
</template>

<script setup>
import { ref, computed, onMounted, onUnmounted } from 'vue'

const useTransform = ref(true)
const usePosition = ref(false)
const fps = ref(60)
const cpuUsage = ref(0)
const elementCount = 100
const container = ref(null)

let animationId = null
let frameCount = 0
let lastTime = 0
let fpsTime = 0

// FPS样式
const fpsClass = computed(() => {
  if (fps.value >= 55) return 'good'
  if (fps.value >= 30) return 'medium'
  return 'bad'
})

// 获取盒子样式
const getBoxStyle = (index) => {
  const angle = (index / elementCount) * Math.PI * 2
  const radius = 200
  const x = Math.cos(angle) * radius
  const y = Math.sin(angle) * radius

  return {
    '--x': x + 'px',
    '--y': y + 'px',
    '--delay': (index * 0.02) + 's'
  }
}

// 模拟CPU占用
const updateCPUUsage = () => {
  let usage = 10

  if (useTransform.value && !usePosition.value) {
    usage = Math.random() * 10 + 5 // 5-15%
  } else if (usePosition.value && !useTransform.value) {
    usage = Math.random() * 40 + 40 // 40-80%
  } else if (useTransform.value && usePosition.value) {
    usage = Math.random() * 30 + 50 // 50-80%
  }

  cpuUsage.value = Math.round(usage)
}

// 动画循环
const animate = (currentTime) => {
  frameCount++

  // 计算FPS
  if (currentTime - fpsTime > 1000) {
    fps.value = frameCount
    frameCount = 0
    fpsTime = currentTime
    updateCPUUsage()
  }

  animationId = requestAnimationFrame(animate)
}

onMounted(() => {
  lastTime = performance.now()
  fpsTime = lastTime
  animate(lastTime)
})

onUnmounted(() => {
  if (animationId) {
    cancelAnimationFrame(animationId)
  }
})
</script>

<style scoped>
.gpu-demo {
  padding: 20px;
  background: #0a0e27;
  border-radius: 10px;
  color: #fff;
}

.mode-selector {
  margin-bottom: 15px;
}

.mode-selector h4 {
  color: #00f6ff;
  margin-bottom: 10px;
}

.mode-selector label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-right: 20px;
  padding: 8px 15px;
  background: rgba(0, 246, 255, 0.1);
  border-radius: 5px;
  cursor: pointer;
}

.performance-monitor {
  display: flex;
  gap: 30px;
  padding: 15px;
  background: rgba(0, 0, 0, 0.3);
  border-radius: 8px;
  margin-bottom: 15px;
}

.monitor-item {
  display: flex;
  gap: 10px;
  align-items: center;
}

.monitor-item span {
  color: #aaa;
}

.monitor-item strong {
  color: #00f6ff;
  font-size: 20px;
}

.monitor-item strong.good {
  color: #4caf50;
}

.monitor-item strong.medium {
  color: #ff9800;
}

.monitor-item strong.bad {
  color: #f44336;
}

.animation-container {
  position: relative;
  width: 100%;
  height: 500px;
  background: rgba(0, 0, 0, 0.3);
  border: 2px solid #00f6ff;
  border-radius: 8px;
  overflow: hidden;
  margin-bottom: 15px;
}

.animated-box {
  position: absolute;
  width: 20px;
  height: 20px;
  background: #00f6ff;
  border-radius: 50%;
  top: 50%;
  left: 50%;
}

/* GPU加速 - Transform */
.animated-box.use-transform {
  animation: rotate-transform 3s linear infinite;
  animation-delay: var(--delay);
  transform: translate(var(--x), var(--y)) translateZ(0);
  will-change: transform;
}

@keyframes rotate-transform {
  from {
    transform: translate(var(--x), var(--y)) rotate(0deg) translateZ(0);
  }
  to {
    transform: translate(var(--x), var(--y)) rotate(360deg) translateZ(0);
  }
}

/* CPU渲染 - Left/Top */
.animated-box.use-position {
  animation: rotate-position 3s linear infinite;
  animation-delay: var(--delay);
  left: calc(50% + var(--x));
  top: calc(50% + var(--y));
}

@keyframes rotate-position {
  0% { margin-left: 0; margin-top: 0; }
  25% { margin-left: 50px; margin-top: 0; }
  50% { margin-left: 50px; margin-top: 50px; }
  75% { margin-left: 0; margin-top: 50px; }
  100% { margin-left: 0; margin-top: 0; }
}

.explanation {
  padding: 15px;
  background: rgba(0, 246, 255, 0.1);
  border-radius: 8px;
}

.explanation h4 {
  color: #00f6ff;
  margin-bottom: 10px;
}

.explanation ul {
  margin: 0;
  padding-left: 20px;
  color: #aaa;
}

.explanation li {
  margin-bottom: 8px;
  line-height: 1.6;
}
</style>

负责大屏渲染性能优化,解决页面卡顿、帧率低、动画不流畅等问题。
采用Canvas分层渲染策略,将静态背景、动态内容、交互层分离,减少70%重绘区域。
实现离屏渲染优化,复杂图形预绘制到离屏Canvas,渲染性能提升30倍。
使用Web Worker处理大数据计算,避免阻塞主线程,UI响应速度提升显著。
应用GPU加速技术,使用transform/opacity替代left/top,动画帧率从30fps提升至60fps稳定运行。
优化后页面流畅度显著提升,用户体验改善明显。

主导大屏可视化渲染性能优化,解决海量数据展示导致的卡顿、掉帧、交互延迟等性能瓶颈,
使页面帧率从不稳定的20-40fps提升至稳定60fps。

技术方案:
1. Canvas分层渲染
   - 4层架构: 背景层/内容层/动画层/交互层
   - 静态内容只绘制一次,动态内容按需更新
   - 减少70%重绘区域,CPU占用降低60%

2. 离屏渲染优化
   - 复杂图形预渲染到离屏Canvas
   - 主Canvas只需drawImage,性能提升30倍
   - 适用于重复使用的装饰元素、图标等

3. 脏矩形检测
   - 只重绘变化区域,而非整个Canvas
   - 自动合并重叠的脏矩形
   - 渲染性能提升100倍以上

4. Web Worker异步计算
   - 大数据处理转移到Worker线程
   - 不阻塞主线程,UI保持响应
   - 100万数据处理耗时从8秒降至3秒

5. GPU加速
   - transform/opacity替代left/top/width/height
   - will-change预声明优化属性
   - 开启硬件加速,动画流畅度质的提升

关键优化:
- 粒子系统: 从200粒子20fps → 1000粒子60fps
- 图表渲染: ECharts+Canvas分层,性能提升3倍
- 动画性能: GPU加速,帧率稳定60fps

解决难点:
- 多Canvas图层管理: 封装LayeredCanvas统一调度
- 内存占用问题: 离屏Canvas按需创建和销毁
- Worker通信开销: 批量传输减少序列化次数

项目成果: 页面帧率从20-40fps提升至稳定60fps,CPU占用从80%降至20%,
动画流畅度显著提升,用户满意度大幅提高。

担任大屏可视化系统渲染性能优化技术负责人,系统性解决大规模数据展示的性能瓶颈,
实现从"勉强能用"到"丝般顺滑"的质的飞跃。

【性能问题诊断】
项目初期性能问题严重:
- 页面帧率: 20-40fps波动,经常掉帧
- 动画卡顿: 粒子动画几乎静止
- 交互延迟: 点击响应延迟500ms+
- CPU占用: 持续80%+,风扇狂转

使用Chrome Performance工具分析:
- Long Task: 大量超过50ms的长任务
- Frame Timing: 帧时间40-80ms,远超16.6ms
- Paint: 频繁的全画布重绘
- Layout: width/height修改触发大量reflow

【优化方案设计】

1. Canvas分层渲染架构
   问题: 每帧全量重绘整个Canvas,大量CPU资源浪费在绘制不变的内容

   方案: 4层渲染架构

实现:
- 每层独立Canvas,用z-index叠加
- dirty标记机制,按需渲染
- 事件穿透处理(pointer-events)

效果:
- 重绘区域减少70%
- CPU占用从80%降至20%
- 帧率提升至50+fps

2. 离屏渲染优化
问题: 复杂装饰图形每帧重复绘制,耗时严重

方案:
- 预渲染到离屏Canvas
- 主Canvas用drawImage直接绘制
- LRU缓存管理离屏Canvas

案例: 星形装饰

3. 脏矩形检测
问题: 局部更新仍重绘整个Canvas

方案:
- 记录变化区域的矩形范围
- 合并重叠矩形为最小包围盒
- 使用ctx.clip限制绘制区域

效果:

4. Web Worker异步计算
问题: 大数据计算阻塞主线程,UI冻结

方案:
- 数据处理转移到Worker线程
- postMessage传输结果
- TransferableObject零拷贝传输

案例: 100万条数据聚合

5. GPU加速策略
问题: CSS动画使用left/top触发layout,性能差

方案:
```css
/* ❌ 触发Layout+Paint+Composite */
.bad {
  left: 100px;
  top: 100px;
}

/* ✅ 只触发Composite,GPU加速 */
.good {
  transform: translate(100px, 100px) translateZ(0);
  will-change: transform;
}
```text

效果:

- 100个动画元素帧率: 30fps → 60fps
- CPU占用: 60% → 10%
- 动画流畅度显著提升

【解决的关键难点】

难点1: 多Canvas图层事件处理 问题: 上层Canvas遮挡下层,无法响应事件 方案:

```css
.upper-layer {
  pointer-events: none; /* 事件穿透 */
}
.interactive-layer {
  pointer-events: auto; /* 交互层捕获事件 */
}
```text

难点2: 离屏Canvas内存管理 问题: 大量离屏Canvas导致内存占用高 方案:

- LRU缓存,容量限制100个
- 超出容量自动清理最旧的
- 按需创建,及时销毁

难点3: Worker通信性能 问题: 频繁postMessage序列化开销大 方案:

- 批量传输,减少通信次数
- TransferableObject (ArrayBuffer)零拷贝
- SharedArrayBuffer共享内存(受浏览器安全限制)

难点4: GPU加速副作用 问题: 过多图层导致内存占用高 方案:

- 按需开启,不滥用will-change
- 动画结束移除will-change
- 监控GPU内存,超阈值降级

【性能提升数据】

- 帧率: 20-40fps → 稳定60fps
- CPU占用: 80%+ → 20%以内
- 渲染时间: 40-80ms/帧 → <16ms/帧
- 粒子数量: 200个 → 1000个(性能不降)
- 用户满意度: 从投诉到赞扬

【技术沉淀】

- 封装LayeredCanvas通用组件
- 编写《Canvas性能优化指南》
- 录制《GPU加速最佳实践》视频
- 建立性能监控体系

方案已应用于5+个项目,成为团队标准技术方案。

```plain
---

## 面试SOP标准回答

### Q1: Canvas分层渲染的原理是什么?

#### 标准回答(2-3分钟):

"Canvas分层渲染的核心思想是将内容按更新频率分成不同图层,避免每帧都重绘所有内容。

我们项目的Canvas渲染最开始很慢,用Performance工具看,每帧都在重绘整个Canvas,
包括背景、网格这些从来不变的东西。这完全是浪费CPU资源。

我设计了一个4层架构。第一层是背景层,就画个渐变背景和网格线,只绘制一次就不动了。
第二层是内容层,显示数据点和图表,只有数据变化时才重绘。第三层是动画层,
放粒子效果这些每帧都要动的东西。第四层是交互层,鼠标hover、tooltip这些交互时才绘制。

实现上很简单,就是创建4个Canvas元素,用absolute定位叠在一起,z-index控制层级。
然后每个Canvas有个dirty标记,如果dirty是true就重绘,false就跳过。

这样做的好处是,比如背景层和内容层大部分时间都是不变的,就不用重绘,
只有动画层每帧更新。这样CPU只需要绘制一小部分内容,而不是整个画布。

实测效果很明显,CPU占用从80%降到了20%,帧率从30多提升到了稳定60fps。"

##### 追问准备:
- 上层Canvas会不会遮挡下层事件?
  答: 会的,所以要设置pointer-events: none让不需要交互的图层穿透事件。

- 多个Canvas会不会增加内存?
  答: 会增加一些,但相比性能提升,这点内存开销是值得的。而且可以按需创建。

### Q2: 离屏渲染是什么?什么时候用?

#### 标准回答(2分钟):

"离屏渲染就是先把内容绘制到一个不可见的Canvas上,然后一次性复制到主Canvas。

我们项目有很多装饰性的图形,比如一个复杂的星形边框。如果每帧都重新计算和绘制这个星形,
要花10ms左右。页面有100个这样的星形,每帧就要1秒钟,根本跑不动。

离屏渲染的思路是,我创建一个不可见的Canvas,提前把星形画好,缓存起来。
主Canvas需要的时候,直接用drawImage把离屏Canvas复制过来就行了。
drawImage非常快,只要0.3ms,比重新绘制快30多倍。

什么时候适合用离屏渲染?一个是复杂图形,计算量大的。二个是重复使用的,
比如图标、装饰元素。三个是静态内容,不会变的。

实现上要注意内存管理。离屏Canvas也占内存,不能无限创建。我用了LRU缓存,
最多保留100个离屏Canvas,超过了就清理最旧的。还要在不需要时及时销毁,避免内存泄漏。

我们优化后,复杂图形的渲染性能提升了20-30倍,效果非常明显。"

##### 追问准备:
- 所有东西都离屏渲染会怎样?
  答: 不会有性能提升,反而可能更慢,因为drawImage也有开销。只对重复使用的内容离屏渲染才有意义。

### Q3: Web Worker怎么优化性能?

#### 标准回答(2分钟):

"Worker主要用来处理CPU密集型计算,避免阻塞主线程。

我们大屏需要处理100万条数据,做聚合计算、排序、过滤这些。
最开始在主线程做,要8秒左右,期间页面完全卡住,点哪里都没反应,用户体验很差。

Worker的原理是开一个独立的线程执行JavaScript,不会阻塞主线程。
主线程用postMessage发数据给Worker,Worker计算完后再postMessage返回结果。

我的实现是,创建一个Worker,把数据发过去。Worker里做各种计算,完成后返回结果。
主线程收到结果后更新页面。这个过程中,主线程完全不阻塞,用户可以正常交互。

用了Worker后,同样100万条数据,主线程只需要等3秒,而且这3秒内用户可以正常操作,
体验提升非常大。

不过Worker也有局限。一个是不能访问DOM,所有DOM操作必须在主线程。
二个是数据传输有序列化开销,不适合频繁通信。我们一般是批量处理,减少通信次数。

还有个优化是用TransferableObject,像ArrayBuffer这种,传输时不需要复制,
直接转移所有权,性能更好。"

##### 追问准备:
- 什么时候不适合用Worker?
  答: 计算量小的任务不适合,因为创建Worker和通信也有开销。还有需要频繁访问DOM的也不适合。

### Q4: GPU加速怎么实现?

#### 标准回答(1.5-2分钟):

"GPU加速就是让GPU而不是CPU来处理动画和渲染,性能会好很多。

浏览器里,某些CSS属性是GPU加速的,比如transform、opacity。
另一些属性会触发layout,比如left、top、width、height,这些是CPU处理的,性能差。

我们最开始的动画用的是left和top来移动元素。100个元素动画,帧率只有30fps,很卡。
后来改成transform: translate,同样100个元素,帧率直接上60fps,非常流畅。

区别在于,left和top会触发layout,浏览器要重新计算所有元素的位置,然后paint、composite,
整个过程很慢。而transform只触发composite,直接在GPU层做变换,不需要重新layout和paint,
所以快很多。

实现时还可以加will-change: transform,提前告诉浏览器这个属性要变,
浏览器会把这个元素提升为一个单独的层,优化渲染。

还有个技巧是加transform: translateZ(0),强制开启GPU加速。
不过不要滥用,因为每个层都占GPU内存,太多层反而会降低性能。

我们优化后,动画帧率从30fps提升到60fps,CPU占用从60%降到10%,效果非常好。"

##### 追问准备:
- will-change可以一直开着吗?
  答: 不建议,会持续占用GPU资源。最好是动画开始前设置,结束后移除。

---

## 难点与亮点分析

### 难点1: 多Canvas事件处理

#### 问题描述:
分层渲染时,上层Canvas完全覆盖下层,导致下层无法响应鼠标事件。
比如交互层在最上面,用户想点击内容层的图表却点不到。

##### 解决方案:
```css
/* 不需要交互的图层设置事件穿透 */
.background-layer,
.animation-layer {
  pointer-events: none;
}

/* 需要交互的图层捕获事件 */
.interaction-layer,
.content-layer {
  pointer-events: auto;
}

// 在Canvas上模拟事件检测
canvas.addEventListener('click', (e) => {
  const x = e.offsetX
  const y = e.offsetY

  // 检测点击位置是否在某个图形内
  objects.forEach(obj => {
    if (isPointInObject(x, y, obj)) {
      obj.onClick()
    }
  })
})

class OffscreenCacheManager {
  constructor(maxSize = 100) {
    this.cache = new Map()
    this.maxSize = maxSize
    this.accessTime = new Map()
  }

  get(key) {
    if (this.cache.has(key)) {
      this.accessTime.set(key, Date.now())
      return this.cache.get(key)
    }
    return null
  }

  set(key, canvas) {
    // 超出容量,删除最久未使用的
    if (this.cache.size >= this.maxSize) {
      let oldestKey = null
      let oldestTime = Infinity

      this.accessTime.forEach((time, k) => {
        if (time < oldestTime) {
          oldestTime = time
          oldestKey = k
        }
      })

      if (oldestKey) {
        this.cache.delete(oldestKey)
        this.accessTime.delete(oldestKey)
      }
    }

    this.cache.set(key, canvas)
    this.accessTime.set(key, Date.now())
  }

  clear() {
    this.cache.clear()
    this.accessTime.clear()
  }
}

// ❌ 错误: 逐条发送
data.forEach(item => worker.postMessage(item))

// ✅ 正确: 批量发送
worker.postMessage(data)

// ❌ 普通传输(复制)
const buffer = new ArrayBuffer(1024 * 1024)
worker.postMessage(buffer) // 复制1MB数据

// ✅ 转移所有权(零拷贝)
const buffer = new ArrayBuffer(1024 * 1024)
worker.postMessage(buffer, [buffer]) // 转移,无需复制
// 注意: 主线程不再能访问buffer

// 共享内存,但受浏览器安全策略限制
const shared = new SharedArrayBuffer(1024)
worker.postMessage({ type: 'init', buffer: shared })
// Worker和主线程可同时访问

class AdaptiveRenderer {
  constructor() {
    this.quality = this.detectQuality()
  }

  detectQuality() {
    const cores = navigator.hardwareConcurrency || 4
    const memory = navigator.deviceMemory || 4

    if (cores >= 8 && memory >= 8) return 'high'
    if (cores >= 4 && memory >= 4) return 'medium'
    return 'low'
  }

  render() {
    if (this.quality === 'high') {
      this.renderFull()
    } else if (this.quality === 'medium') {
      this.renderOptimized()
    } else {
      this.renderMinimal()
    }
  }
}

class FrameBudgetManager {
  constructor() {
    this.budget = 16.6 // ms
    this.tasks = []
  }

  addTask(fn, priority) {
    this.tasks.push({ fn, priority })
    this.tasks.sort((a, b) => b.priority - a.priority)
  }

  render() {
    const startTime = performance.now()

    for (const task of this.tasks) {
      const elapsed = performance.now() - startTime

      if (elapsed > this.budget) {
        console.warn('帧预算超支')
        break
      }

      task.fn()
    }
  }
}