// ラスタースレッドの動作を概念的に示すコード（実際のブラウザ内部の擬似コード）
// ※ これは教育目的の疑似実装であり、実際のブラウザ実装とは異なる
 
class RasterThread {
  constructor(id, gpuContext) {
    this.id = id;
    this.gpuContext = gpuContext;
    this.taskQueue = [];
  }
 
  processTile(tile) {
    // タイル内の Paint Records を取得
    const records = tile.getPaintRecords();
 
    // GPU ラスタライズの場合: GPU コンテキストを使用
    if (this.gpuContext) {
      const texture = this.gpuContext.createTexture(
        tile.width,
        tile.height
      );
      for (const record of records) {
        this.gpuContext.drawToTexture(texture, record);
      }
      return texture;
    }
 
    // ソフトウェアラスタライズの場合: CPU でビットマップ生成
    const bitmap = new Bitmap(tile.width, tile.height);
    for (const record of records) {
      bitmap.draw(record);
    }
    return bitmap;
  }
}
 
// Chromium の場合、通常 4 つのラスタースレッドが並行動作
// モバイルデバイスでは 2 つに制限されることが多い

/* Repaint をトリガーするプロパティの例 */
.element {
  /* 色関連 */
  color: red;              /* テキスト色の変更 */
  background-color: blue;  /* 背景色の変更 */
  border-color: green;     /* ボーダー色の変更 */
 
  /* 視覚効果 */
  box-shadow: 0 2px 8px rgba(0,0,0,0.2); /* 影の変更 */
  text-decoration: underline;             /* テキスト装飾の変更 */
  outline: 2px solid red;                 /* アウトラインの変更 */
  background-image: url("new.jpg");       /* 背景画像の変更 */
 
  /* visibility の変更（display:none とは異なりレイアウトに影響しない） */
  visibility: hidden;
}

// Draw Quad の概念的な構造（教育目的の疑似コード）
const drawQuad = {
  type: "TileDrawQuad",
  // タイルのテクスチャ（GPU メモリ上のビットマップ）
  texture: gpuTextureHandle,
  // 描画先の矩形（画面座標系）
  destRect: { x: 0, y: 0, width: 256, height: 256 },
  // テクスチャ内の参照範囲（UV 座標）
  texCoordRect: { u0: 0.0, v0: 0.0, u1: 1.0, v1: 1.0 },
  // 変換行列（transform の適用）
  transformMatrix: [
    1, 0, 0, 0,
    0, 1, 0, 0,
    0, 0, 1, 0,
    100, 50, 0, 1  // translateX(100px) translateY(50px)
  ],
  // 透明度
  opacity: 0.9,
  // ブレンドモード
  blendMode: "normal"
};

/* 方法 1: will-change プロパティ（推奨） */
.promoted-element {
  will-change: transform;
}
 
/* 方法 2: 3D transform（レガシーハック） */
.promoted-element-legacy {
  transform: translateZ(0);
  /* または */
  transform: translate3d(0, 0, 0);
}
 
/* 方法 3: CSS アニメーション中の要素（自動） */
.animated-element {
  animation: slideIn 0.3s ease-out;
}
 
@keyframes slideIn {
  from { transform: translateX(-100%); }
  to   { transform: translateX(0); }
}
 
/* 方法 4: position: fixed（多くのブラウザで自動昇格） */
.fixed-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
}
 
/* 方法 5: 特定の HTML 要素（自動昇格） */
/* <video>, <canvas>, <iframe> は自動的にレイヤー昇格される */

<!-- アンチパターン: レイヤー爆発を引き起こすコード -->
<style>
  .base {
    position: relative;
    z-index: 1;
    /* この要素が昇格すると、上に重なる全要素が暗黙的に昇格 */
    will-change: transform;
  }
 
  .item {
    position: relative;
    z-index: 2; /* base より上 → 暗黙的昇格の対象 */
    width: 200px;
    height: 100px;
    margin: 4px;
  }
</style>
 
<!-- 1000 個の .item が全て暗黙的に昇格 -->
<!-- 各 200x100x4 = 80KB → 合計約 80MB の GPU メモリ消費 -->
<div class="base">Base Element</div>
<div class="item">Item 1</div>
<div class="item">Item 2</div>
<!-- ... 998 個続く ... -->
<div class="item">Item 1000</div>

/* 修正: z-index を適切に設定してレイヤー爆発を防ぐ */
.base {
  position: relative;
  z-index: 2;         /* item より上に設定 */
  will-change: transform;
}
 
