Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Optimized API Fetching and DOM Operations for Repository Stats Dashboard #764

Closed
wants to merge 1 commit into from

Conversation

Aayush2308
Copy link

What does this PR do?

Summary

This PR implements several performance optimizations for the Repository Stats Dashboard. The main improvements include parallel API fetching, DOM caching, optimized icon management, and improved error handling. These changes significantly reduce load times and improve the overall application performance.

Related Issue

Fixes #762 - "🔧 perf: Optimize API Fetching and DOM Operations for Repository Stats Dashboard"

Motivation and Context

The previous implementation had several performance bottlenecks:

  • Sequential API calls increasing load time
  • Repeated DOM queries causing unnecessary reflows
  • Inefficient data structure for icon management
  • Lack of proper error handling
  • Hardcoded values making maintenance difficult

These issues were particularly noticeable when:

  • Loading data for repositories with many contributors
  • Running on slower network connections
  • Performing multiple operations in quick succession

Type of change

DOM Caching:

  • Added an elements object to cache all DOM queries at the start
  • Reduces repeated document.getElementById() calls which improves performance

API Optimization:

  • Used Promise.all() to fetch data in parallel instead of sequential fetches
  • Added response validation with .ok check
  • Consolidated API base URL into a constant

Icons Management:

  • Converted icons object to a Map for faster lookups
  • Better memory management and slightly faster access times

Constants:

  • Extracted magic numbers and strings into named constants
  • Added GITHUB_API_BASE and NOTIFICATION_TIMEOUT

Error Handling:

  • Improved error handling in the fetch function
  • Added response validation

** Performance Optimizations:

  • Reduced DOM manipulations by building strings first
  • Used template literals for cleaner string concatenation
  • Removed unnecessary object creation in loops

✅ Tested with large datasets (>1000 contributors)
✅ Verified parallel API fetching
✅ Checked memory usage improvements
✅ Cross-browser testing (Chrome, Firefox, Safari)
✅ Error scenario testing

Dependencies

  • No new dependencies added
  • All changes use native JavaScript features
  • Maintains existing browser compatibility

Checklist

✅Code follows project style guidelines
✅Added tests for new functionality
✅Documentation has been updated
✅All tests passing
✅No new console warnings
✅Performance tested on slow networks

  • Bug fix (non-breaking change which fixes an issue)
  • Chore (refactoring code, technical debt, workflow improvements)

Screenshots

image
image
image
image
image

Please add #hacktoberfest-accepted, #hacktoberfest, #level2 labels

Mandatory Tasks

  • Make sure you have self-reviewed the code. A decent size PR without self-review might be rejected.

Copy link

vercel bot commented Oct 28, 2024

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name Status Preview Comments Updated (UTC)
ticket-booking ✅ Ready (Inspect) Visit Preview 💬 Add feedback Oct 28, 2024 5:41pm

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

Successfully merging this pull request may close these issues.

🔧 perf: Optimize API Fetching and DOM Operations for Repository Stats Dashboard
2 participants