// 典型的串行请求模式
async function loadUserData() {
    // 第一个请求
    const user = await fetch('/api/user').then(r => r.json());
    
    // 第二个请求依赖第一个请求的结果
    const profile = await fetch(`/api/users/${user.id}/profile`).then(r => r.json());
    
    // 第三个请求又依赖第二个请求的结果
    const preferences = await fetch(`/api/users/${user.id}/preferences?theme=${profile.theme}`).then(r => r.json());
    
    return { user, profile, preferences };
}

// 动态加载模块造成的瀑布
document.addEventListener('DOMContentLoaded', async () => {
    // 需要等待 DOM 加载完成才开始
    const { Chart } = await import('./chart.js');
    
    // 图表库加载完成后才加载数据
    const data = await fetch('/api/chart-data').then(r => r.json());
    
    // 根据数据类型动态加载不同的图表插件
    if (data.type === 'advanced') {
        await import('./chart-plugins.js');
    }
});

// 使用 Performance API 监控关键时间点
function measureCriticalResources() {
    // 监控关键资源加载时间
    const observer = new PerformanceObserver((list) => {
        for (const entry of list.getEntries()) {
            console.log(`${entry.name}: ${entry.loadEnd - entry.loadStart}ms`);
        }
    });
    
    observer.observe({ entryTypes: ['resource'] });
    
    // 监控页面关键时间点
    window.addEventListener('load', () => {
        const timing = performance.timing;
        console.log('关键时间点分析：');
        console.log(`DNS 解析: ${timing.domainLookupEnd - timing.domainLookupStart}ms`);
        console.log(`TCP 连接: ${timing.connectEnd - timing.connectStart}ms`);
        console.log(`请求响应: ${timing.responseEnd - timing.requestStart}ms`);
        console.log(`DOM 解析: ${timing.domContentLoadedEventStart - timing.responseEnd}ms`);
    });
}

// 并行发起多个独立请求
async function loadUserDataParallel() {
    // 同时发起多个请求
    const [userResponse, settingsResponse, notificationsResponse] = await Promise.all([
        fetch('/api/user'),
        fetch('/api/settings'),
        fetch('/api/notifications')
    ]);
    
    // 并行解析响应
    const [user, settings, notifications] = await Promise.all([
        userResponse.json(),
        settingsResponse.json(),
        notificationsResponse.json()
    ]);
    
    return { user, settings, notifications };
}

// 使用 Promise.allSettled 处理部分失败的情况
async function loadDataWithFallback() {
    const results = await Promise.allSettled([
        fetch('/api/critical-data'),
        fetch('/api/optional-data'),
        fetch('/api/enhancement-data')
    ]);
    
    const criticalData = results[0].status === 'fulfilled' ? results[0].value : null;
    const optionalData = results[1].status === 'fulfilled' ? results[1].value : null;
    const enhancementData = results[2].status === 'fulfilled' ? results[2].value : null;
    
    return { criticalData, optionalData, enhancementData };
}

// 根据连接速度动态调整加载策略
function adaptiveLoading() {
    const connection = navigator.connection || navigator.mozConnection || navigator.webkitConnection;
    
    if (connection) {
        const { effectiveType, downlink } = connection;
        
        // 根据网络状况调整策略
        if (effectiveType === 'slow-2g' || effectiveType === '2g') {
            // 弱网环境：只加载关键资源
            loadCriticalResourcesOnly();
        } else if (effectiveType === '3g') {
            // 中速网络：渐进加载
            loadProgressively();
        } else {
            // 快速网络：正常加载
            loadAllResources();
        }
    }
}

// 关键资源优先加载
function loadCriticalResourcesOnly() {
    return Promise.all([
        loadCSS('/styles/critical.css'),
        loadJS('/js/critical.js'),
        preloadImage('/images/hero-small.jpg')
    ]);
}

// 渐进式加载
async function loadProgressively() {
    // 第一批：关键资源
    await loadCriticalResourcesOnly();
    
    // 第二批：重要但非关键资源
    setTimeout(() => {
        Promise.all([
            loadCSS('/styles/components.css'),
            loadJS('/js/interactions.js')
        ]);
    }, 100);
    
    // 第三批：增强功能
    setTimeout(() => {
        Promise.all([
            loadJS('/js/analytics.js'),
            loadJS('/js/third-party.js')
        ]);
    }, 500);
}

