16.7ms = 樣式計(jì)算 + 布局 + 繪制 + 合成 + JavaScript執(zhí)行

// 問(wèn)題示例：強(qiáng)制同步布局（Layout Thrashing）
function updateHeights() {
  for (let i = 0; i < images.length; i++) {
    // ? 讀取布局信息（觸發(fā)重排）
    const height = images[i].offsetHeight;
    // ? 寫入樣式（再次觸發(fā)重排）
    images[i].style.height = (height + 10) + 'px';
  }
}
// 這種"讀-寫-讀-寫"循環(huán)會(huì)導(dǎo)致多次強(qiáng)制同步布局

/* 問(wèn)題示例：不當(dāng)?shù)膱D層創(chuàng)建 */
.image-item {
  will-change: transform; /* 過(guò)度使用會(huì)消耗大量?jī)?nèi)存 */
  transform: translate3d(0, 0, 0);
  /* 每張圖片都創(chuàng)建獨(dú)立合成層，增加內(nèi)存和GPU負(fù)擔(dān) */
}

// 問(wèn)題：圖片解碼阻塞
const img = new Image();
img.src = 'large-image.jpg'; // 大圖片解碼在主線程進(jìn)行
img.onload = () => {
  // 解碼過(guò)程阻塞主線程
};

// 問(wèn)題：垃圾回收暫停
function loadImages() {
  for (let i = 0; i < 100; i++) {
    const tempImage = new Image(); // 創(chuàng)建大量臨時(shí)對(duì)象
    tempImage.src = `image${i}.jpg`;
    // tempImage持續(xù)被引用，無(wú)法及時(shí)GC
  }
}

// 問(wèn)題：密集的scroll事件
element.addEventListener('scroll', (e) => {
  // 默認(rèn)情況下，scroll事件會(huì)阻塞頁(yè)面
  // 即使使用requestAnimationFrame，頻率仍可能過(guò)高
  updatePosition();
}, { passive: false }); // 默認(rèn)值，會(huì)阻塞滾動(dòng)

// ? 正確做法：批量讀寫，使用FastDOM模式
function updateHeights() {
  // 批量讀取
  const heights = images.map(img => img.offsetHeight);
  
  // 批量寫入
  requestAnimationFrame(() => {
    images.forEach((img, i) => {
      img.style.height = (heights[i] + 10) + 'px';
    });
  });
}

// ? 使用ResizeObserver替代offsetHeight
const resizeObserver = new ResizeObserver(entries => {
  entries.forEach(entry => {
    // 異步獲取尺寸變化，不阻塞主線程
    console.log(entry.contentRect);
  });
});
images.forEach(img => resizeObserver.observe(img));

/* ? 正確的圖層管理 */
.image-container {
  /* 容器創(chuàng)建合成層 */
  will-change: transform; /* 謹(jǐn)慎使用 */
  contain: strict; /* 告訴瀏覽器元素獨(dú)立，避免影響外部 */
}

.image-item {
  /* 子元素不創(chuàng)建額外圖層 */
  transform: translateZ(0); /* 僅對(duì)需要?jiǎng)赢嫷脑厥褂?*/
}

/* 分離動(dòng)畫層 */
.animated-layer {
  position: fixed;
  transform: translateZ(0);
  pointer-events: none; /* 不影響交互 */
}

// worker.js
self.onmessage = function(e) {
  const { images, containerWidth } = e.data;
  // 在Worker線程計(jì)算布局
  const layouts = images.map(img => calculateLayout(img, containerWidth));
  self.postMessage(layouts);
};

// main.js
const worker = new Worker('worker.js');
worker.postMessage({ images: imageData, containerWidth });
worker.onmessage = function(e) {
  const layouts = e.data;
  // 主線程只負(fù)責(zé)渲染
  renderImages(layouts);
};

async function lazyLoadImages(images) {
  const BATCH_SIZE = 5;
  const BATCH_TIME = 8; // ms
  
  for (let i = 0; i < images.length; i += BATCH_SIZE) {
    const startTime = performance.now();
    
    // 處理一批圖片
    for (let j = i; j < i + BATCH_SIZE && j < images.length; j++) {
      await loadSingleImage(images[j]);
    }
    
    // 如果處理時(shí)間不足，讓出主線程
    const elapsed = performance.now() - startTime;
    if (elapsed < BATCH_TIME) {
      await new Promise(resolve => setTimeout(resolve, BATCH_TIME - elapsed));
    }
  }
}

// 使用decode() API異步解碼
async function loadImage(src) {
  const img = new Image();
  img.src = src;
  
  if ('decode' in img) {
    // 異步解碼，不阻塞主線程
    await img.decode();
  } else {
    // 降級(jí)方案
    await new Promise((resolve, reject) => {
      img.onload = resolve;
      img.onerror = reject;
    });
  }
  return img;
}

// 使用ImageBitmap避免解碼阻塞
async function createImageBitmapFromUrl(url) {
  const response = await fetch(url);
  const blob = await response.blob();
  return await createImageBitmap(blob);
}

class ImagePool {
  constructor(maxSize = 20) {
    this.pool = new Map(); // 使用WeakMap更好
    this.maxSize = maxSize;
    this.accessQueue = [];
  }
  
