Advanced Web Programming

Part 03 – JavaScript Engines and

Runtime Environment
Dr. Amjad AbuHassan

11/25/2024 Dr. Amjad AbuHassan 1

JavaScript Engine and Runtime

When you run JavaScript code in a browser, it doesn’t interact directly with our
computer’s hardware. Instead, it communicates with the JavaScript engine, which
serves as a bridge between our code and the underlying machine.

11/25/2024 Dr. Amjad AbuHassan 2

JavaScript Engines

11/25/2024 Dr. Amjad AbuHassan 3

What is a JavaScript Engine?
● Definition: A JavaScript engine is a virtual machine that executes JavaScript code.
● Purpose: Converts JavaScript into machine code for execution by a computer's
processor.
● Components: Parser, interpreter, compiler, runtime environment.
● Examples: V8, SpiderMonkey, JavaScriptCore, Chakra

11/25/2024 Dr. Amjad AbuHassan 4

Overview of V8 JavaScript Engine
● Developed by: Google
● Used in: Google Chrome, Node.js
● Features:
● Just-In-Time (JIT) compilation

● High performance

● Efficient memory management

● Written in C++

11/25/2024 Dr. Amjad AbuHassan 5

How V8 JavaScript Engine Works
● Parsing: Converts JavaScript code into an Abstract Syntax Tree (AST).
● Interpreter (Ignition): Executes the AST directly.
● Compiler (TurboFan): Optimizes and compiles frequently executed code into
machine code.
● Garbage Collection (Orinoco): Automatically frees up memory used by objects no
longer needed.

11/25/2024 Dr. Amjad AbuHassan 6

Overview of SpiderMonkey JavaScript Engine
● Developed by: Mozilla
● Used in: Firefox, Thunderbird
● Features:
● First JavaScript engine

● JIT compilation

● Support for modern JavaScript features

● Written in C++

11/25/2024 Dr. Amjad AbuHassan 7

How SpiderMonkey JavaScript Engine Works
● Parsing: Converts JavaScript code into an Abstract Syntax Tree (AST).

● Bytecode: The AST is converted to bytecode.

● JIT Compiler: Optimizes and compiles bytecode into machine code.

● Garbage Collection: Manages memory allocation and deallocation.

11/25/2024 Dr. Amjad AbuHassan 8

Comparing V8 and SpiderMonkey
● Performance: Both use JIT compilation for high performance.
● Compatibility: Support for modern JavaScript features.
● Use Cases:
● V8: Chrome, Node.js

● SpiderMonkey: Firefox, Thunderbird

● Development Focus:
● V8: High-performance web applications and server-side JavaScript.

● SpiderMonkey: High-performance browsing experience and compliance with web standards.

11/25/2024 Dr. Amjad AbuHassan 9

The Future of JavaScript Engines
● Performance Improvements: Continued enhancements in JIT compilation and
memory management.
● WebAssembly: Integration for running high-performance code in the browser.
● Support for New JavaScript Features: Keeping up with the latest ECMAScript
standards.
● Security Enhancements: Improvements to protect against vulnerabilities.

11/25/2024 Dr. Amjad AbuHassan 10

Analyzing Performance with V8
● Using Chrome DevTools:
● Open DevTools

● Go to the "Performance" tab

● Record a performance profile

● Analyze JavaScript execution and memory usage

11/25/2024 Dr. Amjad AbuHassan 11

JavaScript Engine

11/25/2024 Dr. Amjad AbuHassan 13

The Call Stack

● Definition: A stack structure that keeps track of the execution

contexts.
● Process:
● Global Execution Context is pushed onto the stack.
● Function Execution Contexts are pushed when functions are called.
● Execution Contexts are popped off when execution is complete.

11/25/2024 Dr. Amjad AbuHassan 14

What is an Execution Context?

● Definition: An execution context is the environment in which

JavaScript code is evaluated and executed.
● It contains the code to be executed and the necessary data to execute
● Types of Execution Contexts:
● Global Execution Context: created when the JavaScript code is first run
● Function Execution Context: created whenever a function is called

11/25/2024 Dr. Amjad AbuHassan 15

Components of an Execution Context
● Variable Object (VO): Contains function arguments, inner variable declarations,
and function declarations.

● Scope Chain: Contains the current execution context's Variable Object and its
parent execution contexts.

● this Keyword: Refers to the object in the current context.

11/25/2024 Dr. Amjad AbuHassan 16

Practical Example: Understanding Execution
Context

11/25/2024 Dr. Amjad AbuHassan 19

