9

I have been reading into the internals of Javascript (in the context of the chrome browser) and I have a few questions that I can't seem to find proper answers to.

As per my understanding:

  • Core Javascript (as per ECMA specification) is included in the V8 engine.

  • Functions like settimeout are provided by the browser's Web APIs.

  • The V8 engine includes a call stack and any Javascript that is to be executed gets pushed on to this stack.

  • Non-standard functions are then called via Web APIs.

  • These on completion gets pushed to a callback queue.

  • Once the stack is empty, anything on the callback queue gets pushed onto the stack by the event loop.

My question is When the V8 engine interprets Javascript code, how does it know that a particular function is from the Web APIs? And how are Web APIs actually linked with the engine?

Improve this question
2

2 Answers 2

Reset to default
7

APIs like setTimeout() are added to the global object in Javascript. When the JS engine is looking to resolve a symbol, it starts in the local scope and goes up a chain of scopes. At the very end of the chain is the global scope.

The host environment can, as part of initializing the V8 engine, add it's own APIs to the global scope in the V8 engine and that's exactly what a browser does for things it needs that aren't already built into V8.

The notion of the global object in a browser is a bit messier than it probably should be. For many years, the global object was the window object. All globally accessible host environment functions like setTimeout() are properties of the window object.

Similarly, declaring any variables at the top level scope in a browser would automatically make those variables be properties of the window object.

This got messy fast. When the new class keyword came along, they decided to not continue to make this mess worse so classes declared at the top level scope in a browser are available globally, but are not added as properties of the window object.

When the node.js environment came along, they organized user code into modules and the goal was to have as few global variables as possible. In that environment global variables are properties of an object named global. Variables you declare at the top level in node.js modules are scoped only to within the module. Nothing automatically becomes a global variable, but you can explicitly assign a new property to the global object if you want to such as:

global.myProperty = 3;

though that is strongly discourage in the node.js modular design.

So, any API outside of the ECMAScript specification that is added at the top level in Javascript in the browser like setTimeout() is added to the global object by the browser environment when it is initializing the V8 engine.

Improve this answer
Sign up to request clarification or add additional context in comments.

5 Comments

So is the global object defined within V8 and once the browser loads, these Web API functions are added to the global object by the browser?
@fsociety - As part of initializing a Javascript environment, the host environment can create objects (beyond what is part of ECMAScript itself) in that Javascript environment to make them available to any scripts run in that environment.
@fsociety - I added a bunch more to my answer.
I see. So once the function is in the global object, and is ready for execution, the V8 engine will treat it as any other function and push it onto the call-stack? And I assume once this function is processed on the stack, whatever definition will be executed; Which in the case of setTimeout would be linked to further function calls to some low-level implementation outside of the global scope (?).
@fsociety - It is just any other function as far as the JS engine is concerned. When you call it, it will get pushed onto the call stack and its code will execute. The code behind that function may be either all Javascript or it may have bindings to native code (V8 has a developer API for binding native code to a JS function). setTimeout() does indeed bind to some native code to manage and fire timers.
1

For Chrome :

In a browser, the V8 engine is responsible for executing JavaScript code, while the Blink engine manages rendering tasks like processing HTML and CSS, and offering Web APIs. When JavaScript code running in V8 accesses a Web API, it communicates with Blink, which carries out the requested operation. Blink and V8 collaborate closely within the browser environment — V8 focuses on JavaScript execution, and Blink provides the APIs and rendering functionalities the JavaScript code can use.

Detailed Version-

V8 is a JavaScript engine that comprehends only ECMAScript (core JavaScript).

It lacks any browser-specific features like setTimeout(), fetch(), or DOM APIs. The browser contains Web APIs (like timers, DOM, geolocation) implemented in native code (i.e. C++).

When the browser starts executing a webpage, it performs two crucial tasks. It sets up a global object (window in browsers) and attaches Web API functions to that object as properties long before the JavaScript is executed.

When a piece of JavaScript code makes a call to a Web API function, V8 notices that the function you called is on the global object.

V8 then forwards the task to the C++ implementation of the browser through internal bindings. V8 doesn’t know about Web APIs, it is only interested in JS.

The browser detects tasks to run like timers, HTTP requests, or DOM manipulations outside the V8 engine. When the Web API finishes its job (like a timer finishes), it puts a call-back in the Task Queue.

The Event Loop is looking at two things: the Call-Stack (to see if it is empty) and the Task Queue to see if there is any work to be done. If the Call Stack is empty, the Event Loop will take the first thing on the queue and add it to the Call Stack, where V8 can run it.

Node.js has a C++ internal library called libuv which implements Asynchronous I/O with its own thread pool, but the pattern is the same: V8 runs the JS, libuv handles the async tasks, and passes the event to the Event Loop to run the callback as soon as the Call Stack is empty.

Improve this answer

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.