You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: Foundations.md
+11-11Lines changed: 11 additions & 11 deletions
Original file line number
Diff line number
Diff line change
@@ -8,7 +8,7 @@ JS Engines were written to improve the performace of JavaScript in the browser.
8
8
9
9
This documentation alalyses the [V8 Chrome Engine](https://v8.dev).
10
10
11
-
### <b>How it works:</b>
11
+
### How it works:
12
12
13
13

14
14
@@ -64,7 +64,7 @@ Both of these do exactly what compilers do: Take one language and convert into a
64
64
65
65
</i>
66
66
67
-
### <b>JIT Compiler</b>
67
+
### JIT Compiler
68
68
69
69
JIT (Just in time) compilers are essentially the combination of an interpreter and a compiler. They were designed to make JS Engines run faster.
70
70
@@ -138,19 +138,19 @@ You can think of the call stack as a region in memory which operates in 'first i
138
138
139
139
---
140
140
141
-
## <b>Memory Heap</b>
141
+
## Memory Heap
142
142
143
143
In most native executable programs, there are two types of memory available: stack-based and heap-based memory.
144
144
145
145
The heap is reserved for the memory allocation needs of the program. It is an area apart from the program code and the stack which stores program data in an unordered fashion.
146
146
147
-
### <b>Garbage Collection</b>
147
+
### Garbage Collection
148
148
149
149
JavaScript is a garbage collected language. Data stored in the memory heap that isn't needed anymore gets cleared away to preserve memory. This helps prevent memory leaks.
150
150
151
151
Garbage collection in JS uses the 'mark and sweep' algorithm. Essentially it marks data which is being used and needs to be kept, and sweeps away data which is no longer being used or referenced.
152
152
153
-
### <b>Memory Leaks</b>
153
+
### Memory Leaks
154
154
155
155
A memory leak occurs when a computer program incorrectly manages memory allocations in such a way that memory which is no longer needed is not released. This is often due to unintentional references from other objects. Memory leaks in web pages often involve interaction between JavaScript objects and DOM elements.
156
156
@@ -176,15 +176,15 @@ The JS Runtime Environment executes asynchronous code in the background and uses
176
176
177
177
All modern browsers have a JS engine as well as a JS runtime which provides a web API.
178
178
179
-
### <b>Web Browser API</b>
179
+
### Web Browser API
180
180
181
181
Web API's are applications provided by the browser which can do a variety of tasks in the background such as sending HTTP requests, listening to DOM events, caching and database storage on the browser.
182
182
183
-
### <b>The Heap</b>
183
+
### The Heap
184
184
185
185
The first container in the environment, which is also part of the V8 JS Engine, is called the ‘memory heap.’ As the V8 JS Engine comes across variables and function declarations in the code it stores them in the Heap.
186
186
187
-
### <b>The Stack</b>
187
+
### The Stack
188
188
189
189
The second container in the environment is called the ‘call stack.’ It is also part of the V8 JS Engine. As the JS Engine comes across an actionable item, like a function call, it adds it to the Stack.
190
190
@@ -194,17 +194,17 @@ When a function returns a value, or is sent to the Web API container, it is popp
194
194
195
195
<i>Note - the Stack is a data structure that runs LIFO — last in first out. No function other than the one at the top of the stack will ever be in focus, and the engine will not move to the next function unless the one above it is popped off.</i>
196
196
197
-
### <b>The Web API Container</b>
197
+
### The Web API Container
198
198
199
199
The Web API calls that were sent to the Web API container from the Stack, like event listeners, HTTP/AJAX requests, or timing functions, sit there until an action is triggered. Either a ‘click’ happens, or the HTTP request finishes getting its data from its source, or a timer reaches its set time. In each instance, once an action is triggered, a ‘callback function’ is sent to the fourth and final container, the ‘callback queue.’
200
200
201
-
### <b>The Callback Queue</b>
201
+
### The Callback Queue
202
202
203
203
The Callback Queue will store all the callback functions in the order in which they were added. It will ‘wait’ until the Stack is completely empty. When the Stack is empty it will send the callback function at the beginning of the queue to the Stack. When the Stack is clear again, it will send over its next callback function.
204
204
205
205
<i>Note - the Queue is a data structure that runs FIFO — first in first out. Whereas the Stack uses a push and pop (add to end take from end), the Queue uses push and shift (add to end take from beginning).</i>
206
206
207
-
### <b>The Event Loop</b>
207
+
### The Event Loop
208
208
209
209
The Event Loop can be thought of as a ‘thing’ inside the javascript runtime environment. It's job is to constantly look at the Stack and the Queue. If it sees the Stack is empty, it will notify the Queue to send over its next callback function. The Queue and the Stack might be empty for a period of time, but the event loop never stops checking both. At any time a callback function can be added to the Queue after an action is triggered from the Web API container.
0 commit comments