mirror of
https://github.com/DeNNiiInc/Web-Page-Performance-Test.git
synced 2026-04-17 20:05:58 +00:00
Add Waterfall Chart & Request Inspector
Features Added: - Interactive waterfall timeline visualization - Color-coded timing bars (DNS, Connect, SSL, TTFB, Download) - Request filtering by resource type (HTML, JS, CSS, Images, Fonts) - Detailed request inspector dialog with timing breakdown - HAR data extraction from Lighthouse results - Size/compression metrics display - Third-party resource identification - Render-blocking resource detection Technical Implementation: - Created lib/har-parser.js for network data extraction - Built waterfall.html with SVG-based timeline renderer - Added waterfall.js with interactive controls - Integrated HAR generation into test runner workflow - Updated main UI with View Waterfall link
This commit is contained in:
14
index.html
14
index.html
@@ -91,6 +91,20 @@
|
||||
<div class="metric-label">TBT (ms)</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Waterfall Link -->
|
||||
<div style="margin-top: 1.5rem; display: none;" id="waterfall-link-container">
|
||||
<a href="#" id="view-waterfall" class="button" style="display: inline-block; padding: 0.75rem 1.5rem; background: var(--color-accent); color: white; text-decoration: none; border-radius: 8px; font-weight: 600;">
|
||||
📊 View Waterfall Chart
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<!-- Content Breakdown -->
|
||||
<div id="content-breakdown" style="margin-top: 2rem; display: none;">
|
||||
<h3>Content Breakdown</h3>
|
||||
<canvas id="breakdown-chart" style="max-width: 500px; margin: 0 auto;"></canvas>
|
||||
<div id="breakdown-stats" style="margin-top: 1rem;"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- History -->
|
||||
|
||||
Reference in New Issue
Block a user