YourAppURL

Replace the value you are getting underneath the app above.

The ultimate guide to web development interviews. Developed by FAANG engineers, practice with real-world interview questions covering network security, system design, SEO, APIs, and more.

oct6.tar.gz

server

JavaScript

Grunt

webpack

webpack-loaders

Grunt-eslint

ProgressiveRendering

webpack-code-splitting

This course compiles a comprehensive range of questions that are most likely to be asked during the frontend interview. Where many interview prep courses focus on data structures and algorithms, this course focuses on a variety of topics from network security to system design.

In this course, you will solve interview questions that cover general aspects of web development. You’ll start by going over network security and optimization techniques for load balancing and browser rendering. After that, you’ll move on to interview questions around SEO, APIs, and system design.

Overall, these are questions that are often overlooked, but they can really make you stand out from your peers. By the end of this course, you will have the confidence and ability to go in and ace that interview.

Web Development Interview Handbook

## What a browser is made of

The browser is made of a few different components, many of which play a critical role in rendering.
- **User interface:** All the interactive elements, including buttons on a browser, except for the window where the page is displayed.


- **Browser engine:** The go-between for the UI and the rendering engine.
- **Rendering engine:** Renders the requested content.

- **Networking:** Handles network calls, such as HTTP requests, which we studied previously.
- **UI backend:** Used for drawing basic widgets, such as list boxes and windows. It exposes a generic interface that uses OS methods underneath.

- **JavaScript engine:** Parses and executes JavaScript code.
- **Data storage:** The browser has some persistent memory available to store information like cookies, passwords, and history. 

## The importance of rendering performance
Web user’s today expect that the pages they visit will be interactive and smooth, and that’s where you need to increasingly focus your time and effort. Pages should not only load quickly, but also run well; scrolling should be stick-to-finger fast, and animations and interactions should be silky smooth.

To write performant sites and apps, you need to understand how HTML, JavaScript, and CSS are handled by the browser, and ensure that the code you write (and the other third-party code you include) runs as efficiently as possible.


## 60fps and device refresh rates

Most devices today refresh their screens sixty times a second. If there’s an animation or transition running, or the user is scrolling the pages, the browser needs to match the device’s refresh rate and put up one new picture, or frame, for each of those screen refreshes.

So, each of those frames has a budget of just over 16ms (1 second / 60 = 16.66ms). In reality, however, the browser has housekeeping work to do, so the frames really have a budget of 10ms. When you fail to meet this budget, the frame rate drops, and the content judders on screen. This is often referred to as **jank**, which negatively impacts the user’s experience.



## Rendering engines

There are a few different types of rendering engines used by different browsers. Rendering engines display whatever information was requested. While HTML, XML documents, and images are all supported by default in all browsers, other files like PDFs can be rendered via plugins and extensions added onto a browser.



## HTML parsing
As the rendering engine receives the HTML file, it starts ‘parsing’ it into a ‘parse tree.’ Essentially, all the elements of the HTML file are converted into a ‘tree’ called the DOM.


### DOM
The DOM (Document Object Model) is the 'object representation' of the HTML document. The DOM is created before scripts or external factors make any changes to it.


# What a browser is made of

The browser is made of a few different components, many of which play a critical role in rendering.
- **User interface:** All the interactive elements, including buttons on a browser, except for the window where the page is displayed.


- **Browser engine:** The go-between for the UI and the rendering engine.
- **Rendering engine:** Renders the requested content.

- **Networking:** Handles network calls, such as HTTP requests, which we studied previously.
- **UI backend:** Used for drawing basic widgets, such as list boxes and windows. It exposes a generic interface that uses OS methods underneath.

- **JavaScript engine:** Parses and executes JavaScript code.
- **Data storage:** The browser has some persistent memory available to store information like cookies, passwords, and history. 

# The importance of rendering performance
Web user’s today expect that the pages they visit will be interactive and smooth, and that’s where you need to increasingly focus your time and effort. Pages should not only load quickly, but also run well; scrolling should be stick-to-finger fast, and animations and interactions should be silky smooth.

To write performant sites and apps, you need to understand how HTML, JavaScript, and CSS are handled by the browser, and ensure that the code you write (and the other third-party code you include) runs as efficiently as possible.


# 60fps and device refresh rates

Most devices today refresh their screens sixty times a second. If there’s an animation or transition running, or the user is scrolling the pages, the browser needs to match the device’s refresh rate and put up one new picture, or frame, for each of those screen refreshes.

So, each of those frames has a budget of just over 16ms (1 second / 60 = 16.66ms). In reality, however, the browser has housekeeping work to do, so the frames really have a budget of 10ms. When you fail to meet this budget, the frame rate drops, and the content judders on screen. This is often referred to as **jank**, which negatively impacts the user’s experience.



# Rendering engines

There are a few different types of rendering engines used by different browsers. Rendering engines display whatever information was requested. While HTML, XML documents, and images are all supported by default in all browsers, other files like PDFs can be rendered via plugins and extensions added onto a browser.



# HTML parsing
As the rendering engine receives the HTML file, it starts ‘parsing’ it into a ‘parse tree.’ Essentially, all the elements of the HTML file are converted into a ‘tree’ called the DOM.


## DOM
The DOM (Document Object Model) is the 'object representation' of the HTML document. The DOM is created before scripts or external factors make any changes to it.


Parsing and page rendering are important concepts to know for any front-end interview. Let's have a quick refresher.


Introduction

Network

Security

Optimizing Loading Performance

Optimizing Browser Rendering Performance

Search Engine Optimization

System Design

APIs

Testing

Version Control

Task Runners & Bundlers

Conclusion

Parsing & Page Rendering

What a browser is made of

The importance of rendering performance