你的问题核心在于同步执行6次Yandex Metrika API调用，导致页面必须等待10秒才能完成渲染。之前的尝试没成功，是因为后端没有返回JSON数据给前端，前端也没有处理数据插入的逻辑。下面是完整的异步加载实现方案：

一、后端调整：创建专门的API代理接口 #

我们需要把API调用逻辑抽离成一个单独的接口，负责获取数据并返回JSON格式的结果，而不是和页面渲染混在一起。

1. 新建ym-api-proxy.php文件 #

<?php
// 引入你的配置和YMAPI函数（确保路径正确）
include 'path/to/your/config.php'; // 这里包含$countersYMAPI、$tokenYMAPI和YMAPI函数

// 只处理API请求
if (isset($_GET['YMAPI_call'])) {
    // 批量调用所有需要的API
    $YMAPIusers = YMAPI(
        $countersYMAPI[0], 
        $tokenYMAPI, 
        'ym:s:visits,ym:s:newUsers,ym:s:bounceRate,ym:s:pageDepth,ym:s:avgVisitDurationSeconds,ym:s:sumGoalReachesAny', 
        null, 
        'today', 
        'today'
    );
    $YMAPIpages = YMAPI(
        $countersYMAPI[0], 
        $tokenYMAPI, 
        'ym:pv:pageviews,ym:pv:users', 
        'ym:pv:URLHash', 
        'today', 
        'today'
    );
    $YMAPIvisits = YMAPI(
        $countersYMAPI[0], 
        $tokenYMAPI, 
        'ym:s:visits', 
        'ym:s:searchPhrase', 
        'today', 
        'today'
    );
    $YMAPIuserdata = YMAPI(
        $countersYMAPI[0], 
        $tokenYMAPI, 
        'ym:pv:users', 
        'ym:pv:deviceCategory', 
        'today', 
        'today'
    );
    $YMAPI_user_age = YMAPI(
        $countersYMAPI[0], 
        $tokenYMAPI, 
        'ym:s:visits', 
        'ym:s:ageInterval', 
        'today', 
        'today'
    );
    $YMAPI_source = YMAPI(
        $countersYMAPI[0], 
        $tokenYMAPI, 
        'ym:s:visits', 
        'ym:s:lastsignTrafficSource', 
        'today', 
        'today'
    );

    // 整理数据为易读的关联数组
    $response = [
        'coreMetrics' => $YMAPIusers,
        'pageData' => $YMAPIpages,
        'searchPhrases' => $YMAPIvisits,
        'deviceData' => $YMAPIuserdata,
        'ageData' => $YMAPI_user_age,
        'sourceData' => $YMAPI_source
    ];

    // 设置JSON响应头，确保前端正确解析
    header('Content-Type: application/json; charset=utf-8');
    // 返回JSON数据并终止脚本
    echo json_encode($response);
    exit;
}
?>

二、前端调整：先渲染页面，再异步加载数据 #

给页面中的数据展示元素添加id，方便JS定位，然后在页面加载完成后发起AJAX请求，拿到数据后更新页面内容。

1. 页面HTML结构示例 #

<!-- 仪表盘静态框架 -->
<div class="dashboard">
    <div class="metric-card">
        <h4>访问量</h4>
        <p id="visits-count" class="metric-value">加载中...</p>
    </div>
    <div class="metric-card">
        <h4>新用户</h4>
        <p id="new-users-count" class="metric-value">加载中...</p>
    </div>
    <div class="metric-card">
        <h4>跳出率</h4>
        <p id="bounce-rate" class="metric-value">加载中...</p>
    </div>

    <div class="data-section">
        <h3>热门页面</h3>
        <ul id="page-list">
            <li>加载中...</li>
        </ul>
    </div>

    <!-- 其他数据模块同理 -->
</div>

2. 前端JS代码（用jQuery或原生JS） #

方案A：jQuery版本（如果你已经引入jQuery）

$(document).ready(function() {
    // 发起异步请求
    $.ajax({
        type: 'GET',
        url: '/ym-api-proxy.php',
        data: { YMAPI_call: true },
        dataType: 'json',
        success: function(res) {
            // 更新核心指标
            $('#visits-count').text(res.coreMetrics.totals[0][0]);
            $('#new-users-count').text(res.coreMetrics.totals[0][1]);
            $('#bounce-rate').text((res.coreMetrics.totals[0][2] * 100).toFixed(1) + '%');

            // 更新热门页面列表
            const pageList = $('#page-list');
            pageList.empty();
            
            if (res.pageData.rows.length > 0) {
                res.pageData.rows.forEach(row => {
                    const url = row[0];
                    const views = row[1][0];
                    const users = row[1][1];
                    pageList.append(`<li>${url}: ${views} 浏览量，${users} 用户</li>`);
                });
            } else {
                pageList.append('<li>暂无页面数据</li>');
            }

            // 同理处理设备、年龄、来源等其他数据
            // 示例：更新设备分类
            const deviceList = $('#device-list');
            deviceList.empty();
            res.deviceData.rows.forEach(row => {
                deviceList.append(`<li>${row[0]}: ${row[1][0]} 用户</li>`);
            });
        },
        error: function(xhr, status, err) {
            // 错误处理：显示加载失败提示
            $('.metric-value').text('加载失败');
            $('#page-list').html('<li>数据加载失败，请稍后重试</li>');
            console.error('API请求错误:', err);
        }
    });
});

方案B：原生JS版本（无需jQuery）

document.addEventListener('DOMContentLoaded', function() {
    fetch('/ym-api-proxy.php?YMAPI_call=true')
        .then(response => {
            if (!response.ok) throw new Error('请求失败');
            return response.json();
        })
        .then(res => {
            // 更新核心指标
            document.getElementById('visits-count').textContent = res.coreMetrics.totals[0][0];
            document.getElementById('new-users-count').textContent = res.coreMetrics.totals[0][1];
            document.getElementById('bounce-rate').textContent = (res.coreMetrics.totals[0][2] * 100).toFixed(1) + '%';

            // 更新热门页面
            const pageList = document.getElementById('page-list');
            pageList.innerHTML = '';
            
            if (res.pageData.rows.length > 0) {
                res.pageData.rows.forEach(row => {
                    const li = document.createElement('li');
                    li.textContent = `${row[0]}: ${row[1][0]} 浏览量，${row[1][1]} 用户`;
                    pageList.appendChild(li);
                });
            } else {
                pageList.innerHTML = '<li>暂无页面数据</li>';
            }
        })
        .catch(err => {
            console.error('加载错误:', err);
            // 给所有指标设置错误提示
            document.querySelectorAll('.metric-value').forEach(el => {
                el.textContent = '加载失败';
            });
        });
});

三、优化建议（可选但推荐） #

1. 添加缓存：Yandex Metrika的当日数据不会实时更新，你可以把API响应缓存到文件或Redis，缓存5-10分钟，大幅减少API调用次数和加载时间。例如在YMAPI函数里加入缓存逻辑。
2. 加载动画：用CSS实现一个加载 spinner 替代“加载中...”，提升用户体验。
3. 批量API调用：Yandex Metrika API支持在单个请求中获取多个指标和维度，你可以尝试合并部分请求，减少HTTP请求次数（不过你的6个请求维度不同，可能无法全部合并，但可以尝试合并同类型的）。

内容的提问来源于stack exchange，提问作者Ruslan Abdulloev