148 lines
5.5 KiB
HTML
148 lines
5.5 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Shot Table Performance Test</title>
|
|
<style>
|
|
body {
|
|
font-family: Arial, sans-serif;
|
|
margin: 20px;
|
|
background-color: #f5f5f5;
|
|
}
|
|
.container {
|
|
max-width: 800px;
|
|
margin: 0 auto;
|
|
background: white;
|
|
padding: 20px;
|
|
border-radius: 8px;
|
|
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
|
|
}
|
|
.test-section {
|
|
margin: 20px 0;
|
|
padding: 15px;
|
|
border: 1px solid #ddd;
|
|
border-radius: 4px;
|
|
}
|
|
.performance-metrics {
|
|
background-color: #f8f9fa;
|
|
padding: 10px;
|
|
border-radius: 4px;
|
|
margin: 10px 0;
|
|
}
|
|
button {
|
|
background-color: #007bff;
|
|
color: white;
|
|
border: none;
|
|
padding: 8px 16px;
|
|
border-radius: 4px;
|
|
cursor: pointer;
|
|
margin: 5px;
|
|
}
|
|
button:hover {
|
|
background-color: #0056b3;
|
|
}
|
|
.success {
|
|
color: #28a745;
|
|
font-weight: bold;
|
|
}
|
|
.warning {
|
|
color: #ffc107;
|
|
font-weight: bold;
|
|
}
|
|
.error {
|
|
color: #dc3545;
|
|
font-weight: bold;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="container">
|
|
<h1>Shot Table Performance Test</h1>
|
|
<p>This test verifies the performance improvements for the show/hide tasks button in the shot table.</p>
|
|
|
|
<div class="test-section">
|
|
<h2>Performance Optimizations Applied</h2>
|
|
<ul>
|
|
<li>✅ Used <code>shallowRef</code> for columns to avoid deep reactivity</li>
|
|
<li>✅ Added <code>markRaw</code> to column definitions to prevent Vue reactivity</li>
|
|
<li>✅ Added stable keys to EditableTaskStatus components</li>
|
|
<li>✅ Debounced column visibility updates</li>
|
|
<li>✅ Memoized column creation to only recreate when dependencies change</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<div class="test-section">
|
|
<h2>Expected Performance Improvements</h2>
|
|
<div class="performance-metrics">
|
|
<p><strong>Before:</strong> 3+ seconds delay when toggling task columns</p>
|
|
<p><strong>After:</strong> < 500ms response time</p>
|
|
<p><strong>Root Cause:</strong> Column array recreation causing all EditableTaskStatus components to be destroyed and recreated</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="test-section">
|
|
<h2>Manual Testing Instructions</h2>
|
|
<ol>
|
|
<li>Navigate to a project's shots page in table view</li>
|
|
<li>Ensure there are multiple shots with task columns visible</li>
|
|
<li>Click the "Show/Hide Tasks" button in the toolbar</li>
|
|
<li>Measure the response time</li>
|
|
<li>Verify that task columns toggle quickly (< 500ms)</li>
|
|
</ol>
|
|
</div>
|
|
|
|
<div class="test-section">
|
|
<h2>Technical Details</h2>
|
|
<h3>Key Changes Made:</h3>
|
|
<ul>
|
|
<li><strong>ShotBrowser.vue:</strong> Replaced computed columns with shallowRef and manual updates</li>
|
|
<li><strong>columns.ts:</strong> Added stable keys to EditableTaskStatus components</li>
|
|
<li><strong>Column Visibility:</strong> Debounced updates to prevent rapid re-renders</li>
|
|
<li><strong>Reactivity:</strong> Used markRaw to prevent deep reactivity on column definitions</li>
|
|
</ul>
|
|
|
|
<h3>Performance Benefits:</h3>
|
|
<ul>
|
|
<li>Prevents unnecessary component destruction/recreation</li>
|
|
<li>Reduces Vue's reactivity overhead on large objects</li>
|
|
<li>Maintains component state during visibility changes</li>
|
|
<li>Eliminates redundant API calls from component recreation</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<div class="test-section">
|
|
<h2>Verification Checklist</h2>
|
|
<div id="verification-results">
|
|
<p>✅ Column visibility changes should be instant</p>
|
|
<p>✅ Task status dropdowns should maintain their state</p>
|
|
<p>✅ No console errors during column toggling</p>
|
|
<p>✅ EditableTaskStatus components should not flicker</p>
|
|
<p>✅ Session storage updates should be debounced</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="test-section">
|
|
<h2>Browser Performance Tools</h2>
|
|
<p>Use Chrome DevTools Performance tab to measure:</p>
|
|
<ul>
|
|
<li>Component render time</li>
|
|
<li>JavaScript execution time</li>
|
|
<li>DOM manipulation overhead</li>
|
|
<li>Memory usage during column toggling</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
console.log('Shot Table Performance Test loaded');
|
|
console.log('Navigate to the shots table and test the Show/Hide Tasks button performance');
|
|
|
|
// Log performance timing if available
|
|
if (performance.mark) {
|
|
performance.mark('test-page-loaded');
|
|
console.log('Performance testing tools available');
|
|
}
|
|
</script>
|
|
</body>
|
|
</html> |