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
