Monday, April 15, 2024

The Journey of a Web Page: From Request to Render by Brij

 Referred Link - https://www.linkedin.com/posts/brijpandeyji_the-journey-of-a-web-page-from-request-to-activity-7185350123529342976-Oy8T/

The Journey of a Web Page: From Request to Render

๐—ฌ๐—ผ๐˜‚๐—ฟ ๐—•๐—ฟ๐—ผ๐˜„๐˜€๐—ฒ๐—ฟ'๐˜€ ๐—ฅ๐—ผ๐—น๐—ฒ:
1. ๐—˜๐˜€๐˜๐—ฎ๐—ฏ๐—น๐—ถ๐˜€๐—ต๐—ถ๐—ป๐—ด ๐—ฎ ๐—–๐—ผ๐—ป๐—ป๐—ฒ๐—ฐ๐˜๐—ถ๐—ผ๐—ป: Your browser initiates communication by sending a connection request to the website's server.
2. ๐—ฅ๐—ฒ๐—พ๐˜‚๐—ฒ๐˜€๐˜๐—ถ๐—ป๐—ด ๐˜๐—ต๐—ฒ ๐—ฃ๐—ฎ๐—ด๐—ฒ: Once connected, your browser sends an HTTP request for the specific page you want to access.
3. ๐—ฃ๐—ฟ๐—ฒ๐—ฝ๐—ฎ๐—ฟ๐—ถ๐—ป๐—ด ๐˜๐—ผ ๐—ฅ๐—ฒ๐—ป๐—ฑ๐—ฒ๐—ฟ: The browser's engine prepares to process the incoming data and manage the page loading.

๐—Ÿ๐—ผ๐—ฐ๐—ฎ๐˜๐—ถ๐—ป๐—ด ๐˜๐—ต๐—ฒ ๐—ช๐—ฒ๐—ฏ๐˜€๐—ถ๐˜๐—ฒ:
1. ๐—ฆ๐˜๐—ฎ๐—ฟ๐˜๐—ถ๐—ป๐—ด ๐˜๐—ต๐—ฒ ๐—ฆ๐—ฒ๐—ฎ๐—ฟ๐—ฐ๐—ต: The browser begins its search for the website at the domain name system (DNS) level.
2. ๐—ก๐—ฎ๐—ฟ๐—ฟ๐—ผ๐˜„๐—ถ๐—ป๐—ด ๐˜๐—ต๐—ฒ ๐—ฆ๐—ฐ๐—ผ๐—ฝ๐—ฒ: The search narrows down to the specific DNS record containing the website's name.
3. ๐—ฅ๐—ฒ๐˜๐—ฟ๐—ถ๐—ฒ๐˜ƒ๐—ถ๐—ป๐—ด ๐˜๐—ต๐—ฒ ๐—”๐—ฑ๐—ฑ๐—ฟ๐—ฒ๐˜€๐˜€: The browser retrieves the website's IP address, enabling a direct request.

๐—ง๐—ต๐—ฒ ๐—ช๐—ฒ๐—ฏ๐˜€๐—ถ๐˜๐—ฒ'๐˜€ ๐—ฅ๐—ฒ๐˜€๐—ฝ๐—ผ๐—ป๐˜€๐—ฒ:
1. ๐—ฆ๐˜๐—ฎ๐˜๐˜‚๐˜€ ๐—จ๐—ฝ๐—ฑ๐—ฎ๐˜๐—ฒ๐˜€: The website responds with status codes, providing updates on the request's progress:
- 1xx: Preparation stages
- 2xx: Success! The page is being sent
- 3xx: Redirection to another URL
- 4xx: Client-side error (e.g., 404 Not Found)
- 5xx: Server-side error

๐—•๐˜‚๐—ถ๐—น๐—ฑ๐—ถ๐—ป๐—ด ๐˜๐—ต๐—ฒ ๐—ช๐—ฒ๐—ฏ ๐—ฃ๐—ฎ๐—ด๐—ฒ:
1. ๐—ฆ๐˜๐—ฟ๐˜‚๐—ฐ๐˜๐˜‚๐—ฟ๐—ฎ๐—น ๐—™๐—ผ๐˜‚๐—ป๐—ฑ๐—ฎ๐˜๐—ถ๐—ผ๐—ป: The browser starts by processing the HTML code to establish the page's basic structure.
2. ๐—ฉ๐—ถ๐˜€๐˜‚๐—ฎ๐—น ๐—ฆ๐˜๐˜†๐—น๐—ถ๐—ป๐—ด: Next, it interprets the CSS code, which determines the page's appearance.
3. ๐—–๐—ผ๐—ป๐˜๐—ฒ๐—ป๐˜ ๐—œ๐—ป๐˜๐—ฒ๐—ด๐—ฟ๐—ฎ๐˜๐—ถ๐—ผ๐—ป: The browser combines HTML, CSS, and JavaScript (for interactivity) to fully assemble the page.
4. ๐—™๐—ถ๐—ป๐—ฎ๐—น ๐—ฅ๐—ฒ๐—ป๐—ฑ๐—ฒ๐—ฟ๐—ถ๐—ป๐—ด: Lastly, it calculates the layout and renders the page on your screen.

This simplified overview captures the essence of web page loading, a complex process we often take for granted.



Tags:

#WebPageJourney


No comments:

Post a Comment