JavaScript Async & DOM
When to use this skill
-
Manipulating usage of fetch or XMLHttpRequest .
-
Adding event listeners to DOM elements.
-
Interacting with browser APIs (Local Storage, Navigator).
- Async Data Fetching
-
Fetch API: Use fetch() with async/await. Always check res.ok before parsing JSON. const res = await fetch('/api/data'); if (!res.ok) throw new Error('Failed'); const data = await res.json();
-
AbortController: Use AbortController to cancel pending requests when components unmount or fast interactions occur.
- event Delegation
-
Listener Attachment: Attach listeners to a parent container rather than individual items for lists. list.addEventListener('click', (e) => { if (e.target.matches('.item-btn')) { ... } });
-
Cleanup: Always use removeEventListener if listeners are attached to transient elements (or use { once: true } where applicable).
- DOM Manipulation
-
Performance: Minimize reflows. Read layout properties (offsetWidth, etc.) in a batch, then write styles in a batch.
-
Fragments: Use DocumentFragment when appending multiple elements to the DOM at once.