基于Python Playwright進(jìn)行前端性能測試的腳本實(shí)現(xiàn)
引言
在當(dāng)今Web應(yīng)用開發(fā)中,性能優(yōu)化是提升用戶體驗(yàn)的關(guān)鍵因素之一。本文將介紹如何使用Playwright構(gòu)建一個自動化性能測試工具,幫助開發(fā)者全面分析網(wǎng)頁性能瓶頸并獲取優(yōu)化建議。
工具概述
這個腳本主要功能包括:
- 自動收集頁面加載性能指標(biāo)
- 分析資源加載情況
- 生成詳細(xì)的性能報告
- 提供優(yōu)化建議
整體架構(gòu)

核心實(shí)現(xiàn)解析
1. 瀏覽器初始化
def _initialize_browser(self):
"""初始化瀏覽器環(huán)境"""
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, # 繞過內(nèi)容安全策略
extra_http_headers={ # 設(shè)置HTTP頭禁用緩存
'Cache-Control': 'no-store, no-cache, must-revalidate',
'Pragma': 'no-cache'
}
)
self.page = self.context.new_page() # 創(chuàng)建新頁面
self.page.goto('about:blank') # 導(dǎo)航到空白頁
self.page.route('**', lambda route: route.continue_()) # 攔截所有請求并繼續(xù)
關(guān)鍵配置說明:
ignore_https_errors=True:忽略證書錯誤,便于測試開發(fā)環(huán)境bypass_csp=True:繞過內(nèi)容安全策略限制- 禁用緩存:確保每次測試都從服務(wù)器獲取最新資源
2. 性能數(shù)據(jù)收集
def _collect_performance_metrics(self) -> Dict[str, Any]:
"""收集性能指標(biāo)數(shù)據(jù)"""
start_time = time.time() # 記錄開始時間
self.page.goto(self.test_url, wait_until="networkidle") # 導(dǎo)航到目標(biāo)URL
end_time = time.time() # 記錄結(jié)束時間
# 基礎(chǔ)指標(biāo):頁面加載總時間
self.metrics_data = {
'load_time_seconds': end_time - start_time,
}
# 通過瀏覽器API獲取詳細(xì)性能指標(biāo)
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: [] };
}
}''')
數(shù)據(jù)收集策略:
- 使用高精度時間戳記錄頁面加載總時間
- 通過
performance.getEntriesByTypeAPI獲取Navigation Timing和Resource Timing數(shù)據(jù) - 捕獲異常確保測試不會因單個頁面錯誤而中斷
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
})
# 計算統(tǒng)計信息
分析維度:
- 按資源類型(JS/CSS/圖片等)分類統(tǒng)計
- 識別加載時間超過500ms的慢資源
- 計算各類資源的平均加載時間和總耗時
4. 關(guān)鍵性能指標(biāo)計算
def _analyze_metrics(self):
"""分析關(guān)鍵性能指標(biāo)"""
nav_entry = self.metrics_data.get('navigation', {})
self.metrics_data['analysis'] = {
'dom_ready_time': nav_entry.get('domContentLoadedEventEnd'), # DOM準(zhǔn)備就緒時間
'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, # 首字節(jié)時間(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), # 資源總數(shù)
'avg_resource_load_time': self.resource_analysis.get('avg_resource_load_time', 0)
}
核心指標(biāo)說明:
| 指標(biāo)名稱 | 說明 | 優(yōu)化意義 |
|---|---|---|
| 頁面加載時間 | 從開始導(dǎo)航到頁面完全加載的總時間 | 反映整體用戶體驗(yàn) |
| DOMContentLoaded | DOM樹構(gòu)建完成時間 | 用戶可開始與頁面部分交互的時間點(diǎn) |
| 完全加載時間 | 所有資源加載完成的時間 | 頁面完全就緒的時間點(diǎn) |
| 首字節(jié)時間(TTFB) | 服務(wù)器響應(yīng)第一個字節(jié)的時間 | 反映服務(wù)器響應(yīng)速度 |
| 頁面渲染時間 | DOM構(gòu)建到完成渲染的時間 | 反映瀏覽器渲染效率 |
| 資源數(shù)量 | 頁面加載的所有資源總數(shù) | 過多資源會顯著影響性能 |
| 平均資源加載時間 | 資源加載的平均耗時 | 反映資源服務(wù)器/CDN性能 |
5. 智能優(yōu)化建議生成
def _generate_recommendations(self) -> List[str]:
"""根據(jù)分析結(jié)果生成優(yōu)化建議"""
recommendations = []
analysis = self.metrics_data.get('analysis', {})
resources = self.resource_analysis
# 資源數(shù)量過多建議
if analysis.get('resource_count', 0) > 50:
recommendations.append(
f"資源數(shù)量較多({analysis['resource_count']}個),建議合并CSS/JS文件,使用雪碧圖減少圖片資源"
)
# 慢資源優(yōu)化建議
slow_resources = [
r for r in resources.get('top_slowest', [])
if r.get('duration', 0) > 1000
]
建議生成邏輯基于以下規(guī)則:
- 資源數(shù)量 > 50 → 建議合并資源
- 平均資源加載時間 > 300ms → 檢查CDN或服務(wù)器
- 存在加載時間 > 1s的資源 → 提示優(yōu)化具體資源
使用示例
if __name__ == "__main__":
# 創(chuàng)建測試實(shí)例并運(yùn)行測試
tester = PerformanceTester(url="https://example.com")
tester.run_test()
輸出示例:
開始測試頁面: https://example.com
=== 核心性能指標(biāo) ===
1. 頁面加載時間: 2.34秒
2. DOMContentLoaded: 1245.23ms
3. 完全加載時間: 2340.56ms
4. 首字節(jié)時間(TTFB): 345.67ms
5. 頁面渲染時間: 895.32ms
6. 資源數(shù)量: 42
7. 平均資源加載時間: 215.43ms
=== 資源加載分析 ===
總資源數(shù)量: 42
平均資源加載時間: 215.43ms
按類型統(tǒng)計:
SCRIPT: 12個, 平均加載時間: 185.32ms
IMAGE: 20個, 平均加載時間: 245.67ms
CSS: 5個, 平均加載時間: 156.89ms
=== 優(yōu)化建議 ===
1. 資源數(shù)量較多(42個),建議合并CSS/JS文件,使用雪碧圖減少圖片資源
2. 發(fā)現(xiàn)加載緩慢的資源(2個),建議優(yōu)化: example.com/big-image.jpg(1245ms), example.com/main.js(1123ms)
到此這篇關(guān)于基于Python Playwright進(jìn)行前端性能測試的腳本實(shí)現(xiàn)的文章就介紹到這了,更多相關(guān)Python Playwright前端性能測試內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
Python使用Spire.XLS創(chuàng)建柱形圖和條形圖
Spire.XLS for Python 提供了便捷的圖表創(chuàng)建功能,讓開發(fā)者能夠僅用幾行代碼就創(chuàng)建各種專業(yè)圖表,下面我們就來看看怎么使用 Spire.XLS 創(chuàng)建柱形圖和條形圖吧2025-07-07
如何在python開發(fā)工具PyCharm中搭建QtPy環(huán)境(教程詳解)
這篇文章主要介紹了在python開發(fā)工具PyCharm中搭建QtPy環(huán)境,本文通過圖文并茂的形式給大家介紹的非常詳細(xì),具有一定的參考借鑒價值,需要的朋友可以參考下2020-02-02
Pyecharts繪制可視化地球?qū)崿F(xiàn)示例
這篇文章主要為大家介紹了Pyecharts繪制可視化地球?qū)崿F(xiàn)示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2022-07-07
python實(shí)現(xiàn)多線程暴力破解登陸路由器功能代碼分享
這篇文章主要介紹了python實(shí)現(xiàn)多線程暴力破解登陸路由器功能代碼分享,本文直接給出實(shí)現(xiàn)代碼,需要的朋友可以參考下2015-01-01

