YourAppURL

Replace the value you are getting underneath the app above.

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

Prefetching fetches an entire page before it's clicked on.

Prefetching fetches a linked asset that may eventually be needed.

Prefetching fetches all the assets on the page of an embedded hyperlink. 

```html
<html>
 <head>
 </head>
 <body>
 <link rel="prefetch" href="https://www.educative.io/static/favicons/favicon-whiteV2.png" />
 <a href="https://www.educative.io/static/favicons/favicon-whiteV2.png">Educative's white logo</a>
 </body>
</html>
```

```html
<html>
 <head>
 </head>
 <body>
 <link rel="prefetch" href="/udata/XJY2n0k8kLJ/Logo_IconOnly_Blue.png" />
 <a href="https://www.educative.io/static/favicons/favicon-whiteV2.png">Educative's blue logo</a>
 </body>
</html>
```

```html
<html>
 <head>
 </head>
 <body>
 <link rel="dns-prefetch" href="https://www.educative.io/static/favicons/favicon-whiteV2.png" />
 <a href="https://www.educative.io/static/favicons/favicon-whiteV2.png">Educative's white logo</a>
 </body>
</html>
```

Suppose you are a developer at Educative. You are assigned a task to prefetch the image at "https://www.educative.io/static/favicons/favicon-whiteV2.png" on the following HTML page:
```html
<html>
 <head>
 </head>
 <body>
 <a href="https://www.educative.io/static/favicons/favicon-whiteV2.png">Educative's white logo</a>
 </body>
</html>
```
How would you do it?

Suppose you are a developer at Educative. You are assigned a task to prefetch the image at “<a href="https://www.educative.io/static/favicons/favicon-whiteV2.png">https://www.educative.io/static/favicons/favicon-whiteV2.png</a>” on the following HTML page:
<pre><code class="language-html">&lt;html&gt;
 &lt;head&gt;
 &lt;/head&gt;
 &lt;body&gt;
 &lt;a href=&quot;https://www.educative.io/static/favicons/favicon-whiteV2.png&quot;&gt;Educative's white logo&lt;/a&gt;
 &lt;/body&gt;
&lt;/html&gt;
</code></pre>
How would you do it?

Resolve the domain name against a given IP address ahead of time.

Resolve the IP address of the domain name of a page that the user might navigate to next.

Change browser default settings to use the iterative DNS resolution model because it is faster.

Suppose your team develops an app using regular web technologies. They then use Cordova and deploy it to the app store and play store. What sort of app is this?

Suppose your team develops an app using regular web technologies. They then use Cordova and deploy it to the app store and play store. What sort of app is this?

A progressive web app is developed using web technologies, whereas a hybrid app is not.


Hybrid apps are available on the play store/app store, but progressive web apps are not.


Hybrid apps require a wrapper to work on all platforms, whereas progressive web apps do not.


Which of the following is a difference between hybrid apps and progressive web apps?


_You can choose multiple answers_.

Which of the following is a difference between hybrid apps and progressive web apps?
You can choose multiple answers.

Suppose you lead a team of developers. You have a very low budget and a short amount of time, but your goal is to get an app out that is available on all platforms. What sort of app would you make?


Suppose you lead a team of developers. You have a very low budget and a short amount of time, but your goal is to get an app out that is available on all platforms. What sort of app would you make?

Service workers use which language?

Service workers allow progressive web apps to work on very slow networks.

Service workers allow progressive web apps to work on very slow networks.

Service workers have access to a device’s offline storage.


Service workers have access to a device’s offline storage.

We have learned that prefetching, preloading, prerendering, and service workers can all speed up your site. Let's take a quiz to see how much you've really learned!


Introduction

Network

Security

Optimizing Loading Performance

Optimizing Browser Rendering Performance

Search Engine Optimization

System Design

APIs

Testing

Version Control

Task Runners & Bundlers

Conclusion

Prefetching, Preloading & Service Workers: Quiz