.item {
  position: relative;
  z-index: 1;         /* base より下 → 暗黙的昇格は発生しない */
  width: 200px;
  height: 100px;
  margin: 4px;
}

/* Compositor-Only プロパティ（高パフォーマンスアニメーション向け） */
 
/* 1. transform - あらゆる変換 */
.move    { transform: translateX(100px); }
.rotate  { transform: rotate(45deg); }
.scale   { transform: scale(1.5); }
.skew    { transform: skewX(10deg); }
.matrix  { transform: matrix(1, 0, 0, 1, 100, 50); }
.combine { transform: translate(100px, 50px) rotate(45deg) scale(1.2); }
 
/* 2. opacity - 透明度 */
.fade    { opacity: 0.5; }
 
/* 3. filter - 一部のフィルター（GPU 対応ブラウザ） */
.blur    { filter: blur(4px); }
 
/* 4. backdrop-filter - 背景フィルター（GPU 対応ブラウザ） */
.glass   { backdrop-filter: blur(10px); }

// パフォーマンスの違いを示す比較コード
 
// --- 悪い例: left/top アニメーション（Layout + Paint + Composite） ---
function animateBad(element) {
  let position = 0;
  function frame() {
    position += 2;
    element.style.left = position + "px"; // Layout をトリガー
    if (position < 300) {
      requestAnimationFrame(frame);
    }
  }
  requestAnimationFrame(frame);
}
 
// --- 良い例: transform アニメーション（Composite のみ） ---
function animateGood(element) {
  let position = 0;
  function frame() {
    position += 2;
    element.style.transform = `translateX(${position}px)`; // Composite のみ
    if (position < 300) {
      requestAnimationFrame(frame);
    }
  }
  requestAnimationFrame(frame);
}
 
// --- 最良の例: CSS Animation / Web Animations API ---
function animateBest(element) {
  element.animate(
    [
      { transform: "translateX(0)" },
      { transform: "translateX(300px)" }
    ],
    {
      duration: 500,
      easing: "ease-out",
      fill: "forwards"
    }
  );
  // Web Animations API はブラウザが最適化しやすい
  // Compositor Thread で完全にオフメインスレッド実行される
}

// Chrome DevTools Console で確認する方法
 
// 1. GPU 情報の確認
// chrome://gpu にアクセスして以下を確認:
// - Canvas: Hardware accelerated
// - Compositing: Hardware accelerated
// - Rasterization: Hardware accelerated
// - Video Decode: Hardware accelerated
 
// 2. 要素のレイヤー情報を確認（DevTools Layers パネル）
// DevTools > More tools > Layers
// → 各レイヤーの昇格理由、メモリサイズ、描画回数を確認
 
// 3. Performance パネルでフレーム分析
// DevTools > Performance > Record
// → 各フレームの Composite 時間を確認
// → 16.67ms（60fps）以内に収まっているか確認

/* will-change の基本構文 */
.element {
  will-change: auto;          /* デフォルト値。ヒントなし */
  will-change: transform;     /* transform の変更を予告 */
  will-change: opacity;       /* opacity の変更を予告 */
  will-change: transform, opacity; /* 複数プロパティの予告 */
  will-change: scroll-position;    /* スクロール位置の変更を予告 */
  will-change: contents;      /* 要素コンテンツの変更を予告 */
}

// パターン 1: イベント駆動での動的設定・解除（推奨）
// ホバー時のアニメーション準備
const card = document.querySelector(".card");
 
card.addEventListener("mouseenter", () => {
  // マウスが乗った瞬間に昇格を準備
  card.style.willChange = "transform, box-shadow";
});
 
card.addEventListener("mouseleave", () => {
  // マウスが離れた時点ではまだ解除しない
  // （トランジション完了後に解除）
});
 
card.addEventListener("transitionend", () => {
  // トランジション完了後に解除
  card.style.willChange = "auto";
});

// パターン 2: スクロール連動アニメーションの場合
const observer = new IntersectionObserver(
  (entries) => {
    entries.forEach((entry) => {
      if (entry.isIntersecting) {
        // ビューポートに入る直前に昇格を準備
        entry.target.style.willChange = "transform, opacity";
      } else {
        // ビューポートから出た後に解除
        entry.target.style.willChange = "auto";
      }
    });
  },
  {
    // ビューポートの上下 200px 手前から検知
    rootMargin: "200px 0px"
  }
);
 
