Beginner Level (0–1 Years)
1. What will be the output of typeof null in JavaScript, and why?
Answer:
The output will be "object". This is a historical quirk in JavaScript where typeof null returns "object" due to an early implementation bug, preserved for backward compatibility.
2. Why is display: none; different from visibility: hidden; in CSS?
Answer:
display: none; removes the element from the document flow, so it takes up no space. visibility: hidden; hides the element but keeps its space in the layout, affecting user interaction and layout differently.
3. What does the defer attribute do when added to a script tag?
Answer:
It instructs the browser to download the script in the background and execute it after the HTML is fully parsed. Unlike async, defer maintains the execution order of multiple scripts.
4. What’s the difference between == and === in JavaScript?
Answer:
== compares values after type coercion, while === compares both value and type without coercion. For example, "5" == 5 is true, but "5" === 5 is false.
5. If a function in JavaScript doesn’t explicitly return a value, what does it return?
Answer:
It returns undefined. All JavaScript functions return a value, defaulting to undefined if no return statement is specified.
6. What’s wrong with using IDs as CSS selectors for styling?
Answer:
IDs have high specificity, making styles hard to override, which can complicate maintainability. They also discourage reusable code, as IDs should be unique. Classes are preferred for flexibility in larger projects.
7. What does flex: 1; mean in a CSS flex container?
Answer:
It’s shorthand for flex-grow: 1; flex-shrink: 1; flex-basis: 0%;. The item grows to fill available space and shrinks when needed, distributing space equally among flex items.
8. How can you select an element by its ID in JavaScript, and how would you change its text content?
Answer:
Use document.getElementById('id') to select the element and set its textContent property to change the text. Example: document.getElementById('myId').textContent = 'New text';
9. What does the z-index property do, and why might it not work sometimes?
Answer:
z-index controls the stacking order of elements. It only works on elements with position: relative, absolute, or fixed. If it’s not working, check if the element is positioned or if a parent’s stacking context overrides it.
10. What is a closure in JavaScript?
Answer:
A closure is a function that retains access to its lexical scope even when executed outside that scope. For example:
function outer() {
let count = 0;
return function inner() {
count++;
return count;
};
}
const counter = outer();
console.log(counter()); // 1
console.log(counter()); // 2The inner function retains access to count, incrementing it each call.
11. How can you make a div vertically centered using Flexbox?
Answer:
Apply the following CSS to the container:
.container {
display: flex;
align-items: center;
justify-content: center;
}12. Does HTML support nesting a <a> tag inside another <a> tag?
Answer:
No, nesting <a> tags is invalid in HTML. It can cause unpredictable behavior and fails HTML validation.
13. What is event delegation in JavaScript?
Answer:
Event delegation involves adding a single event listener to a parent element to handle events for its children, especially useful for dynamically added elements. Example: parent.addEventListener('click', e => { if (e.target.matches('.child')) { /* handle click */ } });
14. What’s the default value of position in CSS, and what does it mean?
Answer:
The default is static. Elements follow the normal document flow, and properties like top, right, bottom, and left have no effect.
15. Is JavaScript pass-by-value or pass-by-reference?
Answer:
JavaScript is pass-by-value. For objects and arrays, the value is a reference, so changes to the object’s properties are reflected, but reassigning the parameter doesn’t affect the original.
16. Why might an image not display on a webpage even though the path is correct?
Answer:
Possible reasons include incorrect file extension, case sensitivity (e.g., on Linux servers), mixed content issues (HTTP vs. HTTPS), or the image being blocked by the browser.
17. What does the following return: parseInt("08")?
Answer:
It returns 8. In modern JavaScript, parseInt("08") is parsed as base 10, ignoring leading zeros.
18. What does the alt attribute do in an image tag?
Answer:
The alt attribute provides alternative text for an image if it fails to load and is used by screen readers for accessibility.
19. What is the difference between let, const, and var?
Answer:
var is function-scoped and hoisted. let and const are block-scoped, hoisted but inaccessible until declared (Temporal Dead Zone). const requires initialization and cannot be reassigned.
20. What does the box-sizing: border-box; rule do?
Answer:
It includes padding and border in an element’s total width and height, simplifying layout calculations.
21. What is a media query in CSS, and how can it be used to make a website responsive?
Answer:
A media query applies CSS rules based on conditions like screen width. Example:
@media (max-width: 600px) {
body {
font-size: 16px;
}
}This adjusts styles for screens smaller than 600px, enabling responsive design.
22. How can you prevent a form from submitting in JavaScript?
Answer:
Use event.preventDefault() in the form’s submit event handler:
form.addEventListener('submit', function(e) {
e.preventDefault();
});23. What is the purpose of the meta viewport tag in HTML?
Answer:
It controls the layout on mobile browsers by setting the viewport width and scaling. Example:
<meta name="viewport" content="width=device-width, initial-scale=1.0">24. What’s the difference between em and rem units in CSS?
Answer:
em is relative to the font-size of its parent element, while rem is relative to the root html element’s font-size, making rem more predictable for consistent scaling.
25. What happens if two CSS rules apply to the same element with equal specificity?
Answer:
The rule that appears later in the stylesheet (or is loaded later) takes precedence, following the CSS cascade’s “last rule wins” principle.
👋 Need top web developers for your project? Interview this week!
Fill out the form to book a call with our team. We’ll match you to the top developers who meet your requirements, and you’ll be interviewing this week!
Intermediate Level (1–3 Years)
1. What is the difference between localStorage, sessionStorage, and cookies?
Answer:
localStorage stores data with no expiration (up to 5-10MB); sessionStorage lasts until the page session ends; cookies (up to ~4KB) can have custom expiration and are sent with HTTP requests, suitable for server communication.
2. Why does this behave differently in arrow functions?
Answer:
Arrow functions inherit this from their lexical context and don’t bind their own this, unlike regular functions. This makes them unsuitable for methods needing dynamic this binding, like object methods.
3. Explain the concept of a “Critical Rendering Path” in web performance.
Answer:
It’s the sequence of steps (parsing HTML/CSS, building DOM/CSSOM, rendering) to display pixels on screen. Optimizing it involves minimizing render-blocking resources, inlining critical CSS, and deferring non-essential scripts.
4. What is the difference between throttling and debouncing?
Answer:
Throttling limits a function to run at most once every X milliseconds. Debouncing delays execution until a pause in events occurs. Both optimize performance for events like scroll or resize.
5. How does a browser determine which CSS rule to apply when there are conflicts?
Answer:
It uses specificity (calculated by weights: inline styles > IDs > classes/attributes > elements), importance (!important), and source order (last rule wins for equal specificity).
6. What does the Content Security Policy (CSP) header do?
Answer:
It mitigates XSS attacks by restricting resources (e.g., scripts, images) the browser can load or execute, such as disallowing inline scripts or specifying trusted domains.
7. What’s the difference between a shallow copy and a deep copy in JavaScript?
Answer:
A shallow copy duplicates top-level properties, but nested objects share references. A deep copy duplicates all levels. Example: const deep = JSON.parse(JSON.stringify(obj)); (note: this doesn’t handle functions or special objects).
8. Explain event bubbling and event capturing.
Answer:
Bubbling propagates events from the target element up to the root. Capturing propagates from the root down to the target. Listeners default to bubbling unless useCapture: true is set.
9. How can you prevent layout thrashing?
Answer:
Batch DOM reads and writes separately to avoid forced reflows. Use requestAnimationFrame for animations and avoid repeated style recalculations in loops.
10. What is the difference between position: relative and position: absolute?
Answer:
relative positions an element relative to its normal position, staying in the flow. absolute removes it from the flow, positioning it relative to the nearest positioned ancestor.
11. How is a service worker different from a web worker?
Answer:
Service workers intercept network requests for caching/offline support and run independently of the page. Web workers handle CPU-intensive tasks without DOM access or network interception.
12. What is the purpose of rel="noopener noreferrer" when using target="_blank" in links?
Answer:
rel="noopener" prevents the new page from accessing window.opener, mitigating phishing risks. rel="noreferrer" hides the referrer header for privacy.
13. What does it mean when a site is described as “responsive”?
Answer:
It adapts to different screen sizes and devices using fluid grids, media queries, and flexible images, ensuring usability across desktops, tablets, and phones.
14. What’s the difference between async and defer in script tags?
Answer:
async downloads and executes scripts immediately, possibly out of order. defer downloads in parallel but executes in order after HTML parsing.
15. What is the virtual DOM and how does it differ from the real DOM?
Answer:
The virtual DOM is a lightweight JavaScript representation of the real DOM. Changes are applied to it first, then efficiently synced with the real DOM to minimize costly updates.
16. What does CORS stand for and what problem does it solve?
Answer:
Cross-Origin Resource Sharing allows servers to specify which origins, headers, and methods can access resources, solving the issue of cross-domain request restrictions.
17. Why might a CSS transition not work on a display property?
Answer:
display is not animatable. Use opacity or transform for transitions, and toggle display via JavaScript after the transition ends.
18. How can you improve website load performance?
Answer:
Minify CSS/JS, use lazy loading, reduce HTTP requests, leverage CDNs, enable caching, compress files (e.g., gzip/Brotli), and optimize images (e.g., WebP format).
19. What are media queries and how are they used?
Answer:
Media queries apply CSS conditionally based on screen size, resolution, or device traits. Example:
@media (max-width: 600px) {
body { font-size: 14px; }
}20. What does Object.freeze() do in JavaScript?
Answer:
It makes an object immutable by preventing property additions, deletions, or changes (shallow freeze). Nested objects can still be modified. Compare to Object.seal(), which allows property changes.
21. How can you detect the user’s browser or platform in JavaScript?
Answer:
Use feature detection (e.g., if ('geolocation' in navigator)) instead of navigator.userAgent, which is unreliable. Libraries like Modernizr are less common now.
22. What are pseudo-classes in CSS?
Answer:
Pseudo-classes style elements based on state or position, like :hover, :focus, or :nth-child(n), enabling dynamic or structural styling.
23. What are ARIA roles, and how do they improve web accessibility?
Answer:
ARIA roles add semantic meaning to elements for assistive technologies. Example: <div role="button" aria-pressed="false"> makes a div behave like a button for screen readers, enhancing accessibility.
24. What is progressive enhancement?
Answer:
It’s a strategy where basic functionality and content are provided first, with advanced features added for capable browsers, ensuring accessibility and compatibility.
25. How does state management work in React, and what is the role of the useState hook?
Answer:
React manages state with hooks like useState, which creates a state variable and setter. Example: const [count, setCount] = useState(0); enables reactive updates to count.
26. How do ES modules differ from CommonJS modules?
Answer:
ES modules use import/export, are static, and support tree shaking. CommonJS uses require/module.exports, is dynamic, and is common in Node.js.
27. What does the DOMContentLoaded event mean?
Answer:
It fires when the HTML is fully parsed, excluding images and stylesheets, allowing scripts to safely manipulate the DOM.
28. How can you optimize a page with a large list of DOM elements?
Answer:
Use virtualization (e.g., react-window), lazy rendering, pagination, or requestAnimationFrame to minimize DOM updates and improve rendering performance.
29. What is the difference between synchronous and asynchronous JavaScript?
Answer:
Synchronous code blocks the main thread, executing line by line. Asynchronous code (using callbacks, promises, or async/await) allows non-blocking operations.
30. How is the :root pseudo-class useful in CSS?
Answer:
It targets the html element, often used to define CSS custom properties: :root { --main-color: #333; }, enabling global variable use.
31. What’s a race condition and how can it occur in JavaScript?
Answer:
It occurs when asynchronous operations produce unpredictable results due to timing. Example: multiple fetch calls updating shared state inconsistently. Use locks or sequencing to avoid.
32. What does the loading="lazy" attribute do on images?
Answer:
It defers image loading until the image is near the viewport, reducing initial page load time and bandwidth usage.
33. What’s the purpose of semantic HTML?
Answer:
It uses meaningful elements (<article>, <nav>) to improve accessibility, SEO, and code clarity, aiding screen readers and search engines.
34. What does position: sticky; do?
Answer:
It acts like relative until a scroll threshold is met, then behaves like fixed within its container, ideal for sticky headers.
35. Why should you avoid using innerHTML for inserting user content?
Answer:
It risks XSS vulnerabilities if unsanitized and can overwrite event listeners. Safer alternatives include textContent or document.createElement.
36. What is a memory leak in a web app?
Answer:
It occurs when unused objects remain referenced, preventing garbage collection and increasing memory usage, often from unremoved event listeners or lingering DOM nodes.
37. What’s the difference between event.preventDefault() and event.stopPropagation()?
Answer:
preventDefault() stops default browser actions (e.g., form submission). stopPropagation() prevents the event from bubbling or capturing to other elements.
38. How do you make an API call in modern JavaScript?
Answer:
Use fetch with async/await: async function getData() { const res = await fetch('/api'); return await res.json(); }.
39. What is tree shaking?
Answer:
It removes unused code during bundling, leveraging ES modules’ static structure. Tools like Webpack or Rollup optimize bundle size this way.
40. What does the tabindex attribute do?
Answer:
It controls focus order for keyboard navigation. Positive values set the Tab order; tabindex="-1" makes elements focusable only via script.
41. How can you secure a web application?
Answer:
Use HTTPS, sanitize inputs, escape outputs, set security headers (e.g., CSP, HSTS), validate forms, secure cookies with HttpOnly and Secure, and avoid exposing sensitive data.
42. What is the Shadow DOM?
Answer:
It encapsulates DOM and CSS in Web Components, isolating styles and markup to prevent conflicts, used in custom elements for true component isolation.
43. What’s the difference between GET and POST requests?
Answer:
GET retrieves data, appending parameters to the URL. POST sends data in the request body, suitable for updates or sensitive form submissions.
44. What is CSS Grid, and how can you create a basic grid layout?
Answer:
CSS Grid creates two-dimensional layouts. Example: display: grid; grid-template-columns: 1fr 1fr; makes a two-column grid with equal widths.
45. How do you handle errors in async/await JavaScript code?
Answer:
Use try/catch around await: try { const data = await fetch('/api'); } catch (error) { console.error(error); }.
46. How does HTTP/2 differ from HTTP/1.1?
Answer:
HTTP/2 uses multiplexing, header compression, and binary framing for faster, more efficient connections compared to HTTP/1.1’s text-based, sequential requests.
47. What is a promise chain?
Answer:
It’s a sequence of .then() calls where each promise’s output feeds the next, enabling sequential asynchronous operations: fetch('/api').then(res => res.json()).then(data => console.log(data));.
48. What is a template literal and how is it useful?
Answer:
Template literals use backticks (`) for multi-line strings and embedded expressions: `Hello, ${user.name}`. They simplify string concatenation and formatting.
49. What is hydration in web apps?
Answer:
In server-side rendered apps, hydration attaches client-side JavaScript interactivity to static HTML, enabling dynamic behavior after initial rendering.
50. What is unit testing in JavaScript, and how can you write a basic test using Jest?
Answer:
Unit testing verifies individual components. With Jest: test('adds 1 + 2', () => { expect(1 + 2).toBe(3); }); checks if 1 + 2 equals 3.
Hire Top LATAM Developers: Guide
We’ve prepared this guide that covers benefits, costs, recruitment, and remote team management to a succesful hiring of developers in LATAM.
Fill out the form to get our guide.
Advanced Level (3+ Years)
1. What are the phases of the browser event loop and how do they differ?
Answer:
The event loop processes macrotasks (e.g., setTimeout, I/O) and microtasks (e.g., Promises, MutationObserver). Microtasks run after the current task but before the next macrotask, allowing finer control over execution order.
2. How do you prevent XSS (Cross-Site Scripting) vulnerabilities in a web application?
Answer:
Escape user input, implement Content Security Policy (CSP), avoid innerHTML, sanitize inputs/outputs, and use frameworks with built-in escaping (e.g., React, Vue).
3. What is the difference between SSR and CSR in modern JavaScript frameworks?
Answer:
SSR renders HTML on the server for faster initial load and better SEO. CSR renders on the client via JavaScript, offering faster navigation after the initial load but slower first paint.
4. Explain how HTTP caching works and how you can control it.
Answer:
HTTP caching uses headers like Cache-Control (max-age, no-store), ETag, and Last-Modified to manage resource caching and revalidation, optimizing load times.
5. What are web components and how do they relate to the Shadow DOM?
Answer:
Web components are custom HTML elements created with customElements. Shadow DOM encapsulates their DOM and CSS, preventing style and markup conflicts with the global scope.
6. How can you mitigate performance issues caused by large JavaScript bundles?
Answer:
Use code splitting, lazy loading, tree shaking, dynamic imports, and tools like Webpack Bundle Analyzer to optimize and reduce bundle size.
7. What is the difference between window.onload and DOMContentLoaded?
Answer:
DOMContentLoaded fires after HTML parsing, excluding resources. window.onload waits for all resources (e.g., images, styles) to load, delaying execution.
8. What are the limitations of the localStorage API?
Answer:
It’s synchronous, blocks the main thread, stores ~5-10MB (browser-dependent) as strings, is accessible to all scripts on the domain (not secure), and is shared across tabs but not sessions.
9. How does a browser handle a large reflow and what causes it?
Answer:
Reflow recalculates layout due to DOM changes, CSS updates, or layout property reads (e.g., offsetTop). Batch reads/writes and use requestAnimationFrame to minimize reflows.
10. What are the security implications of using eval() in JavaScript?
Answer:
eval() executes arbitrary code, risking XSS vulnerabilities and performance issues. Avoid it in production; use safer alternatives like Function constructor if needed.
11. What is the difference between strict and non-strict mode in JavaScript?
Answer:
Strict mode enforces stricter rules, preventing silent errors, disallowing with, and setting this to undefined in non-method functions, improving code safety.
12. How does document.write() behave in modern browsers?
Answer:
It overwrites the DOM if used after loading, used rarely in legacy or server-side code. Use safer DOM methods like document.createElement or appendChild.
13. What are the drawbacks of single-page applications (SPAs)?
Answer:
SPAs face slower initial loads, SEO challenges without SSR, complex client-side state management, and potential memory leaks from retained state.
14. What is a memory leak and how can you detect it in a web app?
Answer:
A memory leak occurs when unused objects remain referenced, preventing garbage collection. Use Chrome DevTools’ Memory tab to take heap snapshots and identify leaks.
15. Explain the difference between blocking and non-blocking resources in web development.
Answer:
Blocking resources (e.g., sync scripts, large CSS) halt rendering. Non-blocking resources (e.g., async/defer scripts, lazy-loaded images) allow rendering to continue.
16. How does browser prefetching work?
Answer:
Browsers prefetch predicted assets or use or to load resources early, reducing latency.
17. What is a race condition in JavaScript and how do you prevent it?
Answer:
A race condition occurs when async operations interfere due to timing. Prevent with Promise chaining, async/await, or mutex-like locks for shared state.
18. What are advanced testing strategies for web applications, and how do you implement end-to-end testing with Cypress?
Answer:
Advanced testing includes unit, integration, and E2E tests. Cypress runs E2E tests in a browser: cy.visit('/').get('button').click(); simulates user interactions.
19. What are the benefits of using immutable data structures?
Answer:
They simplify change detection, prevent unintended state mutations, and support concurrent programming. Use libraries like Immutable.js or Immer for enforcement.
20. How can you improve time to first byte (TTFB)?
Answer:
Optimize server response time, use CDNs, cache dynamic content, reduce redirects, and enable compression (e.g., gzip/Brotli) to lower TTFB.
21. What are the different types of web workers and how are they used?
Answer:
Dedicated Workers run tasks for a single page, Shared Workers share across tabs, and Service Workers handle network caching. They enable background processing without UI blocking.
22. Explain the Same-Origin Policy and how CORS overcomes it.
Answer:
Same-Origin Policy restricts cross-origin resource access. CORS allows controlled access via server headers like Access-Control-Allow-Origin.
23. What is hoisting in JavaScript and how does it affect variable declarations?
Answer:
Hoisting moves declarations to the top of their scope. var is initialized with undefined; let/const are hoisted but inaccessible until declared (Temporal Dead Zone).
24. How does the browser handle repaint vs reflow?
Answer:
Repaint updates visuals (e.g., color) without layout changes. Reflow recalculates layout (e.g., size changes), which is more costly. Minimize reflows with batched updates.
25. What are some best practices to ensure accessibility (a11y) in a web app?
Answer:
Use semantic HTML, ARIA roles, high color contrast, keyboard navigation, focus management, and test with screen readers like NVDA or VoiceOver.
26. What are HTTP/2 multiplexing and header compression?
Answer:
Multiplexing allows multiple requests over one TCP connection. Header compression (HPACK) reduces metadata size, improving performance over HTTP/1.1.
27. How can you prevent CSRF attacks?
Answer:
Use anti-CSRF tokens, SameSite cookies, and avoid GET for state changes. Validate Origin or Referer headers for sensitive requests.
28. What is a micro frontend architecture?
Answer:
It breaks a web app into independent frontend components managed by different teams, improving scalability, maintainability, and deployment flexibility.
29. What is the purpose of a build step in modern web development?
Answer:
It transforms code via bundling, transpiling (Babel), minifying, and optimizing assets using tools like Webpack or Vite for production-ready deployment.
30. What is a serverless architecture, and how does it benefit web applications?
Answer:
Serverless runs apps without managing servers (e.g., AWS Lambda). Benefits include auto-scaling, reduced costs, and simplified operations for dynamic workloads.
31. What is a content delivery network (CDN) and how does it improve performance?
Answer:
A CDN serves static assets from geographically distributed servers, reducing latency by delivering content from the nearest location to the user.
32. Explain the difference between monolithic and decoupled (headless) CMS.
Answer:
Monolithic CMSs handle content and rendering. Headless CMSs manage content only, exposing it via APIs for flexible frontend integration.
33. What is the Priority Hints API?
Answer:
It hints at resource priority using fetchpriority (experimental in some browsers). Example: 
34. What is the Web Crypto API, and how can it be used for secure operations in a web app?
Answer:
The Web Crypto API provides cryptographic functions like encryption and hashing. Example: crypto.subtle.digest('SHA-256', data) generates a secure hash.
35. What is Preact and when would you use it over React?
Answer:
Preact is a lightweight (~3KB) React alternative with a similar API but fewer features (e.g., limited synthetic events). Use it for performance-critical apps or PWAs with size constraints.
36. How can you manage global state in a large web application?
Answer:
Use Redux, Zustand, or Context API. Organize state into modular slices, use selectors for performance, and middleware for async logic.
37. What are WebSockets and how are they different from HTTP?
Answer:
WebSockets enable persistent, full-duplex communication for real-time apps. HTTP is stateless, request-response based, and not suited for real-time.
38. What are some key metrics to monitor for web performance?
Answer:
Core Web Vitals (LCP, FID, CLS), TTFB, FCP, TTI, and JS execution time measure rendering speed and user interaction quality.
39. What is a polyfill and when should you use one?
Answer:
A polyfill provides modern API support for older browsers (e.g., Promise, fetch). Use them for compatibility in legacy environments.
40. What are the main differences between REST and GraphQL?
Answer:
REST uses fixed endpoints, often over-fetching data. GraphQL uses a single endpoint, allowing clients to query specific data, reducing over-fetching.
41. How does lazy hydration work in modern frontend frameworks?
Answer:
Lazy hydration delays JavaScript interactivity for non-visible components in SSR apps, improving initial load performance.
42. What is the role of a reverse proxy in web architecture?
Answer:
A reverse proxy (e.g., Nginx) handles requests, enabling load balancing, SSL termination, caching, and security filtering for backend servers.
43. What are the key features of a Progressive Web App (PWA), and how do you implement them?
Answer:
PWAs offer offline support, push notifications, and installability. Implement with a service worker for caching and a manifest for app metadata.
44. What is Intersection Observer API and how is it useful?
Answer:
It monitors elements entering/exiting the viewport, enabling efficient lazy loading, infinite scroll, and animations without scroll event listeners.
45. What is a rendering bottleneck and how do you identify one?
Answer:
A rendering bottleneck slows the UI thread. Use Chrome’s Performance tab to profile frames, identify long tasks, and optimize paint/reflow times.
46. What are module federation and its benefits in micro frontends?
Answer:
Module federation (Webpack 5) shares runtime modules across independently built apps, enabling micro frontends with separate deployments and reduced redundancy.
47. How do you ensure your web app scales under high traffic?
Answer:
Use CDNs, aggressive caching, SSR/static rendering, optimized APIs, load balancers, and monitoring to handle high traffic efficiently.
48. How does Redux manage state in large React applications, and what are its key concepts?
Answer:
Redux centralizes state in a store, using actions and reducers for updates. Key concepts: immutable state, pure reducers, middleware for async logic.
49. How do you measure and improve time to interactive (TTI)?
Answer:
TTI measures when a page is fully interactive. Improve with deferred JS, code splitting, async loading, and minimizing main thread work.
50. What is a WebAssembly module and when would you use it in a web app?
Answer:
WebAssembly is a binary format for high-performance code (e.g., C/C++). Use it for performance-critical tasks like games, video editing, or complex computations.