// 服务端配置示例（Node.js）
const http2 = require('http2');

const server = http2.createSecureServer({
    // SSL 配置
});

server.on('stream', (stream, headers) => {
    if (headers[':path'] === '/') {
        // 推送关键资源
        stream.pushStream({ ':path': '/styles/critical.css' }, (err, pushStream) => {
            if (!err) {
                pushStream.respondWithFile('/path/to/critical.css');
            }
        });
        
        stream.pushStream({ ':path': '/js/critical.js' }, (err, pushStream) => {
            if (!err) {
                pushStream.respondWithFile('/path/to/critical.js');
            }
        });
        
        // 响应主页面
        stream.respondWithFile('/path/to/index.html');
    }
});

// Service Worker 实现智能缓存
self.addEventListener('install', (event) => {
    event.waitUntil(
        caches.open('v1').then((cache) => {
            // 预缓存关键资源
            return cache.addAll([
                '/',
                '/styles/critical.css',
                '/js/app.js',
                '/images/logo.svg'
            ]);
        })
    );
});

self.addEventListener('fetch', (event) => {
    event.respondWith(
        caches.match(event.request).then((response) => {
            if (response) {
                // 缓存命中，同时发起网络请求更新缓存
                fetch(event.request).then((fetchResponse) => {
                    const responseClone = fetchResponse.clone();
                    caches.open('v1').then((cache) => {
                        cache.put(event.request, responseClone);
                    });
                });
                return response;
            }
            
            // 缓存未命中，发起网络请求
            return fetch(event.request);
        })
    );
});

// 在不同环境中的全局对象：

// 🌐 浏览器主线程
console.log(window);        // Window 对象
console.log(this === window); // true

// 👷 Web Worker 线程  
console.log(self);          // DedicatedWorkerGlobalScope
console.log(this === self); // true

// ⚙️ Service Worker 线程
console.log(self);          // ServiceWorkerGlobalScope
console.log(this === self); // true
console.log(typeof window); // "undefined" - 没有 window 对象！
console.log(typeof document); // "undefined" - 没有 document 对象！

// 🌐 主线程中（页面脚本）
if ('caches' in window) {
    console.log('Cache API 可用');
    caches.open('my-cache').then(cache => {
        // 可以使用
    });
}

// ⚙️ Service Worker 中
// caches 自动可用，无需检查
console.log(caches);              // CacheStorage 对象
console.log(self.caches);         // 同样的 CacheStorage 对象
console.log(caches === self.caches); // true

// service-worker.js

// 🔍 查看 Service Worker 环境
console.log('Service Worker 环境信息:');
console.log('全局对象:', self);
console.log('缓存 API:', caches);
console.log('注册信息:', self.registration);

// 📦 安装事件
self.addEventListener('install', (event) => {
    console.log('Service Worker 安装中...');
    
    // event.waitUntil 告诉浏览器："等这个 Promise 完成再继续"
    event.waitUntil(
        // caches 是浏览器提供的全局 API
        caches.open('v1').then((cache) => {
            console.log('缓存已打开');
            
            // 预缓存关键资源
            return cache.addAll([
                '/',
                '/styles/critical.css',
                '/js/app.js',
                '/images/logo.svg'
            ]);
        }).then(() => {
            console.log('资源预缓存完成');
        }).catch(error => {
            console.error('预缓存失败:', error);
        })
    );
});

// 🔄 激活事件
self.addEventListener('activate', (event) => {
    console.log('Service Worker 激活中...');
    
    event.waitUntil(
        // 清理旧缓存
        caches.keys().then(cacheNames => {
            return Promise.all(
                cacheNames.map(cacheName => {
                    if (cacheName !== 'v1') {
                        console.log('删除旧缓存:', cacheName);
                        return caches.delete(cacheName);
                    }
                })
            );
        })
    );
});

// 🌐 拦截网络请求
self.addEventListener('fetch', (event) => {
    // 拦截所有网络请求
    event.respondWith(
        caches.match(event.request).then(response => {
            if (response) {
                console.log('从缓存获取:', event.request.url);
                return response;
            }
            
            console.log('网络请求:', event.request.url);
            return fetch(event.request);
        })
    );
});

// main.js (页面脚本)