document.querySelectorAll(".animate-on-scroll").forEach((el) => {
  observer.observe(el);
});

/* パターン 3: 常時アニメーションする要素（CSS のみ） */
/* ローディングスピナーなど、常にアニメーションしている要素に限定 */
.spinner {
  will-change: transform;
  animation: spin 1s linear infinite;
}
 
@keyframes spin {
  to { transform: rotate(360deg); }
}
 
/* パターン 4: ページ内ナビゲーション（親要素でのヒント） */
/* 子要素がホバー時にアニメーションする場合、親のホバーで準備 */
.card-grid:hover .card {
  will-change: transform;
}

/* ===== アンチパターン 1: 全要素への適用 ===== */
/* GPU メモリを大量消費し、逆にパフォーマンス低下を引き起こす */
* {
  will-change: transform;  /* 絶対にやってはいけない */
}
 
/* 何が起こるか:
   → 全要素が合成レイヤーに昇格
   → GPU メモリが枯渇（特にモバイルで致命的）
   → レイヤー合成のオーバーヘッドが増大
   → 結果的にパフォーマンスが悪化
*/
 
/* ===== アンチパターン 2: 不要な常時設定 ===== */
.button {
  will-change: transform, opacity, color, background-color, box-shadow;
  /* 問題: 使わないかもしれないプロパティまで列挙
     → 無駄なリソース消費 */
}
 
/* 修正 */
.button {
  transition: transform 0.2s, opacity 0.2s;
  /* will-change は JavaScript で動的に設定・解除 */
}
 
/* ===== アンチパターン 3: CSS 内での安易な使用 ===== */
.modal {
  will-change: transform;
  /* モーダルは開閉時のみアニメーション
     → 常時設定は無駄なリソース消費 */
}
 
/* 修正: モーダルが開く直前に動的設定 */
.modal.is-opening {
  will-change: transform, opacity;
}

/* contain の値と効果 */
 
/* layout: レイアウト計算を要素内に封じ込め */
.widget {
  contain: layout;
  /* 効果:
     → この要素内部のレイアウト変更が親や兄弟要素に伝播しない
     → フロートやクリアの影響が外部に漏れない
     → ブラウザは要素外のレイアウト再計算をスキップできる */
}
 
/* paint: 描画を要素の境界内に封じ込め */
.sidebar {
  contain: paint;
  /* 効果:
     → この要素の子孫は要素境界の外側に描画されない
     → overflow: hidden と似た効果だが、ブラウザ最適化のヒントとして機能
     → 要素がビューポート外の場合、子孫の Paint をスキップ可能 */
}
 
/* size: 要素のサイズを子コンテンツに依存させない */
.fixed-size-container {
  contain: size;
  width: 300px;
  height: 200px;
  /* 効果:
     → 子要素の変更がこの要素のサイズに影響しない
     → 注意: 明示的なサイズ指定が必須 */
}
 
/* style: カウンターやquotesのスコープを制限 */
.isolated {
  contain: style;
  /* 効果:
     → CSS カウンターの値が外部に漏れない
     → quotes の状態が外部に影響しない */
}
 
/* content: layout + paint の短縮形 */
.card {
  contain: content;
}
 
/* strict: size + layout + paint の短縮形（最も強力） */
.tile {
  contain: strict;
  width: 200px;
  height: 150px;
}

<!-- 実用例: カード型レイアウトでの contain 活用 -->
<style>
  .card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 16px;
    padding: 16px;
  }
 
  .card {
    contain: content;
    /* カード内部の変更が他のカードに影響しないことを保証
       → カード内のDOM変更時に、他のカードの再レイアウトをスキップ */
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    overflow: hidden;
  }
 
  .card__image {
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
  }
 
  .card__body {
    padding: 16px;
  }
 
  .card__title {
    font-size: 1.125rem;
    font-weight: 600;
    margin-bottom: 8px;
  }
 
  .card__description {
    font-size: 0.875rem;
    color: #666;
    line-height: 1.5;
  }
</style>
 
<div class="card-grid">
  <article class="card">
    <img class="card__image" src="photo1.jpg" alt="Card 1" />
    <div class="card__body">
      <h3 class="card__title">Card Title 1</h3>
      <p class="card__description">Description text...</p>
    </div>
  </article>
  <!-- 数十〜数百枚のカード -->
</div>

