渲染性能优化 ​

// 避免强制同步布局
function efficientLayoutUpdates() {
  // 不良模式：读写交替导致强制布局
  for (let i = 0; i < items.length; i++) {
    // 读取（触发布局）
    const height = items[i].offsetHeight;
    // 写入（再次触发布局）
    items[i].style.height = height + 10 + 'px';
  }
  
  // 优化模式：批量读写
  const heights = [];
  // 批量读取
  for (let i = 0; i < items.length; i++) {
    heights.push(items[i].offsetHeight);
  }
  // 批量写入
  for (let i = 0; i < items.length; i++) {
    items[i].style.height = heights[i] + 10 + 'px';
  }
}

// 使用FastDOM模式
class FastDOM {
  static reads = [];
  static writes = [];
  
  static scheduleRead(fn) {
    this.reads.push(fn);
    this.scheduleFlush();
  }
  
  static scheduleWrite(fn) {
    this.writes.push(fn);
    this.scheduleFlush();
  }
  
  static scheduleFlush() {
    if (!this.scheduled) {
      this.scheduled = true;
      requestAnimationFrame(() => {
        // 先执行所有读取
        this.reads.forEach(fn => fn());
        this.reads.length = 0;
        
        // 再执行所有写入
        this.writes.forEach(fn => fn());
        this.writes.length = 0;
        
        this.scheduled = false;
      });
    }
  }
}

// 绘制优化实践
function optimizePainting() {
  // 使用transform和opacity触发合成层
  // 这些属性不会触发重绘
  element.style.transform = 'translateX(100px)';
  element.style.opacity = '0.5';
  
  // 避免在动画中修改布局属性
  // 不良：触发重排和重绘
  // element.style.width = '200px';
  
  // 使用will-change预提示浏览器
  element.style.willChange = 'transform';
  
  // 动画结束后移除will-change
  element.addEventListener('transitionend', () => {
    element.style.willChange = 'auto';
  });
}

// 减少绘制区域技术
function reducePaintAreas() {
  // 使用clip-path限制绘制区域
  element.style.clipPath = 'circle(50% at 50% 50%)';
  
  // 对于固定位置元素，使用contain属性
  element.style.contain = 'layout paint style';
}

// 合成层管理
class LayerManager {
  constructor() {
    this.activeLayers = new Set();
  }
  
  // 创建合成层用于动画
  promoteToLayer(element, reason = 'animation') {
    if (reason === 'animation') {
      element.style.transform = 'translateZ(0)';
    } else if (reason === 'will-change') {
      element.style.willChange = 'transform';
    }
    
    this.activeLayers.add(element);
    
    // 自动清理长时间未使用的图层
    setTimeout(() => {
      if (this.activeLayers.has(element)) {
        this.demoteFromLayer(element);
      }
    }, 5000);
  }
  
  // 降级合成层
  demoteFromLayer(element) {
    element.style.transform = '';
    element.style.willChange = 'auto';
    this.activeLayers.delete(element);
  }
  
  // 批量管理图层
  optimizeLayers(elements) {
    // 对需要频繁更新的元素创建图层
    elements.forEach(element => {
      if (this.needsFrequentUpdates(element)) {
        this.promoteToLayer(element, 'animation');
      }
    });
  }
  
  needsFrequentUpdates(element) {
    // 检测元素是否在动画或频繁更新
    const computedStyle = window.getComputedStyle(element);
    return computedStyle.animationName !== 'none' || 
           computedStyle.transitionProperty !== 'none';
  }
}

// 使用requestAnimationFrame优化渲染
class AnimationOptimizer {
  constructor() {
    this.animations = new Map();
    this.frameId = null;
  }
  
  // 注册动画更新函数
  registerAnimation(key, updateFn) {
    this.animations.set(key, updateFn);
    this.scheduleFrame();
  }
  
  // 调度动画帧
  scheduleFrame() {
    if (!this.frameId) {
      this.frameId = requestAnimationFrame(this.updateAnimations.bind(this));
    }
  }
  
  // 更新所有动画
  updateAnimations(timestamp) {
    this.animations.forEach(updateFn => {
      updateFn(timestamp);
    });
    
    this.frameId = null;
    if (this.animations.size > 0) {
      this.scheduleFrame();
    }
  }
  
  // 停止动画
  stopAnimation(key) {
    this.animations.delete(key);
  }
}

// 优化DOM操作批次
function batchDOMOperations(operations) {
  // 使用文档片段批量操作
  const fragment = document.createDocumentFragment();
  
  operations.forEach(op => {
    const element = document.createElement(op.tag);
    element.textContent = op.content;
    fragment.appendChild(element);
  });
  
  // 单次插入到DOM
  document.getElementById('container').appendChild(fragment);
}

// 使用微任务批量更新
function scheduleMicrotaskUpdate(updateFn) {
  let scheduled = false;
  
  return function() {
    if (!scheduled) {
      scheduled = true;
      Promise.resolve().then(() => {
        scheduled = false;
        updateFn();
      });
    }
  };
}

