The Frontend Interview

This repo contains a collection of topics which are frequently asked in a Frontend interview (suitable for Entry level, Mid-senior level and Senior level). The questions/topics are categorized based on different areas.

Some questions might be interrelated and don't follow a specific order.

If you have got more questions, feel free to raise a PR to add them to this list. Incase of any clarifications raise an issue.

Browser internals

How the html gets rendered in the browser ? What happens when we enter a url in the address bar ?
Stages in browser rendering
- DOM & CSSOM construction
- Render tree construction
- Layout tree construction
- Paint phase
- Composite Paint layer
Parser blocking content
Render blocking content
How could we eliminate parser and render blocking content
Critical section of a page
What is DOMContentLoaded?
Difference b/w window.onload vs DOMContentLoaded
Type of scripts - sync, async, defer
- Order of script execution
- What's the order of execution for following 3 sync scripts appearing in order? assume 1KB takes 1ms to download.
  - script 1 - 30 KB
  - script 2 - 20KB (cached)
  - script 3 - 5KB
Does font affect rendering and layout phases ? If yes, how to minimize the effect ?
How can we lazy load images ?
Best practices to place the script and styles in the HTML document ?
What is html quirks mode ?
How does transform doesn't trigger reflow and repaint ?
Mention some Web APIs that you have used. How is it different from javascript functionality?

HTML Questions - Part 1 - Basics

What does <!DOCTYPE html> mean ? What happens if we don't specify it ?
Uses of <meta> tag
Semantic HTML tags
- <article>
- <aside>
- <details>
- <figcaption>
- <figure>
- <footer>
- <header>
- <main>
- <mark>
- <nav>
- <section>
- <summary>
- <time>
Block and Inline elements
<canvas> vs <svg>
HTML element vs HTML Node
innerText vs innerHTML
What is progressive rendering ?
srcset attribute in <img> tag
Image lazy loading
How do you serve a page with content in multiple languages ?
The use of hreflang in <link> tag.
What is event bubbling ?
How event capturing and bubbling works ?
What are some use cases of event capturing ?
Difference between event.stopPropagation and event.preventDefault ?
How do we invalidate a resource file (say html, css, js..) ? Explain about cache-control header.
How do we avoid unnecessary layout shifts ?

CSS Questions - Part 1 - Basics

Selector specificity
- How could we override a style which has !important ? Is it a best practice to use multiple !important styles ?
- What's the output of the following code ?

     <style>
       div :nth-child(1) {
         color: green;
       }
       div span {
         color: red;
       }
     </style>
     <div>
       <span>Text</span>
     </div>

Positioning in CSS
- static
- relative
- absolute
- sticky
- fixed
How could we place a content at the bottom right corner of the viewport irrespective of the scroll position ?
- Any approaches to achieve the same without fixed type ?
How do we animate a square (50px*50px) from the left to right end of the screen ?
- What are the browser internal phases which are triggered during animation ?
- Why do you prefer left over translateX and vice versa ?
Pseudo elements vs Pseudo classes
What are the ways we could center align an element both horizontally and vertically ?
- How could we do it with vertical-align and how does vertical-align work ?
What is box-model in CSS ?
What is box-sizing? Difference b/w border-box and content-box
Difference b/w inline-block vs inline
How do we ensure responsive layout in mobile ?
Use of @media query ?
What's the use of z-index ? And stacking context ?
Can you apply z-index to a static element ?
Difference b/w visibility: hidden and display: none . Which internal stages are affected if we change the values?
Difference b/w div > span , div span , div ~ span , div + span
If two selectors have same specificity, which selector takes precedence ?
How does float and clear work ?

Javascript Questions - Part 1 - Basics

Difference b/w let ,var and const
What's the output of the following ?

        let a = 100;
        var b = 200;

        {
          let a = 300;
          var b = 400;
          console.log(a, b);
        }

        console.log(a, b);

What's the output ?

    let a = 100;
    var b = 200;

    function run() {
      console.log(a, b);

      let a = 300;
      var b = 400;
      console.log(a, b);
    }

    run();
    console.log(a, b);

What's the output ?

let a = 100;
var b = 200;

function run() {
  console.log(b);

  let a = 300;
  var b = 400;
  console.log(a, b);
}

run();
console.log(a, b);

What's the output ?

for (var i = 0; i < 5; i++) {
  setTimeout(() => {
    console.log(i);
  }, 1000);
}

What's the output ?

for (let i = 0; i < 5; i++) {
  setTimeout(() => {
    console.log(i);
  }, 1000);
}

