Async & defer Execution Order
Scripts normally block HTML parsing when discovered. They'd be fetched, executed and then the HTML parsing continues.
Async scripts fetch the scripts along with HTML parsing, but execution happens on main thread, blocking the HTML parsing.
Defer scripts fetch the scripts along with HTML parsing, but execution happens when HTML parsing is done.
Rendering Pipeline & Compositing
DOM tree all static elements
CSSOM styling for all elements
DOM and CSSOM get combined into Render Tree
Render tree doesn't include non-visible elements
Phases after Render Tree:
Layout -> find the geometry of elements
Paint -> main thread walks the layout tree to create paint records
Composite -> separate parts into layers, rasterize them separately and composite as a page in the compositor thread
Resolving Domain Requests
Browser sends request to Recursive DNS Resolver
Recursive DNS Resolver queries Root Name Server
Root Name Server responds with IP Address for the Top Level Domain
Recursive DNS Resolver queries Top Level Domain Name Server for Authoritative Name Server's IP Address
Recursive DNS Resolver queries Authoritative Name Server and retrieves the website's IP Address
Call Stack & Event Loop
Call stack is where function calls are managed. When a function is called, it's pushed onto the call stack. When it returns, it's popped off.
Sync code is executed immediately.
Callback queue holds functions that don't run immediately.
In the callback queue, we have Microtasks and Macrotasks.
Event loop monitors the call stack and the callback queue.
Microtasks have higher priority. Executed once current jobs on the call stack are done, e.g. Promises.
Macrotasks have lower priority. Executed after Microtasks, e.g. timeouts.
Resource hints
preconnect -> tells browser to establish a TCP connection and perform a TLS handshake with the specified origin before resources from that origin are requested
preload -> browser should fetch and cache specified resource with high priority
prefetch -> browser should fetch the specified resource with low priority
dns-prefetch -> browser should perform domain name resolution in the background
Object reference & destructuring
Spreading an object into another one
Obj1 top level values are duplicated into Obj2
Nested objects are referenced, therefore if changed, will change for both objects
fetchStart -> browser begins fetching the document
connectEnd -> connection to the server is established
domInteractive -> the DOM is interactive
domContentLoadedEventStart -> DOMContentLoaded event handler starts
domComplete -> DOM is fully loaded
loadEventStart -> page's load event handler starts
Cache Directives
no-store -> doesn't cache any part of the req/res
stale-while-revalidate -> serves stale content while validating the cached response with the origin server
must-revalidate -> validates a stale response with the origin server before using it
private -> prevents caching on shared caches
no-cache -> validates a cached response with the origin server before using it, even if it's still fresh
Garbage collection
- If there are no references anymore to an object, it'll be garbage collected and freed from memory.
Animation Cost
When animating CSS properties, different properties have different rendering costs associated with them:
- Layout, Paint and Composite.
Layout -> calculate position
Paint -> repainting pixels of elements on the screen
Composite -> compositing layers together on the GPU
Event Propagation
- When an event occurs, it goes through three phases where event handlers are called.
Capture phase - from the root DOM element down to the target element
Target phase - target element
Bubbling phase - from target element up to the root DOM element
By default, in the bubbling phase is when the return happens.
addEventListener accepts a third argument as boolean. If true, the return will happen during capturing phase.
An example here would be logging a string when clicking an element with a listener.
The listener function set to capturing phase will log first.
WeakMap
Collection of key-value pairs where keys must be objects
Keys in WeakMap are held weekly
When references to an object used as a key are removed, that key will be garbage collected and removed from the WeakMap
No size or iteration
Web Vitals
TTFB: time for server to respond to a request and start sending data back to the client
FID: time for a webpage to respond to a user's first interaction
TTI: time for a webpage to be fully loaded and responsive to user input
TBT: time the main thread is blocked from responding to user input
CLS: the stability of webpage's layout
INP: average time for webpage to update its visuals after user interacts with it
- CSP defines a set of security rules that restrict the resources a web application can load
Generator functions
- Assigning a value to yield will let you pass an argument that will end up as the value of the assigned variable
function* generatorFunc () {
const result = yield "Input!"
return "All Done"
}
const genObj = generatorFunc()
genObj.next()
genObj.next("This will be the value of result variable")
Promise methods
Promise.all() takes an array of promises as an input and resolves when all promises are resolved. It rejects as soon as one promise rejects.
Promise.race() takes an array of promises and resolves/rejects as soon as one of the promises completes, either by resolving or rejecting.
Promise.any() takes an array of promises and resolves when the first promise resolves. It rejects only if all promises reject.
Promise.allSettled() resolves when all promises have settled, either by resolving or rejecting. It returns an array of objects with status and value properties for each promise.
