Browser JavaScript and Event Loop

Master how browser runs JavaScript under the hood using asynchronous execution and event loop

This is the code repository for the course Browser JavaScript and Event Loop

Note

---

Every browser may differ in their implementation which may result in different behaviours when code execution happens.

This course takes Google Chrome as browser of choice. It is a great idea to have it installed on your machine, if haven't already. This will help you replicate the results as explained in the course.

How to run the code

• Clone the repository

git clone [email protected]:bonsaiilabs/browser-javascript-and-event-loop.git   

• Get inside the project root

cd browser-javascript-event-loop

• Open the folder in your favorite editor
• Open Google Chrome. Open the Developer Tools.
• Open the Console panel
• Copy the code from an existing file. Paste in the Chrome Developer Tools Console. Press Enter ↩.
• You should see the output in the console now.

References

• Apple's JavaScript Engine is called JavaScript Core
• Microsoft JScript Engine is known as Chakra
• List of JavaScript Engines
• ECMAScript is a scripting-language specification to standardize JavaScript
• setTimeout is a method on Window which is an interface available on DOM API
• Relationship between Chrome and Chromium

About Chrome JavaScript Engine - V8

1. V8 is Google's open source JavaScript engine.
2. V8 implements ECMAScript as specified in ECMA-262.

Web APIs

1. Use caniuse.com to search for feature support in browsers
2. List of the Web APIs specifications by WHATWG
3. List of Web APIs specifications by W3C
4. DOM is standardized by W3C
5. A browser engine is also known as rendering engine

Rendering Engine

1. Gecko is the rendering engine for Mozilla Firefox browser.
2. Webkit is the rendering engine for Apple Safari browser
3. Blink is the rendering engine for Google Chrome browser
4. EdgeHTML is the rendering engine for Microsoft Edge Browser.
5. Example of fetch API implementation by browser engines
   a. Gecko (Mozilla)
   b. Webkit (Safari)
   c. Blink (Chrome)
   c. EdgeHTML (Edge)

Timers implementation (setTimeout, setInterval)

1. Gecko (Mozilla) - setTimeout, setInterval
2. Webkit (Safari) - setTimeout, setInterval
3. Blink (Chrome) - setTimeout, setInterval

Processes in Chrome

1. Chrome Process Models
2. Utility Process. The Utility Process is a type of Process
3. Plugin Process architecture. The Pepper Plugin implementation is available here
4. GPU Process. The documentation of 3D APIs in Mac is available here

Other References about Chrome Browser

1. Inter Process Communication (IPC)
2. Network Service in Chrome
3. Moving Chrome Audio to separate process
4. Mojofication of Chrome Audio IPC
5. Sandbox architecture.
6. Sandboxed Chrome Processes
7. Sandbox FAQs
8. How Blink works
9. What Blink does
10. Chrome Multi-process architecture

Reference to Chromium Codebase

1. Blink directory structure
2. Off-main thread runs the task in worker pool
3. Task Scheduling in Blink
4. Blink Scheduler
5. Task Queues and Ordering in Blink Scheduler
6. List of Task Sources known to Blink
7. Event Loop in Chromium manages the microtask queue
8. Promise reactions are queued as microtask
9. message_loop is the Chromium's abstraction for event loops. See Part 3: Message loops in codelabs. The event loop implementation is different for every platform. View the message_loop directory structure to locate header files for android, ios, mac, and many more.
10. Every thread has its own event loop
11. Blink uses V8 APIs
12. The source for main thread scheduler

References from ECMASCript specification

1. ExecutionContext Stack
2. Jobs and Job Queues
3. Promise Objects
4. Section on Promise.then

References from HTML specification

1. setTimeout callback is queued as a Task. See step 18 of timer initialization steps
2. Event Loop Processing Model
3. User agents must use event loops to coordinate events, user interaction, scripts, rendering, and networking.
4. User interaction (e.g. click events) are queued as Tasks as defined in user interaction task source
5. Rendering Opportunity under the event loop processing model.

References from fetch specification

1. fetch queues a Task. See step 18 of Main fetch

License Attribution

Please do not use the gif files for commercial purposes.