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:

1. Layout -> find the geometry of elements

2. Paint -> main thread walks the layout tree to create paint records

3. Composite -> separate parts into layers, rasterize them separately and composite as a page in the compositor thread

Resolving Domain Requests

1. Browser sends request to Recursive DNS Resolver

2. Recursive DNS Resolver queries Root Name Server

3. Root Name Server responds with IP Address for the Top Level Domain

4. Recursive DNS Resolver queries Top Level Domain Name Server for Authoritative Name Server's IP Address

5. 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

PerformanceNavigationTimings

1. fetchStart -> browser begins fetching the document

2. connectEnd -> connection to the server is established

3. domInteractive -> the DOM is interactive

4. domContentLoadedEventStart -> DOMContentLoaded event handler starts

5. domComplete -> DOM is fully loaded

6. 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.

1. Capture phase - from the root DOM element down to the target element

2. Target phase - target element

3. 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

Content Security Policy CSP Header

• 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.