Advanced Web Dev Quiz

This repo is related to my FrontendMasters course.
You'll find the questions and additional resources to get a better understanding of the concepts.

This Advanced Web Dev Quiz covers a wide range of the things web devs get to deal with on a daily basis. The goal is to (re)introduce you to certain concepts that you may have forgotten over the years or simply don't get exposed to that often 🙂

Have fun, and hopefully you'll learn something new today! Good luck! 💪

• Question 1: async and defer execution order
• Question 2: Rendering Pipeline and Compositing
• Question 3: Resolving Domain Requests
• Question 4: Call Stack & Event Loop
• Question 5: Resource Hints
• Quesiton 6: Object Reference & Destructuring
• Question 7: PerformanceNavigationTiming
• Question 8: Cache Directives
• Question 9: Garbage Collection
• Question 10: Animation Cost
• Question 11: Event Propagation
• Question 12: CSS Specificity
• Question 13: WeakMap
• Question 14: Web Vitals
• Question 15: Content Security Policy
• Question 16: Referrer Policies
• Question 17: Generators
• Question 18: Promise Methods
• Question 19: Back-Forward Cache
• Question 20: XSS, MITM, CSRF, Clickjacking
• Question 21: Font Strategies
• Question 22: Cookies
• Question 23: CSS Pseudo Selectors
• Question 24: Strict-Transport-Security
• Question 25: Render Layers
• Question 26: Image Formats
• Question 27: CORS
• Question 28: Event Loop
• Question 29: HTTP/1, HTTP/2, HTTP/3
• Question 30: this keyword

• A. <script defer src="defer1.js" /> (loads in 300ms)
• B. <script defer src="defer2.js" /> (loads in 200ms)
• C. <script async src="async1.js" /> (loads in 300ms)
• D. <script async src="async2.js" /> (loads in 50ms)
• E. <script async defer src="asyncdefer1.js" /> (loads in 60ms)

• A. The render tree contains all elements from the DOM and CSSOM combined
• B. Compositing is the process of separating layers based on z-index, which are then combined to form the final image displayed on the screen
• C. The layout process assigns colors and images to the visual elements in the render tree
• D. The composting process happens on the compositor thread
• E. Elements that aren't visible on the page, for example display: hidden, aren't part of the DOM tree

- Browser sends request to [A]
- [A] queries [B]
- [B] responds with [C] IP address
- [A] queries [C]
- [C] responds with [D] IP address
- [A] queries [D]
- [D] responds with website's [E]

1. Recursive DNS Resolver
2. Root Name Server
3. IP Address
4. Top Level Domain Name Server
5. Autoritative Name Server