/* contain と will-change を組み合わせた最適化 */
.animated-widget {
  contain: layout paint;     /* レイアウト・描画の封じ込め */
  /* will-change は JavaScript で動的設定 */
}
 
/* Intersection Observer と組み合わせた最適化パターン */
.lazy-section {
  contain: content;
  content-visibility: auto;
  contain-intrinsic-size: 0 500px; /* 推定サイズを指定 */
}

/* content-visibility の3つの値 */
 
/* visible: デフォルト値。通常どおりレンダリング */
.normal {
  content-visibility: visible;
}
 
/* hidden: 要素のコンテンツを完全に非表示（display: none に近い）*/
/* ただし、要素自体のボックスは維持される */
.hidden-content {
  content-visibility: hidden;
  /* 用途: タブの非アクティブパネルなど
     → display: none と異なり、再表示時のレンダリングコストが低い
     → レンダリング状態がキャッシュされるため */
}
 
/* auto: ビューポート外の場合にレンダリングをスキップ */
.lazy-render {
  content-visibility: auto;
  contain-intrinsic-size: auto 300px;
  /* ビューポート外の要素:
     → Style, Layout, Paint をすべてスキップ
     → スクロールで近づくと自動でレンダリング開始
     → contain-intrinsic-size で推定サイズを指定し、スクロールバーの安定性を確保 */
}

<!-- 実装例: 長いドキュメントページ -->
<style>
  .doc-section {
    content-visibility: auto;
    contain-intrinsic-size: auto 500px;
    /* auto キーワードにより、一度レンダリングされた後は
       実際のサイズをブラウザが記憶する */
    padding: 2rem;
    border-bottom: 1px solid #e5e7eb;
  }
 
  /* content-visibility: hidden を活用したタブ切り替え */
  .tab-panel {
    content-visibility: hidden;
    /* レンダリング状態がキャッシュされるため
       タブ切り替え時の再レンダリングが高速 */
  }
 
  .tab-panel.is-active {
    content-visibility: visible;
  }
</style>
 
<article>
  <section class="doc-section">
    <h2>Section 1: Introduction</h2>
    <p>This section is visible in the viewport...</p>
  </section>
 
  <section class="doc-section">
    <h2>Section 2: Getting Started</h2>
    <p>This section may be below the fold...</p>
  </section>
 
  <!-- 多数のセクションが続く -->
</article>

// content-visibility と IntersectionObserver の連携
// より細かい制御が必要な場合
 
class LazyRenderController {
  constructor(selector, options = {}) {
    this.elements = document.querySelectorAll(selector);
    this.rendered = new WeakSet();
 
    this.observer = new IntersectionObserver(
      (entries) => this.handleIntersection(entries),
      {
        rootMargin: options.rootMargin || "200px 0px",
        threshold: options.threshold || 0
      }
    );
 
    this.init();
  }
 
  init() {
    this.elements.forEach((el) => {
      // 初期状態では content-visibility: auto を使用
      el.style.contentVisibility = "auto";
      el.style.containIntrinsicSize = "auto 300px";
      this.observer.observe(el);
    });
  }
 
  handleIntersection(entries) {
    entries.forEach((entry) => {
      if (entry.isIntersecting && !this.rendered.has(entry.target)) {
        // 一度表示された要素は通常レンダリングに切り替え
        this.rendered.add(entry.target);
        // 動的コンテンツのロードなどをトリガー
        this.loadContent(entry.target);
      }
    });
  }
 
  loadContent(element) {
    const lazyContent = element.dataset.lazySrc;
    if (lazyContent) {
      // 動的にコンテンツをロード
      fetch(lazyContent)
        .then((res) => res.text())
        .then((html) => {
          element.innerHTML = html;
        });
    }
  }
 
  destroy() {
    this.observer.disconnect();
  }
}
 
// 使用例
const controller = new LazyRenderController(".doc-section", {
  rootMargin: "300px 0px"
});

// Performance パネルの読み方（概念的な説明）
 
/*
  Performance Recording の構造:

フレーム分析の手順:
  1. 「Record」ボタンを押して操作を記録
  2. Frames セクションで各フレームの長さを確認
     → 16.67ms を超えるフレームを探す
  3. 長いフレームを選択して Main セクションを確認
     → 何が時間を消費しているか特定
  4. Paint や Composite Layers の時間を確認
 
  理想的なフレームの構成:
  16.67ms（60fps ターゲット）の内訳:

*/

