基于 Playwright(python) 的前端性能测试脚本实现

1. 自动收集页面加载性能指标；

2. 分析资源加载情况；

3. 生成详细的性能报告；

4. 提供优化建议。

def _initialize_browser(self):    """初始化浏览器环境"""    self.playwright = sync_playwright().start()  # 启动Playwright    self.browser = self.playwright.chromium.launch(headless=False)  # 启动Chromium浏览器    self.context = self.browser.new_context(        ignore_https_errors=True,  # 忽略HTTPS错误        bypass_csp=True,  # 绕过内容安全策略        extra_http_headers={  # 设置HTTP头禁用缓存            'Cache-Control': 'no-store, no-cache, must-revalidate',            'Pragma': 'no-cache'        }    )    self.page = self.context.new_page()  # 创建新页面    self.page.goto('about:blank')  # 导航到空白页    self.page.route('**', lambda route: route.continue_())  # 拦截所有请求并继续

• ignore_https_errors=True：忽略证书错误，便于测试开发环境；

• bypass_csp=True：绕过内容安全策略限制；

• 禁用缓存：确保每次测试都从服务器获取最新资源。

def _collect_performance_metrics(self) -> Dict[str, Any]:    """收集性能指标数据"""    start_time = time.time()  # 记录开始时间    self.page.goto(self.test_url, wait_until="networkidle")  # 导航到目标URL    end_time = time.time()  # 记录结束时间    # 基础指标：页面加载总时间    self.metrics_data = {        'load_time_seconds': end_time - start_time,    }    # 通过浏览器API获取详细性能指标    browser_metrics = self.page.evaluate('''() => {        try {            const navEntries = performance.getEntriesByType("navigation");            const resources = performance.getEntriesByType("resource") || [];            return {                navigation: navEntries.length > 0 ? navEntries[0].toJSON() : {},                resources: resources.map(r => r.toJSON())            };        } catch (e) {            return { navigation: {}, resources: [] };        }    }''')

1. 使用高精度时间戳记录页面加载总时间；

2. 通过performance.getEntriesByTypeAPI获取Navigation Timing和Resource Timing数据；

3. 捕获异常确保测试不会因单个页面错误而中断。

def _analyze_resources(self, resources: List[Dict]) -> Dict[str, Any]:    """分析资源加载情况"""    resource_types = defaultdict(list)  # 按类型分类资源    slow_resources = []  # 存储加载缓慢的资源    # 分类和分析资源    for res in resources:        res_type = res.get('initiatorType', 'other')        resource_types[res_type].append(res)        duration = res.get('duration')        if isinstance(duration, (int, float)) and duration > 500:            slow_resources.append({                'name': res.get('name', 'unknown'),                'type': res_type,                'duration': duration            })    # 计算统计信息

• 按资源类型（JS/CSS/图片等）分类统计

• 识别加载时间超过500ms的慢资源

• 计算各类资源的平均加载时间和总耗时

def _analyze_metrics(self):    """分析关键性能指标"""    nav_entry = self.metrics_data.get('navigation', {})    self.metrics_data['analysis'] = {        'dom_ready_time': nav_entry.get('domContentLoadedEventEnd'),  # DOM准备就绪时间        'full_load_time': nav_entry.get('loadEventEnd'),  # 完整加载时间        'first_byte': nav_entry.get('responseStart', 0) - nav_entry.get('requestStart', 0)        if all(k in nav_entry for k in ['responseStart', 'requestStart'])        else None,  # 首字节时间(TTFB)        'page_render_time': nav_entry.get('domComplete', 0) - nav_entry.get('domLoading', 0)        if all(k in nav_entry for k in ['domComplete', 'domLoading'])        else None,  # 页面渲染时间        'resource_count': self.resource_analysis.get('total_resources', 0),  # 资源总数        'avg_resource_load_time': self.resource_analysis.get('avg_resource_load_time', 0)    }

def _generate_recommendations(self) -> List[str]:    """根据分析结果生成优化建议"""    recommendations = []    analysis = self.metrics_data.get('analysis', {})    resources = self.resource_analysis    # 资源数量过多建议    if analysis.get('resource_count', 0) > 50:        recommendations.append(            f"资源数量较多({analysis['resource_count']}个)，建议合并CSS/JS文件，使用雪碧图减少图片资源"        )    # 慢资源优化建议    slow_resources = [        r for r in resources.get('top_slowest', [])        if r.get('duration', 0) > 1000    ]

1. 资源数量 > 50 → 建议合并资源；

2. 平均资源加载时间 > 300ms → 检查CDN或服务器；

3. 存在加载时间 > 1s的资源 → 提示优化具体资源。

if __name__ == "__main__":    # 创建测试实例并运行测试    tester = PerformanceTester(url="https://example.com")    tester.run_test()

开始测试页面: https://example.com=== 核心性能指标 ===1. 页面加载时间: 2.34秒2. DOMContentLoaded: 1245.23ms3. 完全加载时间: 2340.56ms4. 首字节时间(TTFB): 345.67ms5. 页面渲染时间: 895.32ms6. 资源数量: 427. 平均资源加载时间: 215.43ms=== 资源加载分析 ===总资源数量: 42平均资源加载时间: 215.43ms按类型统计:  SCRIPT: 12个, 平均加载时间: 185.32ms  IMAGE: 20个, 平均加载时间: 245.67ms  CSS: 5个, 平均加载时间: 156.89ms=== 优化建议 ===1. 资源数量较多(42个)，建议合并CSS/JS文件，使用雪碧图减少图片资源2. 发现加载缓慢的资源(2个)，建议优化: example.com/big-image.jpg(1245ms), example.com/main.js(1123ms)