setTimeout(() => console.log(1));
Promise.resolve().then(() => console.log(2));
Promise.resolve().then(() => setTimeout(() => console.log(3));
new Promise(() => console.log(4));
setTimeout(() => console.log(5));

• A. 1 2 3 4 5
• B. 1 5 2 4 3
• C. 3 2 4 1 5
• D. 4 2 1 5 3
• E. 2 4 3 1 5

• A. dns-prefetch
• B. preconnect
• C. prefetch
• D. preload

1. prioritizes fetching of critical resources needed for the current navigation
2. performs domain name resolution in the background
3. proactively performs DNS resolution and TCP/TLS handshake
4. requests non-critical resources in the background

const member = { 
  name: "Jane", 
  address: { street: "101 Main St" }
};
const member2 = { ...member };
member.address.street = "102 Main St";
member.name = "Sarah";

console.log(member2);

• A. { name: "Jane", address: { street: "101 Main St" }}
• B. { name: "Jane", address: { street: "102 Main St" }}
• C. { name: "Sarah", address: { street: "101 Main St" }}
• D. { name: "Sarah", address: { street: "102 Main St" }}

• A. loadEventStart
• B. domComplete
• C. domContentLoadedEventStart
• D. fetchStart
• E. connectEnd
• F. domInteractive

• A. no-cache
• B. must-revalidate
• C. no-store
• D. private
• E. stale-while-revalidate

1. validates a stale response with the origin server before using it
2. serves stale content while validating the cached response with the origin server
3. doesn't cache any part of the request or response
4. validates a cached response with the origin server before using it, even if it is still fresh
5. prevents caching on shared caches

function addMember(name) {
  return { name, createdAt: Date.now() }
}

let obj1 = addMember("John");
let obj2 = addMember("Sarah");

obj1.friend = obj2;
obj2.friend = obj1;

obj1 = null;
obj2 = null;

• A. obj1 and obj2 cannot be garbage collected, leading to a memory leak
• B. obj1 and obj2 will be garbage collected immediately after setting them to null
• C. obj1 and obj2 will only be garbage collected after closing the browser tab
• D. obj1 and obj2 can be garbage collected during the next garbage collection cycle

• A. width: Layout, Paint, Composite
• B. opacity: Paint, Composite
• C. background-image: Composite
• D. left: Layout, Paint, Composite
• E. transform: Paint, Composite

<div class="outer">
  <div class="inner">
    <button>Click me!</button>
  </div>
</div>

outer.addEventListener("click", () => log("A"), true);
outer.addEventListener("click", () => log("B"));
inner.addEventListener("click", () => log("C"), true);
inner.addEventListener("click", (e) => {
   log("D");
   e.stopPropagation();
   log("E");
});
button.addEventListener("click", () => log("F"));
button.addEventListener("click", () => log("G"), true);

• A. A B C D E F G
• B. A C G F D
• C. B D E F G C A
• D. A C G F
• E. A C G F D E

• A. div h1.large-text::before
• B. div h1:first-child
• C. h1:not(.small-text)
• D. .large-text:nth-child(1)
• E. h1.large-text[id="title"]
• F. h1.large-text#title

const userTokenMap = new WeakMap();

let user = { 
  name: "Jane Doe", 
  age: 24 
};

userTokenMap.set(user, "secret_token");

• A. userTokenMap implements the iterator protocol
• B. When setting user to null, userTokenMap returns 0
• C. If the user object is set to null, its userTokenMap  entry can be be garbage collected.
• D. [...userTokenMap] returns an array of userTokenMap entries

• A. TTFB
• B. FID
• C. TTI
• D. TBT
• E. CLS
• F. INP

1. the time it takes for a webpage to respond to a user's first interaction.
2. the time that the main thread is blocked from responding to user input.
3. the average time it takes for a webpage to update its visuals after a user interacts with it. 
4. the time it takes for the server to respond to a request and start sending data back to the client
5. the time it takes for a webpage to be fully loaded and responsive to user input.
6. the stability of a webpage's layout, or the unexpected layout shifts that occur on a webpage as it loads.

default-src "none"; script-src "self"; img-src "self" example.com; style-src fonts.googleapis.com; font-src fonts.gstatic.com;

• A. <script src="/js/app.js"></script>
• B. fetch("https://api.website.com/data")
• C. @font-face { url("fonts/my-font.woff") }
• D. <img src="data:image/svg+xml;..." />
• E. <style>body { font-family: 'Roboto' }</style>
• F. <iframe src="https://embed.example.com"></iframe>
• G. <link rel="stylesheet" href="https://fonts.googleapis.com..>
• H. <video src="https://videos.example.com/..."></video>

• A. rel="noopener" is used to prevent the original page from accessing the window object of the newly opened page
• B. rel="noreferrer" can be used to prevent the newly opened page from accessing the window object of the original page
• C. rel="noopener" and rel="noreferrer" can only be used with HTTPS
• D. rel="noopener" can be used to prevent tabnabbing
• E. The default Referrer-Policy is no-referrer-when-downgrade

function* generatorFunc() {
  const result = yield "My input!";
  console.log("In log:", result);
  return "All done!"
};

const it = generatorFunc();

• A. it.next()
• B. it.next("My input!") it.next()
• C. it.next() it.next("My input!")
• D. it.next() it.next()

const promises = [
   new Promise(res => setTimeout(() => res(1), 200),
   new Promise(res => setTimeout(() => res(2), 100),
   new Promise((_, rej) => setTimeout(() => rej(3), 100),
   new Promise(res => setTimeout(() => res(4), 300)
];

Promise[❓]
   .then(res => console.log("Result: ", res))
   .catch(err => console.log("Error: ", err)

• A. all
• B. any
• C. race
• D. allSettled

1. Result: 2
2. Error: 3
3. Result: [{}, {}, {}, {}]
4. Result: 2

• A. unload
• B. pagehide
• C. onbeforeunload
• D. pageshow
• E. All of the above
• F. None of the above

• A. XSS
• B. CSRF
• C. UI Redressing
• D. MITM

1. allows attackers to inject malicious scripts into web pages viewed by others
2. tricks users into interacting with disguised or hidden elements
3. tricks users into executing unwanted actions by exploiting their authenticated session
4. allows attackers to intercept and modify communication between two parties without their knowledge

• A. font-display: block
• B. font-display: swap
• C. font-display: fallback
• D. font-display: optional
• E. font-display: auto

1. temporarily render an invisible font until the custom font has been downloaded
2. use a fallback font while the custom font is downloading, switch to the custom font when available
3. only use the custom font if it is available, otherwise use a fallback font
4. allows the browser to determine the most appropriate behavior for font loading
5. use the custom font if it is available, use a fallback font if the custom font is not available

Set-Cookie: my-cookie="value"; Domain="website.com"; Secure; HttpOnly;

• A. This cookie is accessible from www.website.com, but not from blog.website.com
• B. This cookie can only be set client-side on the website.com domain
• C. This cookie gets treated like a session cookie
• D. This cookie will be sent when navigating from another website to www.website.com

<div>
  <ul>
    <li>One</li>
    <ul>
      <li>Two</li>
      <li>Three</li>
    </ul>
  </ul>
  <ul>
    <li>Four</li>
  </ul>
</div>

• A. ul:first-child > li
• B. ul:first-child + li
• C. ul:first-child > li:first-child
• D. ul:first-of-type > li:first-of-type
• E. ul:first-child + li:first-child

Strict-Transport-Security: max-age=31536000; includeSubdomains;

• A. The header enforces HTTPS for one year on the domain and its subdomains
• B. When max-age expires, browsers will default to HTTP
• C. The max-age is refreshed every time the browser reads the header
• D. Insecure requests to subdomains are allowed

• A. z-index: 1
• B. translate3d: (0, 0, 0)
• C. will-change: transform
• D. transform: rotate(45deg)
• E. position: fixed
• F. position: absolute

• A. JPEG
• B. PNG
• C. WebP
• D. AVIF

1. Both lossy and lossless compression, supports HDR and WCG, supports transparency
2. Both lossy and lossless compression, supports transparency, supports progressive rendering
3. Lossless compression, high quality, supports transparency, larger file size
4. Lossy compression, supports progressive rendering

Access-Control-Allow-Origin: https://www.website.com
Access-Control-Allow-Headers: Content-Type
Access-Control-Allow-Methods: *
Access-Control-Expose-Headers: X-Custom-Header
Access-Control-Max-Age: 600

• A. A preflight request is required
• B. Only requests from https://www.website.com are allowed
• C. Requests with cookies are allowed
• D. The actual response is cached for 600ms
• E. X-Custom-Header will be the only included response header
• F. GET, POST, PATCH and PUT methods are allowed, but not DELETE

setTimeout(() => console.log(1));

(async () => {
  console.log(2);
  await Promise.resolve();
  console.log(3);
})()

Promise.resolve().then(() => Promise.resolve().then(() => console.log(4)))

• A. 1 2 3 4
• B. 2 4 3 1
• C. 2 3 4 1
• D. 2 3 1 4

• A. HTTP/2 allows multiple requests and responses concurrently over a single TCP connection
• B. HTTP/3 can only be used with HTTPS
• C. HTTP/2 is backward compatible with HTTP/1.1
• D. HTTP/1.1 requires multiple TCP connections to process multiple requests simultaneously

const objA = { 
  type: "A",
  foo() { 
    console.log(this.type) 
  }
}

const objB = { 
  type: "B",
  foo: objA.foo,
  bar: () => objA.foo(),
  baz() { objA.foo() }
}

objB.foo();
objB.bar();
objB.baz(); 

• A. A B B
• B. B A A
• C. A A A
• D. A undefined A
• E. B undefined B