<link rel="dns-prefetch"  rel="external nofollow" >

<link rel="preload" href="critical.css" rel="external nofollow"  as="style">
<link rel="preconnect"  rel="external nofollow" >
<link rel="prefetch" href="next-page.js" rel="external nofollow" >

// 圖片懶加載
const lazyImages = document.querySelectorAll('img.lazy');
const observer = new IntersectionObserver(entries => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      const img = entry.target;
      img.src = img.dataset.src;
      observer.unobserve(img);
    }
  });
});

lazyImages.forEach(img => observer.observe(img));

// React中使用React.lazy和Suspense
const LazyComponent = React.lazy(() => import('./LazyComponent'));

function App() {
  return (
    <Suspense fallback={<div>Loading...</div>}>
      <LazyComponent />
    </Suspense>
  );
}

<script async src="async-script.js"></script>
<script defer src="defer-script.js"></script>

const worker = new Worker('worker.js');
worker.postMessage({ data: complexData });
worker.onmessage = function(event) {
  const result = event.data;
  updateUI(result);
};

// 防抖
function debounce(fn, delay) {
  let timer = null;
  return function() {
    const context = this;
    const args = arguments;
    clearTimeout(timer);
    timer = setTimeout(() => {
      fn.apply(context, args);
    }, delay);
  };
}

// 使用防抖處理搜索輸入
const searchInput = document.getElementById('search');
const debouncedSearch = debounce(search, 300);
searchInput.addEventListener('input', debouncedSearch);

// 優(yōu)化前
for (let i = 0; i < 1000; i++) {
  document.body.appendChild(document.createElement('div'));
}

// 優(yōu)化后
const fragment = document.createDocumentFragment();
for (let i = 0; i < 1000; i++) {
  fragment.appendChild(document.createElement('div'));
}
document.body.appendChild(fragment);

class VirtualList {
  constructor(container, itemHeight, totalItems, renderItem) {
    this.container = container;
    this.itemHeight = itemHeight;
    this.totalItems = totalItems;
    this.renderItem = renderItem;
    
    this.visibleItems = Math.ceil(container.clientHeight / itemHeight) + 5;
    this.scrollTop = 0;
    this.startIndex = 0;
    
    this.init();
  }
  
  init() {
    this.container.style.position = 'relative';
    this.container.style.height = `${this.totalItems * this.itemHeight}px`;
    this.container.style.overflow = 'auto';
    
    this.container.addEventListener('scroll', () => {
      this.onScroll();
    });
    
    this.renderVisible();
  }
  
  onScroll() {
    this.scrollTop = this.container.scrollTop;
    this.startIndex = Math.floor(this.scrollTop / this.itemHeight);
    this.renderVisible();
  }
  
  renderVisible() {
    this.container.innerHTML = '';
    for (let i = this.startIndex; i < this.startIndex + this.visibleItems; i++) {
      if (i >= 0 && i < this.totalItems) {
        const item = this.renderItem(i);
        item.style.position = 'absolute';
        item.style.top = `${i * this.itemHeight}px`;
        this.container.appendChild(item);
      }
    }
  }
}

<div class="skeleton">
  <div class="skeleton-header"></div>
  <div class="skeleton-content">
    <div class="skeleton-line"></div>
    <div class="skeleton-line"></div>
    <div class="skeleton-line"></div>
  </div>
</div>

.skeleton {
  padding: 15px;
  background: #fff;
}
.skeleton-header, .skeleton-line {
  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
}
.skeleton-header {
  height: 30px;
  margin-bottom: 15px;
  border-radius: 4px;
}
.skeleton-line {
  height: 15px;
  margin-bottom: 10px;
  border-radius: 2px;
}
@keyframes shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

<style>
  /* 關鍵CSS內(nèi)聯(lián) */
  .header { /* 樣式 */ }
  .hero { /* 樣式 */ }
  /* 其他首屏關鍵樣式 */
</style>
<link rel="stylesheet" href="non-critical.css" rel="external nofollow"  media="print" onload="this.media='all'">

// 監(jiān)控FCP
new PerformanceObserver((entryList) => {
  for (const entry of entryList.getEntries()) {
    console.log(`FCP: ${entry.startTime}`);
    // 上報數(shù)據(jù)
  }
}).observe({type: 'paint', buffered: true});

// 監(jiān)控LCP
new PerformanceObserver((entryList) => {
  const entries = entryList.getEntries();
  const lastEntry = entries[entries.length - 1];
  console.log(`LCP: ${lastEntry.startTime}`);
  // 上報數(shù)據(jù)
}).observe({type: 'largest-contentful-paint', buffered: true});

// 監(jiān)控CLS
let clsValue = 0;
new PerformanceObserver((entryList) => {
  for (const entry of entryList.getEntries()) {
    if (!entry.hadRecentInput) {
      clsValue += entry.value;
      console.log(`CLS: ${clsValue}`);
      // 上報數(shù)據(jù)
    }
  }
}).observe({type: 'layout-shift', buffered: true});