Frontend

What Is the Virtual DOM?

The virtual DOM is an in-memory, lightweight JavaScript representation of the real DOM that frameworks like React use to compute the minimal set of changes nee…

What Is Webpack and Bundling?

Webpack is a module bundler that walks a JavaScript application’s dependency graph starting from an entry file and combines all the modules, along with assets…

Server-Side vs Client-Side Rendering

Server-side rendering (SSR) builds the full HTML for a page on the server and sends it ready to display, while client-side rendering (CSR) sends a near-empty H…

What is a WebSocket?

A WebSocket is a communication protocol that opens a single, persistent, full-duplex connection between client and server over TCP, letting either side send me…

What is the Same-Origin Policy?

The Same-Origin Policy (SOP) is a browser security rule that restricts scripts on one origin (scheme, host, and port) from reading data from a different origin…

What is CSRF?

CSRF (Cross-Site Request Forgery) is an attack where a malicious site tricks a victim's browser into sending an authenticated request to another site the victi…

What is XSS?

XSS (Cross-Site Scripting) is a vulnerability where an attacker injects malicious JavaScript into a page viewed by other users, letting that script run with th…

What is a Single-Page Application?

A single-page application (SPA) loads one HTML shell up front and then rewrites the page in the browser with JavaScript, fetching only data — not full new page…

What is Lazy Loading?

Lazy loading is the technique of deferring the loading of a resource — an image, a script chunk, or a component — until it is actually needed, instead of loadi…

What is a Service Worker?

A service worker is a background JavaScript script the browser runs separately from the page, letting it intercept network requests, cache responses, and enabl…

What is Content Security Policy (CSP)?

Content Security Policy (CSP) is an HTTP response header that tells the browser which sources of scripts, styles, images, and other resources are allowed to lo…

What are HTTP Caching Headers?

HTTP caching headers are response headers such as Cache-Control, ETag, and Last-Modified that tell browsers and intermediate caches how long a response can be…

What Is a Closure in JavaScript?

A closure is a function bundled together with references to the variables from its enclosing lexical scope, so the function keeps access to those variables eve…

What Is Hoisting in JavaScript?

Hoisting is JavaScript’s behavior of processing variable and function declarations during the compile phase, before any code executes, so declared names exist…

Promises vs async/await: What Is the Difference?

Promises and async/await are the same underlying mechanism for handling asynchronous results — async/await is syntactic sugar built on top of Promises that let…

What Is Prototypal Inheritance in JavaScript?

Prototypal inheritance is JavaScript's mechanism where objects inherit properties and methods directly from other objects through a chain of internal [[Prototy…

How Does the `this` Keyword Work in JavaScript?

The value of `this` in JavaScript is not fixed by where a function is defined but by how that function is called at runtime — its binding is determined by the…

What Is the Difference Between Event Bubbling and Capturing?

Bubbling and capturing are the two opposite directions an event travels through the DOM tree: capturing fires the event from the root down to the target elemen…

What Is Event Delegation and Why Use It?

Event delegation is the pattern of attaching a single event listener to a common ancestor element instead of separate listeners on every individual child, rely…

What Is the Difference Between call, apply, and bind?

`call`, `apply`, and `bind` are all methods on `Function.prototype` used to explicitly control what `this` refers to inside a function; `call` and `apply` invo…

What Is Tree-Shaking in JavaScript?

Tree-shaking is a build-time optimization where a bundler statically analyzes ES module import/export statements to detect which exports are actually used, the…

How Does CSS Specificity Work?

CSS specificity is a weighted scoring system the browser uses to decide which of several conflicting rules wins on an element, calculated by counting IDs, clas…

What Are the CSS Position Values and How Do They Differ?

The CSS position property controls how an element is placed in the document: static is the default normal flow, relative offsets an element from its own origin…

How Do z-index and Stacking Contexts Work?

z-index controls the paint order of positioned elements along the axis perpendicular to the screen, but it only works within a stacking context, which is a sel…