if ('serviceWorker' in navigator) {
    window.addEventListener('load', () => {
        navigator.serviceWorker.register('/service-worker.js')
            .then(registration => {
                console.log('SW 注册成功:', registration);
                
                // 主线程也可以使用 caches API
                if ('caches' in window) {
                    caches.keys().then(cacheNames => {
                        console.log('当前缓存:', cacheNames);
                    });
                }
            })
            .catch(error => {
                console.log('SW 注册失败:', error);
            });
    });
}

// 在 Service Worker 中使用 caches

// 1. 打开/创建缓存
caches.open('my-cache-v1').then(cache => {
    console.log('缓存已打开');
});

// 2. 添加资源到缓存
caches.open('my-cache-v1').then(cache => {
    // 方式1：批量添加
    return cache.addAll([
        '/index.html',
        '/style.css',
        '/script.js'
    ]);
    
    // 方式2：单个添加
    // return cache.add('/index.html');
    
    // 方式3：手动 fetch 并缓存
    // return fetch('/api/data').then(response => {
    //     return cache.put('/api/data', response);
    // });
});

// 3. 从缓存获取资源
caches.match('/index.html').then(response => {
    if (response) {
        console.log('从缓存获取成功');
        return response;
    } else {
        console.log('缓存中没有该资源');
        return fetch('/index.html');
    }
});

// 4. 列出所有缓存
caches.keys().then(cacheNames => {
    console.log('所有缓存名称:', cacheNames);
    // ['my-cache-v1', 'my-cache-v2', ...]
});

// 5. 删除缓存
caches.delete('old-cache').then(success => {
    console.log('缓存删除', success ? '成功' : '失败');
});

// 检查 Service Worker 和 Cache API 支持
function checkSupport() {
    // 检查 Service Worker 支持
    if (!('serviceWorker' in navigator)) {
        console.warn('当前浏览器不支持 Service Worker');
        return false;
    }
    
    // 检查 Cache API 支持
    if (!('caches' in window)) {
        console.warn('当前浏览器不支持 Cache API');
        return false;
    }
    
    return true;
}

// Service Worker 中的错误处理
self.addEventListener('install', (event) => {
    event.waitUntil(
        caches.open('v1')
            .then(cache => {
                return cache.addAll([
                    '/',
                    '/styles/critical.css',
                    '/js/app.js',
                    '/images/logo.svg'
                ]);
            })
            .catch(error => {
                console.error('缓存资源失败:', error);
                // 可以缓存一个离线页面作为后备
                return caches.open('v1').then(cache => {
                    return cache.add('/offline.html');
                });
            })
    );
});

// 智能图片懒加载
class SmartImageLoader {
    constructor() {
        this.observer = null;
        this.init();
    }
    
    init() {
        if ('IntersectionObserver' in window) {
            this.observer = new IntersectionObserver((entries) => {
                entries.forEach((entry) => {
                    // 图片进入视野
                    if (entry.isIntersecting) {
                        this.loadImage(entry.target);
                        this.observer.unobserve(entry.target);
                    }
                });
            }, {
                rootMargin: '50px' // 提前50px开始加载
            });
            
            // 找到所有需要懒加载的图片，开始观察
            document.querySelectorAll('.lazy-load').forEach((img) => {
                this.observer.observe(img);
            });
        }
    }
    
    loadImage(img) {
        // 创建新的图片对象预加载
        const imageLoader = new Image();
        imageLoader.onload = () => {
            img.src = img.dataset.src; // 替换为真实图片地址
            img.classList.add('loaded'); // 添加loaded加载完成样式
        };
        imageLoader.src = img.dataset.src; // 开始加载图片
    }
}

new SmartImageLoader();

// 优化前：串行加载
async function loadRoute(route) {
    const component = await import(`./components/${route}.js`);
    const data = await fetch(`/api/${route}`).then(r => r.json());
    const styles = await loadCSS(`/styles/${route}.css`);
    
    return { component, data, styles };
}

// 优化后：并行加载 + 预加载
class RouteLoader {
    constructor() {
        this.cache = new Map();
        this.preloadOnHover();
    }
    
    async loadRoute(route) {
        // 检查缓存
        if (this.cache.has(route)) {
            return this.cache.get(route);
        }
        
        // 并行加载所有资源
        const [component, data, styles] = await Promise.all([
            import(`./components/${route}.js`),
            fetch(`/api/${route}`).then(r => r.json()),
            this.loadCSS(`/styles/${route}.css`)
        ]);
        
        const result = { component, data, styles };
        this.cache.set(route, result);
        return result;
    }
    