// スクロール連動パララックスの最適化実装
class OptimizedParallax {
  constructor(container) {
    this.container = container;
    this.layers = container.querySelectorAll("[data-parallax-speed]");
    this.ticking = false;
 
    this.init();
  }
 
  init() {
    // 各レイヤーに will-change を事前設定（常にスクロール連動するため）
    this.layers.forEach((layer) => {
      layer.style.willChange = "transform";
    });
 
    // passive: true でスクロールイベントを登録
    // → Compositor Thread のスクロール処理をブロックしない
    window.addEventListener("scroll", () => this.onScroll(), {
      passive: true
    });
  }
 
  onScroll() {
    if (!this.ticking) {
      // requestAnimationFrame で次のフレームにバッチ処理
      requestAnimationFrame(() => {
        this.updatePositions();
        this.ticking = false;
      });
      this.ticking = true;
    }
  }
 
  updatePositions() {
    const scrollY = window.scrollY;
 
    this.layers.forEach((layer) => {
      const speed = parseFloat(layer.dataset.parallaxSpeed);
      // transform のみを使用（Compositor-Only）
      const offset = scrollY * speed;
      layer.style.transform = `translate3d(0, ${offset}px, 0)`;
    });
  }
 
  destroy() {
    // クリーンアップ: will-change を解除
    this.layers.forEach((layer) => {
      layer.style.willChange = "auto";
    });
  }
}
 
// 使用例
// <div class="parallax-container">
//   <div data-parallax-speed="0.5">Slow layer</div>
//   <div data-parallax-speed="0.8">Medium layer</div>
//   <div data-parallax-speed="1.2">Fast layer</div>
// </div>
const parallax = new OptimizedParallax(
  document.querySelector(".parallax-container")
);

// 仮想スクロールリストの合成レイヤー最適化
class VirtualizedList {
  constructor(container, options) {
    this.container = container;
    this.itemHeight = options.itemHeight;
    this.totalItems = options.totalItems;
    this.overscan = options.overscan || 5; // バッファ行数
    this.renderItem = options.renderItem;
 
    // スクロールコンテナの設定
    this.container.style.overflow = "auto";
    this.container.style.position = "relative";
    // contain でレイアウトの影響範囲を限定
    this.container.style.contain = "strict";
 
    // 全体の高さを持つスペーサー
    this.spacer = document.createElement("div");
    this.spacer.style.height = `${this.totalItems * this.itemHeight}px`;
    this.spacer.style.position = "relative";
    this.container.appendChild(this.spacer);
 
    // 表示中のアイテムを保持するコンテナ
    this.viewport = document.createElement("div");
    // transform で位置をオフセット（Compositor-Only）
    this.viewport.style.willChange = "transform";
    this.viewport.style.position = "absolute";
    this.viewport.style.top = "0";
    this.viewport.style.left = "0";
    this.viewport.style.right = "0";
    this.spacer.appendChild(this.viewport);
 
    this.container.addEventListener("scroll", () => this.onScroll(), {
      passive: true
    });
 
    this.render();
  }
 
  onScroll() {
    requestAnimationFrame(() => this.render());
  }
 
  render() {
    const scrollTop = this.container.scrollTop;
    const viewportHeight = this.container.clientHeight;
 
    const startIndex = Math.max(
      0,
      Math.floor(scrollTop / this.itemHeight) - this.overscan
    );
    const endIndex = Math.min(
      this.totalItems - 1,
      Math.ceil((scrollTop + viewportHeight) / this.itemHeight)
        + this.overscan
    );
 
    // transform でオフセット（Layout を回避）
    const offsetY = startIndex * this.itemHeight;
    this.viewport.style.transform = `translateY(${offsetY}px)`;
 
    // 必要なアイテムのみ DOM に存在させる
    this.viewport.innerHTML = "";
    for (let i = startIndex; i <= endIndex; i++) {
      const item = this.renderItem(i);
      item.style.height = `${this.itemHeight}px`;
      // 各アイテムには contain: content を適用
      item.style.contain = "content";
      this.viewport.appendChild(item);
    }
  }
}
 
// 使用例
const list = new VirtualizedList(
  document.querySelector("#list-container"),
  {
    itemHeight: 60,
    totalItems: 10000,
    renderItem: (index) => {
      const div = document.createElement("div");
      div.className = "list-item";
      div.textContent = `Item ${index + 1}`;
      return div;
    }
  }
);