I went beyond the usual JavaScript Event Loop diagrams and inspected a real Chrome Renderer process on my Mac.

I had long been familiar with the JavaScript Event Loop concept, but I was eager to witness its inner workings firsthand. To achieve this, I launched a straightforward HTML file within Chrome on my Mac and began examining the Renderer process that handled its execution.

I began by analyzing Chrome's process tree. At the time of my examination, Chrome comprised a Browser process, four Renderer processes, a GPU process, and several Utility processes. The Renderer, GPU, and Utility processes each operated as distinct operating-system processes, seamlessly supporting a single browser window.

Next, I delved deeper into a single Renderer process using macOS tools. The native sample revealed 16 threads, including: the Main thread, Compositor, Chrome I/O thread, HangWatcher, and Background workers. This breakdown illustrated that the JavaScript Event Loop is not an isolated operating-system process or an independently named thread. Instead, ordinary page JavaScript runs on the Renderer's main thread, alongside the event-loop-driven processing of tasks.

To further explore the Event Loop, I employed a button that initiated a straightforward CPU-intensive loop: function startWork() { const end = Date.now() + 10000; while (Date.now() < end) {} console.log('CPU work finished'); }

I recorded the interaction using Chrome DevTools Performance. The Chrome DevTools displayed a click task lasting around 10,000 ms, with the majority of execution time attributed to the startWork() function. The trace indicated that the page became unresponsive during execution, with the Renderer process remaining active but its main thread occupied by the JavaScript task, preventing it from handling other work.

From this investigation, I learned that a running process does not automatically guarantee a responsive application. By observing the problem from various perspectives—operating system, native sampling, and Chrome DevTools—I was able to connect the dots between the Renderer process, its threads, and the JavaScript Event Loop. This newfound understanding proved particularly relevant in browser automation, where a seemingly stuck browser during a test may not be caused by selectors or insufficient timeouts.

Instead, the application's main thread might be occupied, making it more beneficial to investigate that aspect rather than merely extending the wait time. Ultimately, inspecting a real browser process offered a more comprehensive understanding of the JavaScript Event Loop than merely studying diagrams.