<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>服务器全维度性能测试平台</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: "Microsoft Yahei", Arial, sans-serif;
            background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
            color: #2c3e50;
            min-height: 100vh;
            line-height: 1.8;
        }

        /* 头部导航栏 */
        header {
            background: #2c3e50;
            color: white;
            padding: 1rem 2rem;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
            position: sticky;
            top: 0;
            z-index: 100;
        }

        .header-container {
            max-width: 1400px;
            margin: 0 auto;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .logo {
            font-size: 1.5rem;
            font-weight: bold;
            display: flex;
            align-items: center;
            gap: 0.5rem;
        }

        .logo::before {
            content: "📈";
            font-size: 1.8rem;
        }

        .server-info {
            font-size: 0.9rem;
            opacity: 0.8;
            display: flex;
            gap: 1rem;
            align-items: center;
        }

        .php-badge {
            background: #777bb4;
            color: white;
            padding: 0.2rem 0.6rem;
            border-radius: 20px;
            font-size: 0.8rem;
        }

        /* 主容器 */
        .main-container {
            max-width: 1400px;
            margin: 2rem auto;
            padding: 0 2rem;
            display: grid;
            grid-template-columns: 1fr;
            gap: 2rem;
        }

        /* 欢迎区域 */
        .welcome-section {
            background: white;
            padding: 2rem;
            border-radius: 12px;
            box-shadow: 0 4px 15px rgba(0,0,0,0.05);
            text-align: center;
        }

        .welcome-section h1 {
            color: #3498db;
            margin-bottom: 1rem;
            font-size: 2rem;
        }

        .welcome-section p {
            color: #7f8c8d;
            max-width: 800px;
            margin: 0 auto;
        }

        /* 测试卡片 */
        .test-card {
            background: white;
            border-radius: 12px;
            box-shadow: 0 4px 15px rgba(0,0,0,0.05);
            overflow: hidden;
            transition: transform 0.3s, box-shadow 0.3s;
        }

        .test-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 8px 20px rgba(0,0,0,0.1);
        }

        .card-header {
            color: white;
            padding: 1rem 1.5rem;
            font-size: 1.2rem;
            font-weight: 600;
            display: flex;
            align-items: center;
            gap: 0.8rem;
        }

        .card-header.static {
            background: #3498db;
        }

        .card-header.php {
            background: #777bb4;
        }

        .card-body {
            padding: 1.5rem;
        }

        .btn {
            color: white;
            border: none;
            padding: 0.8rem 1.5rem;
            border-radius: 6px;
            cursor: pointer;
            font-size: 1rem;
            margin: 0.5rem 0.25rem;
            transition: background 0.3s;
            font-weight: 500;
        }

        .btn-static {
            background: #3498db;
        }

        .btn-static:hover {
            background: #2980b9;
        }

        .btn-php {
            background: #777bb4;
        }

        .btn-php:hover {
            background: #6a6fae;
        }

        .btn-outline {
            background: transparent;
            border: 2px solid;
        }

        .btn-outline.static {
            border-color: #3498db;
            color: #3498db;
        }

        .btn-outline.static:hover {
            background: #3498db;
            color: white;
        }

        .btn-outline.php {
            border-color: #777bb4;
            color: #777bb4;
        }

        .btn-outline.php:hover {
            background: #777bb4;
            color: white;
        }

        .result-box {
            margin-top: 1rem;
            padding: 1rem;
            background: #f8f9fa;
            border-radius: 8px;
            font-family: Consolas, monospace;
            font-size: 0.95rem;
            white-space: pre-wrap;
            max-height: 300px;
            overflow-y: auto;
            border: 1px solid #e9ecef;
        }

        .image-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
            gap: 1rem;
            margin-top: 1rem;
        }

        .image-grid img {
            width: 100%;
            height: 150px;
            object-fit: cover;
            border-radius: 6px;
            border: 1px solid #eee;
            transition: opacity 0.5s;
        }

        .large-text {
            margin-top: 1rem;
            padding: 1rem;
            border: 1px solid #eee;
            border-radius: 8px;
            max-height: 200px;
            overflow-y: auto;
            font-size: 0.9rem;
            background: #f8f9fa;
        }

        .badge {
            display: inline-block;
            padding: 0.2rem 0.6rem;
            background: #e74c3c;
            color: white;
            border-radius: 20px;
            font-size: 0.8rem;
            margin-left: 0.5rem;
            font-weight: normal;
        }

        /* 响应式适配 */
        @media (max-width: 768px) {
            .header-container {
                flex-direction: column;
                gap: 1rem;
                text-align: center;
            }

            .server-info {
                flex-direction: column;
                gap: 0.5rem;
            }

            .welcome-section h1 {
                font-size: 1.5rem;
            }
        }
    </style>