    // 在链接悬停时预加载
    preloadOnHover() {
        document.addEventListener('mouseover', (e) => {
            const link = e.target.closest('[data-route]');
            if (link) {
                const route = link.dataset.route;
                this.preloadRoute(route);
            }
        });
    }
    
    preloadRoute(route) {
        if (!this.cache.has(route)) {
            this.loadRoute(route);
        }
    }
    
    loadCSS(href) {
        return new Promise((resolve) => {
            const link = document.createElement('link');
            link.rel = 'stylesheet';
            link.href = href;
            link.onload = resolve;
            document.head.appendChild(link);
        });
    }
}

// 自定义性能监控
class PerformanceMonitor {
    constructor() {
        this.metrics = {};
        this.init();
    }
    
    init() {
        // 监控 CLS (Cumulative Layout Shift)
        this.observeCLS();
        
        // 监控 LCP (Largest Contentful Paint)
        this.observeLCP();
        
        // 监控 FID (First Input Delay)
        this.observeFID();
        
        // 监控资源加载时间
        this.observeResourceTiming();
    }
    
    observeCLS() {
        let clsValue = 0;
        new PerformanceObserver((entryList) => {
            for (const entry of entryList.getEntries()) {
                if (!entry.hadRecentInput) {
                    clsValue += entry.value;
                }
            }
            this.metrics.cls = clsValue;
        }).observe({ type: 'layout-shift', buffered: true });
    }
    
    observeLCP() {
        new PerformanceObserver((entryList) => {
            const entries = entryList.getEntries();
            const lastEntry = entries[entries.length - 1];
            this.metrics.lcp = lastEntry.startTime;
        }).observe({ type: 'largest-contentful-paint', buffered: true });
    }
    
    observeFID() {
        new PerformanceObserver((entryList) => {
            for (const entry of entryList.getEntries()) {
                this.metrics.fid = entry.processingStart - entry.startTime;
            }
        }).observe({ type: 'first-input', buffered: true });
    }
    
    observeResourceTiming() {
        new PerformanceObserver((entryList) => {
            for (const entry of entryList.getEntries()) {
                // 识别瀑布依赖关系
                if (entry.initiatorType === 'css' || entry.initiatorType === 'script') {
                    console.warn(`潜在瀑布依赖: ${entry.name}`);
                }
            }
        }).observe({ type: 'resource', buffered: true });
    }
    
    // 发送监控数据
    sendMetrics() {
        navigator.sendBeacon('/api/performance', JSON.stringify(this.metrics));
    }
}

// 页面卸载时发送数据
window.addEventListener('beforeunload', () => {
    monitor.sendMetrics();
});

// 性能优化 A/B 测试
class PerformanceABTest {
    constructor() {
        this.variant = this.getVariant();
        this.applyOptimization();
    }
    
    getVariant() {
        // 50/50 分组
        return Math.random() < 0.5 ? 'control' : 'optimized';
    }
    
    applyOptimization() {
        if (this.variant === 'optimized') {
            // 应用优化策略
            this.enableResourcePreloading();
            this.enableParallelRequests();
            this.optimizeImageLoading();
        }
    }
    
    enableResourcePreloading() {
        // 预加载关键资源
        const preloadLinks = [
            { href: '/styles/critical.css', as: 'style' },
            { href: '/js/app.js', as: 'script' },
            { href: '/fonts/main.woff2', as: 'font' }
        ];
        
        preloadLinks.forEach(({ href, as }) => {
            const link = document.createElement('link');
            link.rel = 'preload';
            link.href = href;
            link.as = as;
            if (as === 'font') link.crossOrigin = 'anonymous';
            document.head.appendChild(link);
        });
    }
    
    trackPerformance() {
        window.addEventListener('load', () => {
            const loadTime = performance.timing.loadEventEnd - performance.timing.navigationStart;
            
            // 发送 A/B 测试数据
            fetch('/api/ab-test', {
                method: 'POST',
                body: JSON.stringify({
                    variant: this.variant,
                    loadTime: loadTime,
                    userAgent: navigator.userAgent
                })
            });
        });
    }
}