  getImage(key) {
    if (this.pool.has(key)) {
      // 更新訪問(wèn)時(shí)間
      this.updateAccessTime(key);
      return this.pool.get(key);
    }
    return null;
  }
  
  setImage(key, image) {
    if (this.pool.size >= this.maxSize) {
      // 移除最久未使用的
      const oldest = this.accessQueue.shift();
      this.pool.delete(oldest);
    }
    
    this.pool.set(key, image);
    this.accessQueue.push(key);
  }
  
  updateAccessTime(key) {
    const index = this.accessQueue.indexOf(key);
    if (index > -1) {
      this.accessQueue.splice(index, 1);
    }
    this.accessQueue.push(key);
  }
}

// ? 正確：不阻塞滾動(dòng)的監(jiān)聽器
container.addEventListener('touchmove', handleTouchMove, { 
  passive: true, // 不會(huì)調(diào)用preventDefault()
  capture: false 
});

// ? 使用Intersection Observer替代scroll事件
const intersectionObserver = new IntersectionObserver(
  (entries) => {
    entries.forEach(entry => {
      if (entry.isIntersecting) {
        loadLazyImage(entry.target);
      }
    });
  },
  {
    rootMargin: '200px 0px', // 預(yù)加載區(qū)域
    threshold: 0.01 // 至少1%可見
  }
);

class IncrementalRenderer {
  constructor(container, itemHeight) {
    this.container = container;
    this.itemHeight = itemHeight;
    this.visibleItems = new Set();
    this.renderQueue = [];
    this.isRendering = false;
  }
  
  onScroll() {
    const scrollTop = this.container.scrollTop;
    const viewportHeight = this.container.clientHeight;
    
    // 計(jì)算可見范圍
    const startIndex = Math.floor(scrollTop / this.itemHeight);
    const endIndex = Math.ceil((scrollTop + viewportHeight) / this.itemHeight);
    
    // 增量更新
    this.scheduleRender(startIndex, endIndex);
  }
  
  scheduleRender(startIndex, endIndex) {
    this.renderQueue.push([startIndex, endIndex]);
    
    if (!this.isRendering) {
      this.renderBatch();
    }
  }
  
  async renderBatch() {
    this.isRendering = true;
    
    // 使用空閑時(shí)間渲染
    await this.idleRender();
    
    if (this.renderQueue.length > 0) {
      requestAnimationFrame(() => this.renderBatch());
    } else {
      this.isRendering = false;
    }
  }
  
  idleRender() {
    return new Promise(resolve => {
      if ('requestIdleCallback' in window) {
        requestIdleCallback(() => {
          const [start, end] = this.renderQueue.shift();
          this.renderVisibleRange(start, end);
          resolve();
        }, { timeout: 100 });
      } else {
        setTimeout(() => {
          const [start, end] = this.renderQueue.shift();
          this.renderVisibleRange(start, end);
          resolve();
        }, 0);
      }
    });
  }
}

// 使用PixiJS或Three.js通過(guò)WebGL批量渲染
const app = new PIXI.Application({
  transparent: true,
  resolution: window.devicePixelRatio
});

// 批量處理精靈
const spritePool = [];
function createSprite(texture) {
  const sprite = new PIXI.Sprite(texture);
  sprite.anchor.set(0.5);
  return sprite;
}

// 使用PIXI.RenderTexture進(jìn)行離屏渲染
const renderTexture = PIXI.RenderTexture.create({ width: 800, height: 600 });

.image-list {
  content-visibility: auto;
  /* 瀏覽器會(huì)自動(dòng)跳過(guò)不可見內(nèi)容的渲染 */
  contain-intrinsic-size: 0 500px; /* 提供占位尺寸 */
}

.image-item {
  /* 當(dāng)元素不可見時(shí)，瀏覽器會(huì)跳過(guò)渲染 */
}

// 監(jiān)控滾動(dòng)性能
const observer = new PerformanceObserver((list) => {
  for (const entry of list.getEntries()) {
    if (entry.name === 'first-contentful-paint') {
      console.log('FCP:', entry.startTime);
    }
  }
});

// 監(jiān)控輸入延遲
const inputObserver = new PerformanceObserver((list) => {
  list.getEntries().forEach(entry => {
    if (entry.duration > 50) { // 輸入延遲超過(guò)50ms
      console.warn('High input latency:', entry);
    }
  });
});

// 使用RAIL模型評(píng)估
// Response: < 100ms
// Animation: < 16ms per frame
// Idle: 最大化空閑時(shí)間
// Load: < 1000ms to interactive

<img src="tiny.jpg" 
     data-src="small.jpg" 
     data-srcset="medium.jpg 800w, large.jpg 1200w"
     loading="lazy"
     decoding="async">

// 根據(jù)設(shè)備性能自動(dòng)降級(jí)
if (!('requestIdleCallback' in window)) {
  // 使用setTimeout降級(jí)方案
}

// 根據(jù)網(wǎng)絡(luò)狀況調(diào)整
if (navigator.connection && navigator.connection.saveData) {
  // 使用低分辨率圖片
}