一个基于 C++ 的测试 Halo 网站性能分析框架

// 瓶颈检测算法伪代码
struct ResourceBottleneck {
    string resource_type;
    double load_time;          // 资源加载耗时
    bool is_blocking;          // 是否阻塞渲染
    int dependency_level;      // 依赖层级
    string optimization_suggestion;
};

HTML输入 → DOM解析 → 资源标签提取 → 路径分类 → 性能数据关联 → 瓶颈分析报告

class HaloResourceAnalyzer {
public:
    // 主分析入口
    ResourceAnalysisResult analyze(const string& html_content, 
                                  const vector<ResourceTiming>& timings);
    
private:
    vector<ResourceItem> extractResources(const DOMTree& dom);
    ResourceType classifyResource(const string& url, const string& tag_type);
    BottleneckInfo detectBottlenecks(const vector<ResourceItem>& resources);
};

{
  "theme_patterns": [
    {"pattern": "/themes/.*/assets/", "type": "theme_resource"},
    {"pattern": "/plugins/.*/static/", "type": "plugin_resource"}
  ],
  "performance_thresholds": {
    "css_blocking_time": 100,    // 毫秒
    "js_execution_time": 50,     // 毫秒
    "image_load_time": 200       // 毫秒
  }
}

struct StandardizedResourceReport {
    map<ResourceType, int> resource_counts;     // 各类型资源数量统计
    vector<ResourceDetail> detailed_metrics;    // 每个资源的详细性能数据
    vector<BottleneckWarning> warnings;         // 检测到的瓶颈问题
    map<string, double> performance_indicators; // 关键性能指标汇总
};

// 从框架配置读取的HTTP客户端参数
struct HttpClientConfig {
    int timeout_ms = 5000;           // 单请求超时时间
    int max_redirects = 0;          // 禁止自动重定向（避免跨域污染）
    std::string user_agent = "HaloPerfBot/1.0";
    std::map<std::string, std::string> headers = {
        {"Accept", "text/html,application/xhtml+xml;q=0.9,*/*;q=0.8"},
        {"Accept-Language", "en-US,en;q=0.5"}
    };
};

class HaloHttpClient {
public:
    ResourceTiming fetchResource(const std::string& url) {
        CURL* curl = curl_easy_init();
        ResourceTiming timing;
        
        // 设置时间采集回调
        curl_easy_setopt(curl, CURLOPT_URL, url.c_str());
        curl_easy_setopt(curl, CURLOPT_WRITEFUNCTION, writeCallback);
        curl_easy_setopt(curl, CURLOPT_WRITEDATA, &timing.content);
        
        CURLcode res = curl_easy_perform(curl);
        
        if(res == CURLE_OK) {
            // 提取详细时间指标
            curl_easy_getinfo(curl, CURLINFO_NAMELOOKUP_TIME_T, &timing.dns_time);
            curl_easy_getinfo(curl, CURLINFO_CONNECT_TIME_T, &timing.tcp_time);
            curl_easy_getinfo(curl, CURLINFO_TOTAL_TIME_T, &timing.total_time);
            // ... 其他时间指标
        }
        
        curl_easy_cleanup(curl);
        return timing;
    }
};

struct ResourceTiming {
    std::string url;
    std::string content;          // 原始HTML或资源内容
    std::chrono::nanoseconds dns_time;
    std::chrono::nanoseconds tcp_time; 
    std::chrono::nanoseconds ssl_time;
    std::chrono::nanoseconds ttfb;
    std::chrono::nanoseconds total_time;
    int http_status;
    std::string content_type;
    size_t content_length;
    std::vector<std::string> warnings;  // 错误和异常记录
};

// 基于HtmlCxx的标签遍历示例
void ResourceExtractor::parseHTML(const std::string& html_content) {
    tree\u003cNode\u003e dom_tree;
    parser.parse(html_content);
    
    // 遍历所有script标签
    for (auto\u0026 node : dom_tree) {
        if (node.isTag() \u0026\u0026 node.tagName() == "script") {
            std::string src = node.attribute("src");
            if (isHaloThemeResource(src)) {
                js_resources.emplace_back(ResourceType::JS, src);
            }
        }
    }
}

struct DependencyLevel {
    int critical_path_depth;    // 关键路径深度
    bool blocks_rendering;      // 是否阻塞渲染
    std::vector\u003cstd::string\u003e dependencies; // 依赖的资源URL
};

struct StandardizedResourceReport {
    ResourceCounts resource_counts;          // 资源数量统计
    std::vector\u003cDetailedMetric\u003e detailed_metrics; // 详细指标
    std::vector\u003cstd::string\u003e warnings;         // 警告信息
    PerformanceIndicators performance_data; // 性能指标汇总
};

// DNS查询时间（微秒转毫秒）
dns_time_ms = resource_timing.dns_time / 1000.0;

// TCP连接建立时间
tcp_connect_time_ms = resource_timing.tcp_time / 1000.0;

// SSL/TLS握手时间（HTTPS资源）
ssl_handshake_time_ms = resource_timing.ssl_time / 1000.0;

// 首字节时间（TTFB）
ttfb_ms = resource_timing.ttb / 1000.0;

// 总加载时间
total_load_time_ms = resource_timing.total_time / 1000.0;

// 识别最慢资源
auto slowest_resource = std::max_element(resources.begin(), resources.end(), 
    [](const auto& a, const auto& b) {
        return a.total_time < b.total_time;
    });

// 检测并发瓶颈
if (same_domain_resources > 6) {
    warnings.push_back("同域名资源超过浏览器并发限制");
}

