Loading...

JavaScript性能优化—重排重绘、V8 GC机制与Observer API实战|新宇宙博客

技术

52 分钟

性能敏感型 API 与渲染边界

JavaScript 进阶

Site Owner

发布于 2026-05-21

详解重排重绘批量优化策略、V8新生代老生代GC机制、内存泄漏检测、WeakMap应用及长列表虚拟化优化

性能敏感型 API 与渲染边界

性能敏感型 API 与渲染边界

Web 性能优化的第一步是精确测量。浏览器提供了 Performance API、IntersectionObserver、ResizeObserver、PerformanceObserver 等底层接口，配合 Core Web Vitals 指标（LCP、FID、CLS），可以构建完整的性能监控体系。本文覆盖关键渲染路径优化、Layout Thrashing 避免、以及内存/帧率分析。

目录

Performance API 核心
Core Web Vitals 测量
关键渲染路径优化
IntersectionObserver 懒加载
Layout Thrashing 检测与修复
内存管理与泄漏检测
实战案例
深度追问
总结表格

1. Performance API 核心

// 代码示例 1：精确时间测量
// High-Resolution Time
const start = performance.now(); // 微秒精度
heavyOperation();
const duration = performance.now() - start;
console.log();


performance.();
 data =  ();
performance.();
performance.(, , );

 measures = performance.();
.();


 nav = performance.()[];
.({
  : nav. - nav.,
  : nav. - nav.,
  : nav. - nav.,
  : nav. - nav.,
  : nav. - nav.
});

// 代码示例 2：LCP、FID、CLS 测量
// LCP (Largest Contentful Paint)
new PerformanceObserver((entryList) => {
  const entries = entryList.getEntries();
  const lastEntry = entries[entries.length - 1];
  console.log('LCP:', lastEntry.renderTime || lastEntry.loadTime);
}).observe({ type: 'largest-contentful-paint', buffered: true });

// FID (First Input Delay) / INP (Interaction to Next Paint)
new PerformanceObserver((entryList) => {
  for (const entry of entryList.getEntries()) {
    const delay = entry.processingStart - entry.startTime;
    console.log(`INP: ${entry.duration}ms, Input delay: ${delay}ms`);
  }
}).observe({ type: 'event', buffered: true, durationThreshold: 16 });

// CLS (Cumulative Layout Shift)
let clsValue = 0;
new PerformanceObserver((entryList) => {
  for (const entry of entryList.getEntries()) {
    if (!entry.hadRecentInput) {
      clsValue += entry.value;
      console.log('CLS:', clsValue);
    }
  }
}).observe({ type: 'layout-shift', buffered: true });

// 代码示例 3：资源加载优化
// 预加载关键资源
const preloadLink = document.createElement('link');
preloadLink.rel = 'preload';
preloadLink.as = 'font';
preloadLink.href = '/fonts/main.woff2';
preloadLink.crossOrigin = 'anonymous';
document.head.appendChild(preloadLink);

// 代码示例 4：使用 requestAnimationFrame 批量 DOM 操作
function batchDOMReads(elements) {
  const measurements = [];
  
  // 读取阶段（不触发回流）
  requestAnimationFrame(() => {
    elements.forEach(el => {
      measurements.push(el.getBoundingClientRect());
    });
    
    // 写入阶段（统一修改）
    requestAnimationFrame(() => {
      elements.forEach((el, i) => {
        el.style.transform = `translateY(${measurements[i].height}px)`;
      });
    });
  });
}

// 代码示例 5：高级懒加载
class LazyLoader {
  #observer;
  #loadFn;
  
  constructor(options = {}) {
    const { rootMargin = '200px', threshold = 0, loadFn } = options;
    this.#loadFn = loadFn || this.#defaultLoad;
    
    this.#observer = new IntersectionObserver(
      (entries) => {
        entries.forEach(entry => {
          if (entry.isIntersecting) {
            this.#loadFn(entry.target);
            this.#observer.unobserve(entry.target);
          }
        });
      },
      { rootMargin, threshold }
    );
  }
  
  observe(element) {
    this.#observer.observe(element);
  }
  
  #defaultLoad(element) {
    if (element.dataset.src) {
      element.src = element.dataset.src;
    }
  }
  
  disconnect() {
    this.#observer.disconnect();
  }
}

// 虚拟滚动触发
const sentinel = document.getElementById('load-more');
const infiniteScroll = new IntersectionObserver(([entry]) => {
  if (entry.isIntersecting) loadNextPage();
}, { rootMargin: '500px' });
infiniteScroll.observe(sentinel);

// 代码示例 6：Layout Thrashing 示例
// ❌ 触发 N 次强制回流
function badLayout(elements) {
  elements.forEach(el => {
    const height = el.offsetHeight;  // 读（触发回流）
    el.style.height = height * 2 + 'px'; // 写（标记脏）
    // 下次循环读取时又触发回流！
  });
}

