Introduction To Browser

Introduction

To understand React, it is essential first to understand the fundamentals of browser functionality, the drawbacks of conventional page rendering, and how React addresses those drawbacks. This will help us understand why React Js is so popular among other web frameworks and libraries and the importance of learning React Js.

How does the Browser work?

A browser’s primary job is to receive and render the web content and populates based on the user’s requests. Every data that transfers over the internet is in stream or packet-based format

Stream format data is used to transfer streaming pipeline data audio-video data.

Packet-based format divides the request into discrete packets and is released in the network. Almost all web traffic based on HTTP/s works based on packet format and uses TCP protocol to receive data in the same order

Browsers usually come with many utilities, such as UI, Browser engine, Rendering engine, network, JS engine, and data storage. We will only focus on the rendering engine because it plays an important role here.

Web Basics

Step 1: Every domain is linked with an IP address. When you enter the website URL or Domain name (www.google.com) into your browser, the DNS resolves the Domain to an IP address so the browser can find and load the website.
Step 2: When you visit any website, the browser sends an HTTP request to the web server, specifying the path and parameters of the requested resource.
Step 3: Once the server receives the request, the server processes the request by checking the path, parameter and querying a database etc then it sends an HTTP response back to the browser containing the requested resource in HTML, CSS, and JavaScript code.
Step 4: The browser’s rendering engine interprets and renders the code to display the web page on the user’s device.
Step 5: The CSS stylesheets are applied to format the web page’s content, including fonts, colours, and layout.
Step 6: The browser may also execute JavaScript code on the web page to add interactivity and dynamic behaviour.
Step 7: As new content is loaded or changes are made to the web page, the browser updates the display accordingly.

Request more information

Introduction To Browser