The Scheduling Boundaries Behind Responsive UI
The article discusses the importance of scheduling boundaries in creating responsive user interfaces using JavaScript. It explains how long tasks can block the main thread, leading to unresponsive UIs, and emphasizes the need for cooperation in UI code. Different scheduling mechanisms like Promises, setTimeout, and requestAnimationFrame are outlined to manage rendering and improve responsiveness.
- ▪Long tasks can monopolize the main thread, causing the UI to become unresponsive.
- ▪Chaining promises does not create render opportunities, as the browser must drain the entire microtask queue before rendering.
- ▪Using setTimeout or requestAnimationFrame can introduce scheduling boundaries that allow the browser to render updates.
Opening excerpt (first ~120 words) tap to expand
try { if(localStorage) { let currentUser = localStorage.getItem('current_user'); if (currentUser) { currentUser = JSON.parse(currentUser); if (currentUser.id === 3862667) { document.getElementById('article-show-container').classList.add('current-user-is-article-author'); } } } } catch (e) { console.error(e); } Marsha Teo Posted on May 18 • Originally published at marshateo.com The Scheduling Boundaries Behind Responsive UI #javascript #webdev This is the last article in a series on how JavaScript actually runs. You can read the full series here or on my website. We now know how the event loop and rendering pipeline behave. The browser: Runs a macrotask to completion. Drains all microtasks. Executes any scheduled requestAnimationFrame callbacks. Drains all microtasks.
…
Excerpt limited to ~120 words for fair-use compliance. The full article is at DEV.to (Top).
Discussion
0 commentsMore from DEV.to (Top)