Practical Example: Understanding the Call
Stack

11/25/2024 Dr. Amjad AbuHassan 20

The Memory Heap
● Definition: The area in memory where objects are allocated.

● Usage: Stores objects, functions, and other reference types.

● Garbage Collection: Automatically frees up memory used by objects no longer

referenced.

11/25/2024 Dr. Amjad AbuHassan 21

Compilation Process

11/25/2024 Dr. Amjad AbuHassan 22

 const greet = "Hello"; // AST

The Run Process

Now JavaScript code enters the engine?
● Lexical Analysis: Converts code into tokens.
● The engine breaks down each line of code into meaningful components
(e.g., const, function).

● Parsing: Converts tokens into an Abstract Syntax Tree (AST).

● Syntax Error Checking
● Compilation: machine code.
● Executed Immediately
11/25/2024 Dr. Amjad AbuHassan 23
Compilation vs Interpretation
● In the compilation process, the entire code is translated into machine code at once
and stored in a binary file, which can then be executed by the computer.
● When the program runs, the source code is already compiled into machine code
and ready for execution.

11/25/2024 Dr. Amjad AbuHassan 24

Compilation vs Interpretation cont.
● In interpretation, the interpreter processes the source code by executing it line by
line. While running the program, the code is converted into machine code and
executed simultaneously, one line at a time

11/25/2024 Dr. Amjad AbuHassan 25

Compilation vs Interpretation cont.
● JavaScript was originally a purely interpreted language. However, modern
JavaScript engines now utilize a combination of compilation and interpretation,
known as "just-in-time" (JIT) compilation.
● With JIT compilation, the entire code is translated into machine code in one step
and executed immediately.

11/25/2024 Dr. Amjad AbuHassan 26

The Process Overview
The modern JavaScript engine
initially generates basic machine
code for quick execution. It then
optimizes and recompiles the code
during runtime, with all
optimizations happening
seamlessly in the background.

11/25/2024 Dr. Amjad AbuHassan 27

JavaScript Runtime Environment

11/25/2024 Dr. Amjad AbuHassan 28

What is a JavaScript Runtime?
● A JavaScript (JS) runtime is an environment that enables the execution of
JavaScript code, consisting of different components working together.
● Comprehensive Ecosystem: It extends beyond basic code execution to include
tools and features required for running JavaScript applications.
● The runtime varies based on where JavaScript runs:
● In Browsers: Includes features for handling events, accessing the DOM, and interacting with
browser functionalities.

● In Node.js: Offers server-side-specific tools and modules.

11/25/2024 Dr. Amjad AbuHassan 29

11/25/2024 Dr. Amjad AbuHassan 30
11/25/2024 Dr. Amjad AbuHassan 31
Web APIs

● Definition: Browser-provided interfaces that allow JavaScript to

interact with the browser environment.
● Examples:
● DOM (Document Object Model)
● setTimeout and setInterval
● Fetch API for network requests

11/25/2024 Dr. Amjad AbuHassan 32

11/25/2024 Dr. Amjad AbuHassan 33
Asynchronous JavaScript

● Event Loop: Manages the execution of asynchronous code.

● Process:
● Web APIs execute asynchronous code.
● Callbacks are pushed to the task queue (Callback Queue).
● Event loop pushes callbacks to the call stack when it's empty.

11/25/2024 Dr. Amjad AbuHassan 34

11/25/2024 Dr. Amjad AbuHassan 35
Impact of JavaScript on Rendering

11/25/2024 Dr. Amjad AbuHassan 36

JavaScript and the Critical Rendering Path
● Definition: The sequence of steps the browser takes to render a web page.
● Impact of JavaScript:
● Blocking rendering during script execution

● Affecting the DOM and CSSOM

● Optimization Strategies:
● Defer or async attributes (for external scripts)

● Minimize inline scripts

11/25/2024 Dr. Amjad AbuHassan 37

The Render Tree
● Definition: Combines the DOM and CSSOM to determine what will be displayed on
the screen.
● JavaScript Impact:
● Modifying the DOM

● Changing styles
● Optimization Strategies:
● Efficient DOM manipulation
● Batch DOM updates
● Use of virtual DOM in frameworks
11/25/2024 Dr. Amjad AbuHassan 38
JavaScript Execution and the Main Thread
● Main Thread: Executes JavaScript and handles rendering.
● JavaScript Impact:
● Blocking the main thread

● Delaying rendering

● Optimization Strategies:
● Use Web Workers

● Break up long tasks

11/25/2024 Dr. Amjad AbuHassan 39