CSS 성능 최적화 - 렌더링 차단에서 비동기 로딩까지

// 동적 CSS 로딩 유틸리티
function loadCSS(href, media = 'all') {
  return new Promise((resolve, reject) => {
    const link = document.createElement('link');
    link.rel = 'stylesheet';
    link.href = href;
    link.media = media;
    
    link.onload = () => resolve(link);
    link.onerror = () => reject(new Error(`CSS 로딩 실패: ${href}`));
    
    document.head.appendChild(link);
  });
}

// 사용 예시
// 1. 테마 변경
function changeTheme(themeName) {
  const existingTheme = document.querySelector('link[data-theme]');
  if (existingTheme) existingTheme.remove();
  
  const themeLink = loadCSS(`/css/themes/${themeName}.css`);
  themeLink.setAttribute('data-theme', themeName);
}

// 성능 측정 코드
function measureCSSLoadingPerformance() {
  const observer = new PerformanceObserver((list) => {
    list.getEntries().forEach((entry) => {
      if (entry.name.includes('.css')) {
        console.log(`CSS 로딩 시간: ${entry.name}`, {
          duration: `${entry.duration.toFixed(2)}ms`,
          startTime: `${entry.startTime.toFixed(2)}ms`,
          transferSize: `${entry.transferSize} bytes`
        });
      }
    });
  });
  
  observer.observe({ entryTypes: ['resource'] });
  
  // First Contentful Paint 측정
  new PerformanceObserver((list) => {
    const fcp = list.getEntries()[0];
    console.log(`First Contentful Paint: ${fcp.startTime.toFixed(2)}ms`);
  }).observe({ entryTypes: ['paint'] });
}

// 페이지 로드 시 측정 시작
window.addEventListener('load', measureCSSLoadingPerformance);

// preload 지원 여부 확인
function supportsPreload() {
  const link = document.createElement('link');
  return link.relList && link.relList.supports && link.relList.supports('preload');
}

// 폴백 구현
function loadCSSWithFallback(href) {
  if (supportsPreload()) {
    // preload 지원 브라우저
    const link = document.createElement('link');
    link.rel = 'preload';
    link.as = 'style';
    link.href = href;
    link.onload = function() {
      this.onload = null;
      this.rel = 'stylesheet';
    };
    document.head.appendChild(link);
  } else {
    // 구형 브라우저 폴백
    const link = document.createElement('link');
    link.rel = 'stylesheet';
    link.href = href;
    document.head.appendChild(link);
  }
}

// CSS 파일 우선순위 정의
const cssFiles = [
  { href: '/css/critical.css', priority: 'high' },
  { href: '/css/layout.css', priority: 'medium' },
  { href: '/css/components.css', priority: 'medium' },
  { href: '/css/animations.css', priority: 'low' }
];

// 우선순위별 순차 로딩
async function loadCSSByPriority() {
  const priorities = ['high', 'medium', 'low'];
  
  for (const priority of priorities) {
    const files = cssFiles.filter(file => file.priority === priority);
    
    // 같은 우선순위는 병렬 로딩
    await Promise.all(files.map(file => loadCSSAsync(file.href)));
    
    // 다음 우선순위 로딩 전 잠시 대기 (렌더링 최적화)
    await new Promise(resolve => setTimeout(resolve, 50));
  }
}

function loadCSSAsync(href) {
  return new Promise((resolve, reject) => {
    const link = document.createElement('link');
    link.rel = 'preload';
    link.as = 'style';
    link.href = href;
    
    link.onload = function() {
      this.onload = null;
      this.rel = 'stylesheet';
      resolve();
    };
    
    link.onerror = reject;
    document.head.appendChild(link);
  });
}

// service-worker.js
self.addEventListener('fetch', (event) => {
  if (event.request.destination === 'style') {
    event.respondWith(
      caches.match(event.request).then((response) => {
        if (response) {
          // 캐시된 CSS 반환
          return response;
        }
        
        // 네트워크에서 가져와서 캐시
        return fetch(event.request).then((response) => {
          const responseClone = response.clone();
          caches.open('css-cache-v1').then((cache) => {
            cache.put(event.request, responseClone);
          });
          return response;
        });
      })
    );
  }
});

// main.js - 서비스 워커와 연동된 CSS 로딩
function loadCSSWithSW(href) {
  if ('serviceWorker' in navigator) {
    // 서비스 워커가 있으면 캐시 활용
    const link = document.createElement('link');
    link.rel = 'preload';
    link.as = 'style';
    link.href = href;
    link.onload = function() {
      this.onload = null;
      this.rel = 'stylesheet';
    };
    document.head.appendChild(link);
  } else {
    // 폴백
    loadCSSWithFallback(href);
  }
}