// 响应式图片优化
class ResponsiveImageLoader {
  constructor() {
    this.breakpoints = [400, 800, 1200, 1920];
    this.formats = ['webp', 'avif', 'jpg'];
  }
  
  // 生成图片srcset
  generateSrcSet(basePath, imageName) {
    const srcset = {};
    
    this.formats.forEach(format => {
      srcset[format] = this.breakpoints.map(width => 
        `${basePath}/${imageName}-${width}.${format} ${width}w`
      ).join(', ');
    });
    
    return srcset;
  }
  
  // 懒加载图片
  setupLazyLoading(images) {
    const observer = new IntersectionObserver((entries) => {
      entries.forEach(entry => {
        if (entry.isIntersecting) {
          const img = entry.target;
          img.src = img.dataset.src;
          img.classList.remove('lazy');
          observer.unobserve(img);
        }
      });
    });
    
    images.forEach(img => {
      observer.observe(img);
    });
  }
  
  // 渐进式图片加载
  setupProgressiveLoading(container) {
    // 先加载低质量占位图
    const placeholder = this.createLowQualityPlaceholder();
    container.appendChild(placeholder);
    
    // 然后加载高质量图片
    this.loadHighQualityImage().then(highResImg => {
      container.replaceChild(highResImg, placeholder);
    });
  }
}

// 字体加载状态管理
class FontLoadManager {
  constructor() {
    this.loadedFonts = new Set();
  }
  
  // 监控字体加载
  monitorFontLoad(fontFamily) {
    const font = new FontFaceObserver(fontFamily);
    
    font.load().then(() => {
      this.loadedFonts.add(fontFamily);
      document.documentElement.classList.add('fonts-loaded');
      
      // 触发字体加载完成事件
      this.onFontLoaded(fontFamily);
    }).catch((error) => {
      console.warn(`Font ${fontFamily} failed to load:`, error);
    });
  }
  
  onFontLoaded(fontFamily) {
    // 更新CSS变量或触发重新渲染
    document.documentElement.style.setProperty(
      '--font-loaded', 
      Date.now().toString()
    );
  }
  
  // 预连接字体域名
  preconnectFontHosts(hosts) {
    hosts.forEach(host => {
      const link = document.createElement('link');
      link.rel = 'preconnect';
      link.href = host;
      link.crossOrigin = 'anonymous';
      document.head.appendChild(link);
    });
  }
}

// 渲染性能监控
class RenderingMonitor {
  constructor() {
    this.metrics = new Map();
    this.observer = null;
  }
  
  // 监控帧率
  startFrameRateMonitoring() {
    let lastTime = performance.now();
    let frameCount = 0;
    
    const checkFrames = () => {
      const currentTime = performance.now();
      frameCount++;
      
      if (currentTime - lastTime >= 1000) {
        const fps = Math.round((frameCount * 1000) / (currentTime - lastTime));
        this.recordMetric('fps', fps);
        
        frameCount = 0;
        lastTime = currentTime;
        
        // 低帧率警告
        if (fps < 30) {
          this.reportLowFPS(fps);
        }
      }
      
      requestAnimationFrame(checkFrames);
    };
    
    requestAnimationFrame(checkFrames);
  }
  
  // 监控布局偏移
  startLayoutShiftMonitoring() {
    let clsValue = 0;
    
    this.observer = new PerformanceObserver((list) => {
      for (const entry of list.getEntries()) {
        if (!entry.hadRecentInput) {
          clsValue += entry.value;
          this.recordMetric('cls', clsValue);
        }
      }
    });
    
    this.observer.observe({ type: 'layout-shift', buffered: true });
  }
  
  // 记录渲染指标
  recordMetric(name, value) {
    if (!this.metrics.has(name)) {
      this.metrics.set(name, []);
    }
    this.metrics.get(name).push({
      value,
      timestamp: Date.now()
    });
  }
  
  // 生成性能报告
  generateReport() {
    const report = {};
    
    for (const [name, values] of this.metrics) {
      const recentValues = values.slice(-100); // 最近100个样本
      report[name] = {
        current: recentValues[recentValues.length - 1]?.value,
        average: this.calculateAverage(recentValues),
        min: this.calculateMin(recentValues),
        max: this.calculateMax(recentValues),
        trend: this.calculateTrend(recentValues)
      };
    }
    
    return report;
  }
  
  // 监控强制同步布局
  monitorForcedSyncLayout() {
    const originalOffsetHeight = Object.getOwnPropertyDescriptor(
      HTMLElement.prototype, 'offsetHeight'
    ).get;
    
    Object.defineProperty(HTMLElement.prototype, 'offsetHeight', {
      get: function() {
        const value = originalOffsetHeight.call(this);
        // 检测到在样式修改后立即读取布局属性
        performance.mark('forced-sync-layout');
        return value;
      }
    });
  }
}