// ✅ 读写分离
function goodLayout(elements) {
  const heights = elements.map(el => el.offsetHeight); // 批量读
  elements.forEach((el, i) => {
    el.style.height = heights[i] * 2 + 'px'; // 批量写
  });
}

// 使用 fastdom 库的理念
class FastDOM {
  #reads = [];
  #writes = [];
  #scheduled = false;
  
  measure(fn) {
    this.#reads.push(fn);
    this.#scheduleFlush();
  }
  
  mutate(fn) {
    this.#writes.push(fn);
    this.#scheduleFlush();
  }
  
  #scheduleFlush() {
    if (this.#scheduled) return;
    this.#scheduled = true;
    requestAnimationFrame(() => {
      this.#reads.forEach(fn => fn());
      this.#reads = [];
      this.#writes.forEach(fn => fn());
      this.#writes = [];
      this.#scheduled = false;
    });
  }
}

// 代码示例 7：内存监控
if (performance.measureUserAgentSpecificMemory) {
  const result = await performance.measureUserAgentSpecificMemory();
  console.log(`JS Heap: ${(result.bytes / 1024 / 1024).toFixed(1)}MB`);
  result.breakdown.forEach(entry => {
    console.log(`  ${entry.types.join('/')}: ${entry.bytes} bytes`);
  });
}

// WeakRef 监控对象生命周期
const registry = new FinalizationRegistry(label => {
  console.log(`GC collected: ${label}`);
});

function trackObject(obj, label) {
  registry.register(obj, label);
}

class PerformanceMonitor {
  #metrics = {};
  #reportUrl;
  
  constructor(reportUrl) {
    this.#reportUrl = reportUrl;
    this.#observeNavigation();
    this.#observeWebVitals();
    this.#observeLongTasks();
  }
  
  #observeNavigation() {
    window.addEventListener('load', () => {
      const nav = performance.getEntriesByType('navigation')[0];
      this.#metrics.ttfb = nav.responseStart - nav.requestStart;
      this.#metrics.fcp = performance.getEntriesByName('first-contentful-paint')[0]?.startTime;
      this.#metrics.domReady = nav.domContentLoadedEventEnd - nav.startTime;
    });
  }
  
  #observeWebVitals() {
    // LCP, CLS, INP...（如上文实现）
  }
  
  #observeLongTasks() {
    new PerformanceObserver(list => {
      for (const entry of list.getEntries()) {
        if (entry.duration > 50) {
          this.#metrics.longTasks = (this.#metrics.longTasks || 0) + 1;
        }
      }
    }).observe({ type: 'longtask' });
  }
  
  report() {
    navigator.sendBeacon(this.#reportUrl, JSON.stringify(this.#metrics));
  }
}

class VirtualList {
  #container;
  #itemHeight;
  #data;
  #visibleCount;
  
  constructor(container, data, itemHeight = 40) {
    this.#container = container;
    this.#data = data;
    this.#itemHeight = itemHeight;
    this.#visibleCount = Math.ceil(container.clientHeight / itemHeight) + 2;
    
    container.style.overflow = 'auto';
    container.style.position = 'relative';
    
    // 撑开滚动高度
    const spacer = document.createElement('div');
    spacer.style.height = `${data.length * itemHeight}px`;
    container.appendChild(spacer);
    
    container.addEventListener('scroll', () => this.#render());
    this.#render();
  }
  
  #render() {
    const scrollTop = this.#container.scrollTop;
    const startIndex = Math.floor(scrollTop / this.#itemHeight);
    const endIndex = Math.min(startIndex + this.#visibleCount, this.#data.length);
    
    // 清除旧 DOM
    this.#container.querySelectorAll('.virtual-item').forEach(el => el.remove());
    
    for (let i = startIndex; i < endIndex; i++) {
      const item = document.createElement('div');
      item.className = 'virtual-item';
      item.style.cssText = `position:absolute;top:${i * this.#itemHeight}px;height:${this.#itemHeight}px;width:100%`;
      item.textContent = this.#data[i];
      this.#container.appendChild(item);
    }
  }
}

class FPSMonitor {
  #frames = [];
  #running = false;
  #callback;
  
  start(callback) {
    this.#running = true;
    this.#callback = callback;
    this.#tick();
  }
  
  #tick() {
    if (!this.#running) return;
    
    const now = performance.now();
    this.#frames.push(now);
    
    // 保留最近 1 秒的帧
    while (this.#frames.length > 0 && this.#frames[0] < now - 1000) {
      this.#frames.shift();
    }
    
    this.#callback?.(this.#frames.length);
    requestAnimationFrame(() => this.#tick());
  }
  
  stop() { this.#running = false; }
  get fps() { return this.#frames.length; }
}

Web Vital	阈值（Good）	测量方式	优化方向
LCP	< 2.5s	PerformanceObserver	预加载、CDN、图片优化
INP	< 200ms	Event Timing	减少 JS 阻塞
CLS	< 0.1	Layout Shift	尺寸占位、字体加载
TTFB	< 800ms	Navigation Timing	服务器优化、缓存
FCP	< 1.8s	Paint Timing	关键 CSS 内联