Why is the above output are different ? Convert the code of Question 5 to match the same output as Question 6.
What's the output ?

let i = 0;
for (; i < 5; i++) {
  setTimeout(console.log, 1000, i);
}

Type conversions in Javascript.
Difference b/w == and === ?
What's the output? Be familiar with the order of type conversions. You don't have to tell the exact answer, just explaining the order would be enough

1 + [] == true;
1 + [] === true;

What's prototype in Javascript ?
Implement the following using prototype in Javascript with es5 standards without class keyword.
Define a private variable address in the class Student with es5 standard.
Difference between an Object and Map which would you prefer for implementing dictionary lookup and why ?
Implement a polyfill for Array.prototype.filter
Implement a polyfill for Array.prototype.flat
Implement a polyfill for Array.prototype.reduce // Refer https://jsvault.com/
What is closure and lexical scoping

20 Write a function to get the following output.

sum(10)(20)(30)(); //output: 60

Write a function to detect the circular dependency

let c = {
   level: 'c',
   property: null
};

let b = {
  level: 'b';
  property: c
};

let a = {
  key: 'a',
  property: b
};

a.property.property.property = b;

Write a function to check whether the opening/close braces match

let code = "[()]{}{[()()()}”;

Write a polyfill for debounce and throttle
Difference b/w Function.prototype.call , Function.prototype.bind and Function.prototype.apply
Implement a polyfill for Promise
Implement a polyfill for setTimeout
Implement a polyfill for Promise.all , Promise.race , Promise.any
What's the output of the following ?

const promise = new Promise((resolve, reject) => {
  resolve("output");
  reject("error");
});
promise.then((result) => console.log(result));
promise.catch((error) => console.log(error));

Write a function to detect whether a API request gets resolved in 2000 ms
Write a function to get the success or failed result of all the async tasks.

Say: API 1, API 2, API 3 => get all the results/errors irrespective of whether its resolved or failed.
Take the following quiz on Promises: https://www.codingame.com/playgrounds/347/javascript-promises-mastering-the-asynchronous/its-quiz-time
What is event loop ?
Explain the output of the following code in terms of event loop and call stack.

console.log(1);

function fun() {
  console.log(2);

  setTimeout(() => {
    console.log(3);
  }, 500);

  setTimeout(() => {
    console.log(3);
  }, 0);

  //assume the request resolves in 100 ms.
  fetch("/names").then(() => console.log(res));

  Promise.resolve(5);

  console.log(6);
}

run();
console.log(7);

What is message queue and task queue in event loop ?
What are the types of caching ?
Difference b/w http cache and service worker cache
Is javascript multi threaded ?
How async operations are handled in JS ?
What's a service worker ?
Life cycles of a Service worker.
What's a web worker ?
Difference b/w a callback and a Promise.

HTTP

What are the known http request methods ?
Use case for PATCH
Status code types
What is Content Type in request and response ?
Last modified time and Etag in request.
Difference b/w http and https ?
Difference b/w http 1.1 vs http 2 ?

Security

Explain XSS and how to prevent it ?
Explain CSRF and how to prevent it ?
Explain CORS and why do we need it ?
Explain IFRAME options
How do we ensure security in web socket connections ?
Setting values via innerHTML vs innerText
Explain about Cookies and sessions.

Design round questions

Implement a tool tip with pure css
Design a snake and ladder game with two players for Player A and Player B
How would you design a file explorer that you have in Atom or VS code editor like below ?

Implement a polyfill for a Promise.
Implement an auto-complete component like google search.
Implement a Super Mario game within a board of 64*64 cells with mushrooms and poisons at random places. Whenever the Mario picks up the mushroom, the places of the mushrooms and poisons should change and the score should be tracked.
How would you design a lazy loading list component like LinkedIn/Facebook feed list?
Design a webapp like Whatsapp Web. Explain the component design architecture.
Design a page like Google Chrome Downloads which should also handle the file downloading functionality.

Design a whiteboard which should work across multiple devices. How would you convert data of the text/drawings done on the board into digital information ?

How would you design the front page of a news article website ? What parameters would you keep in consideration ? How would you optimize it ?
How would you design a system that will Cache the last 10 requests made in an application and lookup the Cache if request is already in Cache?
How would you track the Framework errors in an application ?
What features do you consider before deploying an application in production like minification, uglify, route splitting... ?
Implement a function which deep clones an Object or an Array of Objects.
Few more questions can be found here.

Akshaay9/the-frontend-interview