collabdocchat 1.2.13 → 2.0.0

package/src/utils/performance.js

@@ -0,0 +1,394 @@
+/**
+ * 虚拟滚动实现
+ * 用于优化长列表渲染性能
+ */
+export class VirtualScroller {
+  constructor(container, options = {}) {
+    this.container = container;
+    this.itemHeight = options.itemHeight || 60;
+    this.buffer = options.buffer || 5;
+    this.items = [];
+    this.renderItem = options.renderItem;
+    this.visibleStart = 0;
+    this.visibleEnd = 0;
+    
+    this.init();
+  }
+
+  init() {
+    this.container.style.position = 'relative';
+    this.container.style.overflow = 'auto';
+    
+    // 创建内容容器
+    this.content = document.createElement('div');
+    this.content.style.position = 'relative';
+    this.container.appendChild(this.content);
+    
+    // 监听滚动事件
+    this.container.addEventListener('scroll', this.handleScroll.bind(this));
+    
+    // 监听窗口大小变化
+    window.addEventListener('resize', this.handleResize.bind(this));
+  }
+
+  setItems(items) {
+    this.items = items;
+    this.content.style.height = `${items.length * this.itemHeight}px`;
+    this.render();
+  }
+
+  handleScroll() {
+    requestAnimationFrame(() => this.render());
+  }
+
+  handleResize() {
+    requestAnimationFrame(() => this.render());
+  }
+
+  render() {
+    const scrollTop = this.container.scrollTop;
+    const containerHeight = this.container.clientHeight;
+    
+    // 计算可见范围
+    this.visibleStart = Math.max(0, Math.floor(scrollTop / this.itemHeight) - this.buffer);
+    this.visibleEnd = Math.min(
+      this.items.length,
+      Math.ceil((scrollTop + containerHeight) / this.itemHeight) + this.buffer
+    );
+    
+    // 清空内容
+    this.content.innerHTML = '';
+    
+    // 渲染可见项
+    for (let i = this.visibleStart; i < this.visibleEnd; i++) {
+      const item = this.items[i];
+      const element = this.renderItem(item, i);
+      element.style.position = 'absolute';
+      element.style.top = `${i * this.itemHeight}px`;
+      element.style.width = '100%';
+      element.style.height = `${this.itemHeight}px`;
+      this.content.appendChild(element);
+    }
+  }
+
+  scrollToIndex(index) {
+    this.container.scrollTop = index * this.itemHeight;
+  }
+
+  destroy() {
+    this.container.removeEventListener('scroll', this.handleScroll);
+    window.removeEventListener('resize', this.handleResize);
+    this.content.remove();
+  }
+}
+
+/**
+ * 图片懒加载
+ */
+export class LazyLoader {
+  constructor(options = {}) {
+    this.rootMargin = options.rootMargin || '50px';
+    this.threshold = options.threshold || 0.01;
+    this.loadingClass = options.loadingClass || 'lazy-loading';
+    this.loadedClass = options.loadedClass || 'lazy-loaded';
+    this.errorClass = options.errorClass || 'lazy-error';
+    
+    this.observer = null;
+    this.init();
+  }
+
+  init() {
+    if ('IntersectionObserver' in window) {
+      this.observer = new IntersectionObserver(
+        this.handleIntersection.bind(this),
+        {
+          rootMargin: this.rootMargin,
+          threshold: this.threshold
+        }
+      );
+    }
+  }
+
+  observe(element) {
+    if (!element || !this.observer) return;
+    
+    // 添加加载中类
+    element.classList.add(this.loadingClass);
+    
+    // 开始观察
+    this.observer.observe(element);
+  }
+
+  observeAll(selector = '[data-lazy-src]') {
+    const elements = document.querySelectorAll(selector);
+    elements.forEach(el => this.observe(el));
+  }
+
+  handleIntersection(entries) {
+    entries.forEach(entry => {
+      if (entry.isIntersecting) {
+        this.loadImage(entry.target);
+        this.observer.unobserve(entry.target);
+      }
+    });
+  }
+
+  loadImage(element) {
+    const src = element.dataset.lazySrc;
+    const srcset = element.dataset.lazySrcset;
+    
+    if (!src) return;
+    
+    const img = new Image();
+    
+    img.onload = () => {
+      if (element.tagName === 'IMG') {
+        element.src = src;
+        if (srcset) element.srcset = srcset;
+      } else {
+        element.style.backgroundImage = `url(${src})`;
+      }
+      
+      element.classList.remove(this.loadingClass);
+      element.classList.add(this.loadedClass);
+    };
+    
+    img.onerror = () => {
+      element.classList.remove(this.loadingClass);
+      element.classList.add(this.errorClass);
+      console.error('图片加载失败:', src);
+    };
+    
+    img.src = src;
+  }
+
+  destroy() {
+    if (this.observer) {
+      this.observer.disconnect();
+    }
+  }
+}
+
+/**
+ * 防抖函数
+ */
+export function debounce(func, wait = 300) {
+  let timeout;
+  return function executedFunction(...args) {
+    const later = () => {
+      clearTimeout(timeout);
+      func(...args);
+    };
+    clearTimeout(timeout);
+    timeout = setTimeout(later, wait);
+  };
+}
+
+/**
+ * 节流函数
+ */
+export function throttle(func, limit = 300) {
+  let inThrottle;
+  return function executedFunction(...args) {
+    if (!inThrottle) {
+      func(...args);
+      inThrottle = true;
+      setTimeout(() => inThrottle = false, limit);
+    }
+  };
+}
+
+/**
+ * 请求动画帧节流
+ */
+export function rafThrottle(func) {
+  let rafId = null;
+  return function executedFunction(...args) {
+    if (rafId === null) {
+      rafId = requestAnimationFrame(() => {
+        func(...args);
+        rafId = null;
+      });
+    }
+  };
+}
+
+/**
+ * 代码分割 - 动态导入
+ */
+export async function loadModule(modulePath) {
+  try {
+    const module = await import(modulePath);
+    return module;
+  } catch (error) {
+    console.error('模块加载失败:', modulePath, error);
+    throw error;
+  }
+}
+
+/**
+ * 资源预加载
+ */
+export function preloadResource(url, type = 'fetch') {
+  const link = document.createElement('link');
+  link.rel = 'preload';
+  link.href = url;
+  
+  switch (type) {
+    case 'script':
+      link.as = 'script';
+      break;
+    case 'style':
+      link.as = 'style';
+      break;
+    case 'image':
+      link.as = 'image';
+      break;
+    case 'font':
+      link.as = 'font';
+      link.crossOrigin = 'anonymous';
+      break;
+    default:
+      link.as = 'fetch';
+      link.crossOrigin = 'anonymous';
+  }
+  
+  document.head.appendChild(link);
+}
+
+/**
+ * 性能监控
+ */
+export class PerformanceMonitor {
+  constructor() {
+    this.marks = new Map();
+    this.measures = [];
+  }
+
+  mark(name) {
+    const timestamp = performance.now();
+    this.marks.set(name, timestamp);
+    performance.mark(name);
+  }
+
+  measure(name, startMark, endMark) {
+    try {
+      performance.measure(name, startMark, endMark);
+      const measure = performance.getEntriesByName(name, 'measure')[0];
+      
+      this.measures.push({
+        name,
+        duration: measure.duration,
+        startTime: measure.startTime
+      });
+      
+      return measure.duration;
+    } catch (error) {
+      console.error('性能测量失败:', error);
+      return 0;
+    }
+  }
+
+  getMetrics() {
+    const navigation = performance.getEntriesByType('navigation')[0];
+    const paint = performance.getEntriesByType('paint');
+    
+    return {
+      // 页面加载时间
+      loadTime: navigation ? navigation.loadEventEnd - navigation.fetchStart : 0,
+      // DOM 解析时间
+      domParseTime: navigation ? navigation.domContentLoadedEventEnd - navigation.domContentLoadedEventStart : 0,
+      // 首次绘制
+      firstPaint: paint.find(p => p.name === 'first-paint')?.startTime || 0,
+      // 首次内容绘制
+      firstContentfulPaint: paint.find(p => p.name === 'first-contentful-paint')?.startTime || 0,
+      // 自定义测量
+      customMeasures: this.measures
+    };
+  }
+
+  logMetrics() {
+    const metrics = this.getMetrics();
+    console.table(metrics);
+  }
+
+  clear() {
+    this.marks.clear();
+    this.measures = [];
+    performance.clearMarks();
+    performance.clearMeasures();
+  }
+}
+
+/**
+ * 内存优化 - 对象池
+ */
+export class ObjectPool {
+  constructor(factory, reset, initialSize = 10) {
+    this.factory = factory;
+    this.reset = reset;
+    this.pool = [];
+    
+    // 预创建对象
+    for (let i = 0; i < initialSize; i++) {
+      this.pool.push(this.factory());
+    }
+  }
+
+  acquire() {
+    return this.pool.length > 0 ? this.pool.pop() : this.factory();
+  }
+
+  release(obj) {
+    this.reset(obj);
+    this.pool.push(obj);
+  }
+
+  clear() {
+    this.pool = [];
+  }
+
+  get size() {
+    return this.pool.length;
+  }
+}
+
+/**
+ * 批量 DOM 更新
+ */
+export class BatchUpdater {
+  constructor() {
+    this.updates = [];
+    this.scheduled = false;
+  }
+
+  add(updateFn) {
+    this.updates.push(updateFn);
+    this.schedule();
+  }
+
+  schedule() {
+    if (this.scheduled) return;
+    
+    this.scheduled = true;
+    requestAnimationFrame(() => {
+      this.flush();
+    });
+  }
+
+  flush() {
+    const updates = this.updates.slice();
+    this.updates = [];
+    this.scheduled = false;
+    
+    updates.forEach(update => {
+      try {
+        update();
+      } catch (error) {
+        console.error('批量更新失败:', error);
+      }
+    });
+  }
+}
+
+