</head>
<body>
    <!-- 头部导航栏 -->
    <header>
        <div class="header-container">
            <div class="logo">服务器全维度性能测试平台</div>
            <div class="server-info">
                <div id="serverTime"></div>
                <div class="php-badge" id="phpStatus">检测PHP状态...</div>
            </div>
        </div>
    </header>

    <!-- 主内容区 -->
    <div class="main-container">
        <!-- 欢迎区域 -->
        <section class="welcome-section">
            <h1>服务器静态 + PHP 全维度性能测试中心</h1>
            <p>这是服务器的默认主页，集成了静态资源测试（页面加载、图片传输、DOM渲染）和 PHP 后端测试（环境信息、执行效率、Session、循环性能），一站式评估服务器整体性能。</p>
        </section>

        <!-- 1. 静态资源核心测试 -->
        <section class="test-card">
            <div class="card-header static">
                📊 静态资源核心测试
                <span class="badge">优先级最高</span>
            </div>
            <div class="card-body">
                <button class="btn btn-static" id="getStaticPerf">获取静态加载核心指标</button>
                <div class="result-box" id="staticPerfResult">点击上方按钮开始测试，将显示页面加载总耗时、DNS解析、TCP连接、TTFB等核心指标...</div>
            </div>
        </section>

        <!-- 2. 静态资源专项测试 -->
        <section class="test-card">
            <div class="card-header static">
                🖼️ 静态资源专项测试
                <span class="badge">带宽/渲染</span>
            </div>
            <div class="card-body">
                <button class="btn btn-static" id="loadImages">测试图片加载性能</button>
                <button class="btn btn-static" id="renderDom">渲染5000个DOM元素</button>
                <button class="btn btn-static" id="loadLargeText">加载50万字静态文本</button>
                <button class="btn btn-outline static" id="clearStaticResult">清空静态测试结果</button>
                <div class="image-grid" id="imageGrid" style="margin: 1rem 0;"></div>
                <div class="result-box" id="staticSpecialResult">点击上方按钮开始对应的静态资源专项测试...</div>
            </div>
        </section>

        <!-- 3. PHP后端核心测试 -->
        <section class="test-card">
            <div class="card-header php">
                🐘 PHP 后端核心测试
                <span class="badge">后端性能</span>
            </div>
            <div class="card-body">
                <button class="btn btn-php" id="testPhpInfo">获取PHP环境信息</button>
                <button class="btn btn-php" id="testPhpExecution">测试PHP执行效率</button>
                <button class="btn btn-php" id="testPhpSession">测试PHP Session</button>
                <button class="btn btn-php" id="testPhpLoop">测试PHP循环性能</button>
                <button class="btn btn-outline php" id="testPhpConcurrent">批量10次PHP请求</button>
                <div class="result-box" id="phpTestResult">点击上方按钮开始PHP后端性能测试...</div>
            </div>
        </section>
    </div>

    <script>
        // 页面加载完成初始化
        window.addEventListener('DOMContentLoaded', function() {
            // 更新服务器时间
            updateServerTime();
            setInterval(updateServerTime, 1000);
            
            // 初始化图片网格
            initImageGrid();
            
            // 检测PHP环境
            checkPhpStatus();
            
            console.log('✅ 服务器全维度测试主页加载完成');
        });

        // 更新服务器时间（客户端）
        function updateServerTime() {
            const now = new Date();
            const timeStr = now.toLocaleString('zh-CN', {
                year: 'numeric',
                month: '2-digit',
                day: '2-digit',
                hour: '2-digit',
                minute: '2-digit',
                second: '2-digit'
            });
            document.getElementById('serverTime').textContent = `当前时间: ${timeStr}`;
        }

        // 检测PHP环境是否可用
        async function checkPhpStatus() {
            const statusEl = document.getElementById('phpStatus');
            try {
                const response = await fetch('test-api.php?action=phpinfo', { timeout: 3000 });
                if (response.ok) {
                    statusEl.textContent = 'PHP环境: 已启用';
                    statusEl.style.background = '#27ae60';
                } else {
                    statusEl.textContent = 'PHP环境: 不可用';
                    statusEl.style.background = '#e74c3c';
                }
            } catch (error) {
                statusEl.textContent = 'PHP环境: 未检测到';
                statusEl.style.background = '#f39c12';
            }
        }

        // ===================== 静态资源测试 =====================
        // 1. 获取静态核心性能指标
        document.getElementById('getStaticPerf').addEventListener('click', function() {
            const perfData = performance.getEntriesByType('navigation')[0];
            if (!perfData) {
                document.getElementById('staticPerfResult').textContent = '⚠️ 无法获取性能数据，请刷新页面后重试';
                return;
            }

            const result = `
【服务器静态页面核心加载指标】
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
页面总加载时间: ${(perfData.loadEventEnd - perfData.navigationStart).toFixed(2)} ms
DNS解析耗时: ${(perfData.domainLookupEnd - perfData.domainLookupStart).toFixed(2)} ms
TCP连接耗时: ${(perfData.connectEnd - perfData.connectStart).toFixed(2)} ms
静态资源响应耗时: ${(perfData.responseEnd - perfData.responseStart).toFixed(2)} ms
DOM解析完成耗时: ${(perfData.domContentLoadedEventEnd - perfData.navigationStart).toFixed(2)} ms
首字节时间(TTFB): ${(perfData.responseStart - perfData.navigationStart).toFixed(2)} ms

【性能评级参考】
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
TTFB < 100ms: 🟢 优秀 (服务器响应极快)
TTFB 100-300ms: 🟡 良好 (响应正常)
TTFB > 300ms: 🔴 需优化 (检查服务器配置/网络)
            `;
            document.getElementById('staticPerfResult').textContent = result;
        });

        // 2. 初始化图片网格
        function initImageGrid() {
            const imageGrid = document.getElementById('imageGrid');
            imageGrid.innerHTML = '';
            
            const sizes = [
                {w: 200, h: 150, name: '小图(200x150)'},
                {w: 400, h: 300, name: '中图(400x300)'},
                {w: 800, h: 600, name: '大图(800x600)'}
            ];

            sizes.forEach((size, index) => {
                const imgContainer = document.createElement('div');
                const img = document.createElement('img');
                img.src = `https://picsum.photos/${size.w}/${size.h}?random=${index + 10}`;
                img.alt = size.name;
                img.title = size.name;
                
                const imgStartTime = performance.now();
                img.onload = function() {
                    const loadTime = (performance.now() - imgStartTime).toFixed(2);
                    img.dataset.loadTime = loadTime;
                };
                img.onerror = function() {
                    img.dataset.loadTime = '加载失败';
                    img.alt = size.name + ' (加载失败)';
                    img.style.opacity = '0.5';
                };

                imgContainer.appendChild(img);
                imageGrid.appendChild(imgContainer);
            });
        }

        // 3. 测试图片加载性能
        document.getElementById('loadImages').addEventListener('click', function() {
            const resultBox = document.getElementById('staticSpecialResult');
            resultBox.textContent = '🔄 正在加载测试图片...请稍候';
            
            setTimeout(() => {
                initImageGrid();
                
                setTimeout(() => {
                    const images = document.querySelectorAll('#imageGrid img');
                    let resultText = `【图片加载性能测试结果】
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
`;
                    let totalLoadTime = 0;
                    let successCount = 0;

                    images.forEach((img) => {
                        const loadTime = img.dataset.loadTime || '未加载';
                        resultText += `${img.alt}: ${loadTime} ms\n`;
                        
                        if (loadTime !== '加载失败' && loadTime !== '未加载') {
                            totalLoadTime += parseFloat(loadTime);
                            successCount++;
                        }
                    });

                    resultText += `
平均加载时间: ${successCount > 0 ? (totalLoadTime / successCount).toFixed(2) : 0} ms
成功加载: ${successCount}/${images.length} 张图片

【说明】图片加载耗时反映服务器带宽和静态资源缓存策略
`;
                    resultBox.textContent = resultText;
                }, 2000);
            }, 100);
        });

        // 4. 渲染大量DOM元素
        document.getElementById('renderDom').addEventListener('click', function() {
            const resultBox = document.getElementById('staticSpecialResult');
            resultBox.textContent = '🔄 正在渲染5000个DOM元素...';
            
            const startTime = performance.now();
            const fragment = document.createDocumentFragment();
            
            for (let i = 0; i < 5000; i++) {
                const div = document.createElement('div');
                div.style.padding = '2px';
                div.style.borderBottom = '1px solid #f0f0f0';
                div.textContent = `静态测试元素 ${i + 1} | 随机内容: ${Math.random().toString(36).slice(2, 8)}`;
                fragment.appendChild(div);
            }
            
            resultBox.innerHTML = '';
            resultBox.appendChild(fragment);
            
            const renderTime = (performance.now() - startTime).toFixed(2);
            const finalText = `
✅ 成功渲染5000个DOM元素
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
渲染总耗时: ${renderTime} ms
平均每个元素耗时: ${(renderTime / 5000).toFixed(6)} ms

【说明】该测试反映服务器传输效率 + 浏览器渲染性能
`;
            resultBox.textContent = finalText;
        });

        // 5. 加载大文本内容
        document.getElementById('loadLargeText').addEventListener('click', function() {
            const resultBox = document.getElementById('staticSpecialResult');
            resultBox.textContent = '🔄 正在加载50万字静态文本...';
            
            const startTime = performance.now();
            
            const baseText = '服务器静态测试文本，用于评估大文件传输性能。';
            const repeatCount = Math.ceil(500000 / baseText.length);
            const largeText = baseText.repeat(repeatCount).substring(0, 500000);
            
            resultBox.textContent = `
✅ 成功加载50万字静态文本
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
文本加载+渲染耗时: ${(performance.now() - startTime).toFixed(2)} ms
文本总字符数: ${largeText.length} (约1MB纯文本)
传输速率: ${(500000 / ((performance.now() - startTime)/1000) / 1024).toFixed(2)} KB/s

【速率评级】
< 100 KB/s: 🔴 带宽不足 | 100-500 KB/s: 🟡 一般 | > 500 KB/s: 🟢 优秀
`;
        });

        // 6. 清空静态测试结果
        document.getElementById('clearStaticResult').addEventListener('click', function() {
            document.getElementById('staticSpecialResult').textContent = '已清空静态测试结果，可重新点击按钮测试';
            document.getElementById('imageGrid').innerHTML = '';
            initImageGrid();
        });

        // ===================== PHP后端测试 =====================
        // PHP API请求核心函数
        async function callPhpApi(action) {
            const startTime = performance.now();
            try {
                const response = await fetch(`test-api.php?action=${action}`, {
                    method: 'GET',
                    cache: 'no-cache',
                    timeout: 10000
                });
                
                if (!response.ok) throw new Error(`HTTP错误: ${response.status}`);
                const data = await response.json();
                const endTime = performance.now();
                
                return {
                    success: true,
                    data: data,
                    time: (endTime - startTime).toFixed(2)
                };
            } catch (error) {
                const endTime = performance.now();
                return {
                    success: false,
                    error: error.message,
                    time: (endTime - startTime).toFixed(2)
                };
            }
        }

        // 1. 获取PHP环境信息
        document.getElementById('testPhpInfo').addEventListener('click', async function() {
            const resultEl = document.getElementById('phpTestResult');
            resultEl.textContent = '🔄 正在获取PHP环境信息...';
            
            const result = await callPhpApi('phpinfo');
            if (result.success) {
                resultEl.textContent = `
✅ PHP环境信息获取成功 (总耗时: ${result.time}ms)
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
PHP版本: ${result.data.php_version}
服务器软件: ${result.data.server_software}
PHP运行模式: ${result.data.php_sapi}
内存限制: ${result.data.memory_limit}
最大执行时间: ${result.data.max_execution_time}
服务器IP: ${result.data.server_ip}
当前时间: ${result.data.current_time}
`;
            } else {
                resultEl.textContent = `❌ PHP请求失败: ${result.error} (耗时: ${result.time}ms)`;
            }
        });

        // 2. 测试PHP执行效率
        document.getElementById('testPhpExecution').addEventListener('click', async function() {
            const resultEl = document.getElementById('phpTestResult');
            resultEl.textContent = '🔄 正在测试PHP执行效率...';
            
            const result = await callPhpApi('execution');
            if (result.success) {
                resultEl.textContent = `
✅ PHP执行效率测试完成 (总耗时: ${result.time}ms)
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
PHP内部执行时间: ${result.data.execution_time}ms
服务器1分钟负载: ${result.data.load_avg || 'N/A'}
内存使用: ${result.data.memory_usage}

【说明】执行时间 < 50ms: 🟢 优秀 | 50-100ms: 🟡 良好 | > 100ms: 🔴 需优化
`;
            } else {
                resultEl.textContent = `❌ PHP请求失败: ${result.error} (耗时: ${result.time}ms)`;
            }
        });

        // 3. 测试PHP Session
        document.getElementById('testPhpSession').addEventListener('click', async function() {
            const resultEl = document.getElementById('phpTestResult');
            resultEl.textContent = `🔄 正在测试PHP Session处理...`;
            
            const result = await callPhpApi('session');
            if (result.success) {
                resultEl.textContent = `
✅ PHP Session测试完成 (总耗时: ${result.time}ms)
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
Session ID: ${result.data.session_id}
Session创建时间: ${result.data.session_time}
Session存储路径: ${result.data.session_save_path}
Session测试数据: 随机数=${result.data.session_data.random}

【说明】Session正常表示PHP会话机制可用
`;
            } else {
                resultEl.textContent = `❌ PHP请求失败: ${result.error} (耗时: ${result.time}ms)`;
            }
        });

        // 4. 测试PHP循环性能
        document.getElementById('testPhpLoop').addEventListener('click', async function() {
            const resultEl = document.getElementById('phpTestResult');
            resultEl.textContent = `🔄 正在测试PHP循环性能(10万次)...`;
            
            const result = await callPhpApi('loop');
            if (result.success) {
                resultEl.textContent = `
✅ PHP循环性能测试完成 (总耗时: ${result.time}ms)
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
循环次数: ${result.data.loop_count}次
PHP内部循环耗时: ${result.data.loop_time}ms
平均每次循环: ${(parseFloat(result.data.loop_time)/100000).toFixed(6)}ms

【说明】10万次循环 < 100ms: 🟢 优秀 | 100-200ms: 🟡 良好 | > 200ms: 🔴 需优化
`;
            } else {
                resultEl.textContent = `❌ PHP请求失败: ${result.error} (耗时: ${result.time}ms)`;
            }
        });

        // 5. 批量PHP请求测试
        document.getElementById('testPhpConcurrent').addEventListener('click', async function() {
            const resultEl = document.getElementById('phpTestResult');
            resultEl.textContent = `🔄 正在批量请求PHP接口(10次)...`;
            
            const promises = [];
            for (let i = 1; i <= 10; i++) {
                promises.push(callPhpApi('execution'));
            }
            
            const results = await Promise.all(promises);
            let totalTime = 0;
            let successCount = 0;
            
            let resultText = `
✅ PHP接口批量请求完成
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
`;
            results.forEach((res, index) => {
                totalTime += parseFloat(res.time);
                if (res.success) successCount++;
                resultText += `请求${index+1}: ${res.success ? '成功' : '失败'} - 耗时${res.time}ms\n`;
            });
            
            resultText += `
总计: 成功${successCount}/10次
总耗时: ${totalTime.toFixed(2)}ms
平均耗时: ${(totalTime/10).toFixed(2)}ms/次

【说明】批量请求平均耗时接近单次耗时表示并发性能良好
`;
            resultEl.textContent = resultText;
        });
    </script>
</body>
</html>