Rainer Koschnick
0abee5b794
- Implement PostgreSQL database schema with users and bookmarks tables - Add database connection pooling with retry logic and error handling - Create migration system with automatic schema initialization - Add database CLI tools for management (init, status, validate, etc.) - Include comprehensive error handling and diagnostics - Add development seed data and testing utilities - Implement health monitoring and connection pool statistics - Create detailed documentation and troubleshooting guide Database features: - Users table with authentication fields and email verification - Bookmarks table with user association and metadata - Proper indexes for performance optimization - Automatic timestamp triggers - Transaction support with rollback handling - Connection pooling (20 max connections, 30s idle timeout) - Graceful shutdown handling CLI commands available: - npm run db:init - Initialize database - npm run db:status - Check database status - npm run db:validate - Validate schema - npm run db:test - Run database tests - npm run db:diagnostics - Full diagnostics
92 lines
4.3 KiB
HTML
92 lines
4.3 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Performance Test - Bookmark Manager</title>
|
|
<style>
|
|
body { font-family: Arial, sans-serif; padding: 20px; }
|
|
.test-result { margin: 10px 0; padding: 10px; border-radius: 4px; }
|
|
.pass { background-color: #d4edda; color: #155724; }
|
|
.fail { background-color: #f8d7da; color: #721c24; }
|
|
.info { background-color: #d1ecf1; color: #0c5460; }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<h1>Bookmark Manager Performance Test</h1>
|
|
<div id="test-results"></div>
|
|
|
|
<script>
|
|
// Test performance optimizations
|
|
function runPerformanceTests() {
|
|
const results = document.getElementById('test-results');
|
|
|
|
// Test 1: Check if debounced search is implemented
|
|
const scriptContent = fetch('script.js')
|
|
.then(response => response.text())
|
|
.then(content => {
|
|
const tests = [
|
|
{
|
|
name: 'Debounced Search (300ms delay)',
|
|
test: content.includes('debouncedSearch') && content.includes('searchTimeout') && content.includes('300'),
|
|
description: 'Reduces excessive filtering during search input'
|
|
},
|
|
{
|
|
name: 'Virtual Scrolling/Pagination',
|
|
test: content.includes('virtualScrollThreshold') && content.includes('renderLargeCollection'),
|
|
description: 'Handles large bookmark collections efficiently'
|
|
},
|
|
{
|
|
name: 'DOM Optimization',
|
|
test: content.includes('DocumentFragment') && content.includes('requestAnimationFrame'),
|
|
description: 'Minimizes reflows during rendering'
|
|
},
|
|
{
|
|
name: 'Loading States',
|
|
test: content.includes('showLoadingState') && content.includes('isLoading'),
|
|
description: 'Shows progress for time-consuming operations'
|
|
},
|
|
{
|
|
name: 'Batch Rendering',
|
|
test: content.includes('renderFoldersInBatches') && content.includes('batchSize'),
|
|
description: 'Renders folders in batches to prevent UI blocking'
|
|
}
|
|
];
|
|
|
|
tests.forEach(test => {
|
|
const div = document.createElement('div');
|
|
div.className = `test-result ${test.test ? 'pass' : 'fail'}`;
|
|
div.innerHTML = `
|
|
<strong>${test.test ? '✅' : '❌'} ${test.name}</strong><br>
|
|
<small>${test.description}</small>
|
|
`;
|
|
results.appendChild(div);
|
|
});
|
|
|
|
// Add configuration info
|
|
const configDiv = document.createElement('div');
|
|
configDiv.className = 'test-result info';
|
|
configDiv.innerHTML = `
|
|
<strong>📊 Performance Configuration</strong><br>
|
|
<small>
|
|
• Virtual scroll threshold: 100 bookmarks<br>
|
|
• Items per page: 50 bookmarks<br>
|
|
• Search debounce delay: 300ms<br>
|
|
• Batch rendering: 5 folders at a time
|
|
</small>
|
|
`;
|
|
results.appendChild(configDiv);
|
|
})
|
|
.catch(error => {
|
|
const div = document.createElement('div');
|
|
div.className = 'test-result fail';
|
|
div.innerHTML = `<strong>❌ Error loading script.js</strong><br><small>${error.message}</small>`;
|
|
results.appendChild(div);
|
|
});
|
|
}
|
|
|
|
// Run tests when page loads
|
|
document.addEventListener('DOMContentLoaded', runPerformanceTests);
|
|
</script>
|
|
</body>
|
|
</html> |