JS with NETFLIX
Browser acts as an interpreter to the scripts we provide It reads line by line and compile and execute it as a web page over browser.
It is the third layer of the layer cake of standard web technologies, two of which are HTML, CSS these three together helps to make a good web applications. It has Object-Oriented properties too.
- Autocomplete: The search box gives suggestions, based on what the user has already typed.
- Fixes layout issues to avoid the overlapping of elements on the page.
- Adds animation to the page to make it more attractive.
CASE STUDY ON NETFLIX
- Loading and Time-to-Interactive decreased by 50% (for the logged-out desktop homepage at Netflix.com).
The area optimized for performance by the Netflix developers was the logged-out homepage, where users come to sign-up or sign-in to the site.
All of Netflix’s webpages are served by server-side rendered React, serving the generated HTML and then serving the client-side application, so it was important to keep the structure of the newly-optimized homepage similar to maintain a consistent developer experience.
Prefetching React for subsequent pages
To further improve performance when navigating their logged-out homepage, Netflix utilized the time spent by users on the landing page to prefetch resources for the next page users were likely to land on.
The built-in browser API consists of a simple link tag within the head tag of the page. It suggests to the browser that the resource (e.g. HTML, JS, CSS, images) can be prefetched, though it doesn’t guarantee that the browser actually will prefetch the resource, and it lacks full support from other browser.
XHR prefetching, on the other hand, has been a browser standard for many years and produced a 95% success rate when the Netflix team prompted the browser to cache a resource.
By using both the built-in browser API and XHR to prefetch HTML, CSS, and JS, the Time-to-Interactive was reduced by 30%.
Netflix logged-out homepage — optimization summary
By prefetching resources and optimizing the client-side code on Netflix’s logged-out homepage, Netflix was able to greatly improve their Time-to-Interactive metrics during the sign-up process. By prefetching future pages using the built-in browser API and XHR prefetching, Netflix was able to reduce Time-to-Interactive by 30%.
The code optimizations carried out by the Netflix team showed that while React is a useful library, it may not provide an adequate solution to every problem.