// 时间指标（毫秒）
"total_page_load_time": 2450.125
"first_contentful_paint": 1200.500
"largest_contentful_paint": 1800.750
"cumulative_layout_shift": 0.125

// 资源数量指标
"total_resources": 42
"js_resources": 8
"css_resources": 3
"image_resources": 25
"font_resources": 2
"other_resources": 4

// 大小指标（字节）
"total_transfer_size": 2456789
"js_size": 456789
"css_size": 123456
"image_size": 1678901

性能数据采集 → JSON序列化 → 模板渲染 → 多格式输出

<!DOCTYPE html>
<html>
<head>
    <title>Halo站点性能报告 - {{site_url}}</title>
    <script src="echarts.min.js"></script>
    <style>
        .warning-card { background-color: #ffe6e6; border-left: 4px solid #ff4444; }
        .metric-highlight { font-size: 1.2em; color: #2c7bb6; }
    </style>
</head>
<body>
    <!-- 性能概览区域 -->
    <section id="performance-overview">
        <h2>📈 性能概览</h2>
        <div class="metrics-grid">
            <div class="metric-card">
                <span class="metric-label">页面加载时间</span>
                <span class="metric-value">{{total_page_load_time}} ms</span>
            </div>
            <!-- 其他关键指标卡片 -->
        </div>
    </section>

    <!-- 资源分布图表 -->
    <section id="resource-charts">
        <div id="resource-pie-chart" style="width: 600px; height: 400px;"></div>
        <div id="timeline-chart" style="width: 800px; height: 400px;"></div>
    </section>

    <!-- 详细资源表格 -->
    <section id="resource-details">
        <h3>🔍 资源详情</h3>
        <table class="resource-table">
            <thead>
                <tr>
                    <th>资源类型</th>
                    <th>数量</th>
                    <th>总大小</th>
                    <th>平均加载时间</th>
                </tr>
            </thead>
            <tbody>
                {% for resource in detailed_metrics %}
                <tr>
                    <td>{{resource.type}}</td>
                    <td>{{resource.count}}</td>
                    <td>{{resource.total_size}} bytes</td>
                    <td>{{resource.avg_load_time}} ms</td>
                </tr>
                {% endfor %}
            </tbody>
        </table>
    </section>
</body>
</html>

var resourcePieOption = {
    title: { text: '资源类型分布' },
    tooltip: { trigger: 'item' },
    series: [{
        type: 'pie',
        data: [
            {value: {{js_resources}}, name: 'JavaScript'},
            {value: {{css_resources}}, name: 'CSS'},
            {value: {{image_resources}}, name: '图片'},
            {value: {{font_resources}}, name: '字体'},
            {value: {{other_resources}}, name: '其他'}
        ]
    }]
};

var timelineOption = {
    title: { text: '关键性能指标时间轴' },
    xAxis: { type: 'category', data: ['FCP', 'LCP', 'DOM加载', '完全加载'] },
    yAxis: { type: 'value', name: '时间(ms)' },
    series: [{
        data: [
            {{first_contentful_paint}},
            {{largest_contentful_paint}}, 
            {{dom_content_loaded}},
            {{total_page_load_time}}
        ],
        type: 'line'
    }]
};

class ReportGenerator {
public:
    // 并发生成报告，支持50个站点同时处理
    void generate_concurrent_reports(const std::vector<SiteData>& sites) {
        std::vector<std::future<std::string>> futures;
        
        for (const auto& site : sites) {
            futures.push_back(std::async(std::launch::async, [&] {
                return render_html_report(site.performance_data);
            }));
        }
        
        // 收集所有结果，单个报告生成时间 < 200ms
        for (auto& future : futures) {
            std::string report = future.get();
            save_to_file(report);
        }
    }
};

{
  "site_url": " https://example.halo.site ",
  "timestamp": "2024-01-15T10:30:00Z",
  "performance_metrics": {
    "total_page_load_time": 2450.125,
    "first_contentful_paint": 850.500,
    "largest_contentful_paint": 1200.750,
    "resource_counts": {
      "js": 15,
      "css": 8,
      "images": 23,
      "fonts": 4,
      "other": 5
    }
  },
  "warnings": [
    "CSS文件加载超过阈值: 1200ms",
    "JavaScript执行阻塞主线程: 350ms"
  ]
}

<div class="warning-card">
    <strong>⚠️ 性能警告</strong>
    <p>{{warning_message}}</p>
    <small>建议: {{suggestion}}</small>
</div>

// 输出格式插件接口
class OutputFormatPlugin {
public:
    virtual std::string generate_report(const PerformanceData& data) = 0;
    virtual std::string get_format_name() const = 0;
};

// 具体实现示例
class CSVOutputPlugin : public OutputFormatPlugin {
public:
    std::string generate_report(const PerformanceData& data) override {
        // 生成CSV格式报告
        return csv_content;
    }
};

# 性能测试阶段执行脚本
./halo_perf_analyzer --input-urls sites.json --output-dir reports/
--concurrent 10 --timeout 5000

performance_test:
  stage: test
  script:
    - ./build/halo_perf_analyzer --input-urls $CI_PROJECT_DIR/test_sites.json
  artifacts:
    paths:
      - reports/
    expire_in: 1 week

{
  "quality_gates": {
    "max_page_load_time": 3000,
    "max_warnings": 5,
    "required_success_rate": 0.95
  }
}

# 自动化报告命名规范
reports/{timestamp}_{site_hash}_{git_commit}.html
reports/{timestamp}_{site_hash}_{git_commit}.json

FROM ubuntu:20.04
COPY halo_perf_analyzer /usr/local/bin/
RUN apt-get update && apt-get install -y ca-certificates
CMD ["halo_perf_analyzer", "--help"]