# 日本一広告の多いサイトへの挑戦 (Challenge: The Most Ad-Heavy Site in Japan)

> 目標1,000,000個！仮想スクロール（Virtual Scrolling）技術によって大量の広告要素をブラウザクラッシュなしで超高速描画するフロントエンド技術実験・エンタメWebサイト。

## 概要 (Overview)
- **URL**: https://ad-japan-first.pages.dev/
- **プロジェクト名**: 日本一広告の多いサイトへの挑戦 (Challenge: The Most Ad-Heavy Site in Japan)
- **公開日**: 2026-05-01
- **最終更新日**: 2026-09-24
- **運営主体**: 日本一広告の多いサイトへの挑戦 プロジェクト開発室
- **公式SNS**:
  - X (Twitter): https://x.com/ad_japan_first
  - GitHub: https://github.com/ad-japan-first
- **カテゴリ**: Web技術デモ, フロントエンド実験, パフォーマンス最適化
- **技術スタック**: HTML5, Vanilla JavaScript, Virtual Scrolling, DOM Recycling (Object Pool), GPU CSS Transform Acceleration, Tailwind CSS
- **目的**: 限界まで要素（広告・iframe）を詰め込んだ際にブラウザがどう挙動するかを検証し、極限まで軽量化するスクロール最適化技術の実践デモ。

## 技術アーキテクチャ (Technical Architecture)
1. **仮想スクロール (Virtual Scrolling / Windowing)**:
   - 全体で1,000,000個分の高さを1px幅のダミー要素（#virtual-height）で確保。
   - 画面内に同時に見える行数＋余白分（数十個程度）のみのDOMノード（iframe）を事前に生成しプール化。
2. **オブジェクトプール・DOMリサイクル (DOM Recycling)**:
   - スクロール位置に応じて、画面外に出たDOMを画面内の新しい位置へ再配置。
   - 不要なDOMの破棄・新規生成を行わないため、ガベージコレクション（GC）の発生を最小限に抑制。
3. **GPUアクセラレーション**:
   - 要素の位置更新には `top` / `left` ではなく `transform: translate(x, y)` を使用。
   - `will-change: transform` を指定し、ブラウザの合成レイヤー（Compositor Thread）を活用して60 FPSの滑らかなスクロールを維持。
4. **非同期バッチ読み込み**:
   - iframe内の広告スクリプト読み込みを時間差（ディレイ処理）で分散ロードし、初期読み込み時のメインスレッドのブロックを防止。

## スペック・ベンチマーク (Specifications)
- **目標広告数**: 1,000,000 個
- **実DOM生成数**: 画面表示に必要な最小限（数十個程度）
- **フレームレート**: 60 FPS (目標)
- **対応言語**: 日本語 (Japanese), 英語 (English)

## よくある質問 (FAQ)
- **Q: 100万個も広告があって端末が重くなりませんか？**
  - **A**: 重くなりません。画面内に表示されているごく一部のDOM要素だけを再利用して描画するため、メモリ消費量は通常の一般的なWebページと同等です。
- **Q: なぜこれを作ったのですか？**
  - **A**: 大量のDOMやiframeを配置した際のブラウザのレンダリング挙動を限界まで検証し、仮想スクロール技術の有用性を実証するための個人開発プロジェクトです。

## 関連ドキュメント・リンク (Documentation & Legal)
- **フルスペック仕様書**: https://ad-japan-first.pages.dev/llms-full.txt
- **運営者情報 (About)**: https://ad-japan-first.pages.dev/about.html
- **プライバシーポリシー**: https://ad-japan-first.pages.dev/privacy.html
- **利用規約**: https://ad-japan-first.pages.dev/terms.html
- **お問い合わせ窓口**: https://ad-japan-first.pages.dev/contact.html