{"id":15,"date":"2023-02-07T17:11:00","date_gmt":"2023-02-07T17:11:00","guid":{"rendered":""},"modified":"2024-09-20T18:46:47","modified_gmt":"2024-09-20T17:46:47","slug":"what-happens-when-you-type-a-url-into-your-browser","status":"publish","type":"post","link":"https:\/\/debuggersspace.com\/index.php\/2023\/02\/07\/what-happens-when-you-type-a-url-into-your-browser\/","title":{"rendered":"What happens when you type a URL into your browser?"},"content":{"rendered":"
\n
\n \t<\/i> Read Time:<\/span>3 Minute, 32 Second <\/div>\n\n <\/div>
URL<\/strong> stands for Uniform Resource Locator<\/em>. A URL is the address of a website that you can find in the address bar of your web browser. It helps you navigate to specific websites by pointing to their location.<\/p>\n

Example: https:\/\/www.debuggersspace.com<\/a><\/p>\n

DNS and CNAME<\/h2>\n

DNS (Domain Name System)<\/strong> is like the internet’s phonebook, mapping URLs to their corresponding IP addresses. Each website has a unique IP address, the location of the server hosting the requested website.<\/p>\n

CNAME Record<\/strong>: A Canonical Name (CNAME) record is a type of DNS record that maps one domain name to another. This can be helpful when managing multiple services from a single IP address.<\/p>\n

Steps: What Happens When You Enter a URL?<\/h2>\n
    \n
  1. DNS Lookup:<\/strong> The browser first checks its cache to find the corresponding IP address of the website. If not found, it queries the DNS server.\n
      \n
    • Browser Cache<\/li>\n
    • Operating System\u2019s Cache<\/li>\n
    • Router Cache<\/li>\n
    • ISP Cache<\/li>\n<\/ul>\n

      If the DNS entry isn\u2019t found in these caches, the ISP\u2019s DNS server initiates a DNS query to find the IP address associated with the domain name.<\/p>\n

      Live Example:<\/strong> You can check the IP address of a website by using the terminal command:<\/p>\n

      nslookup www.google.com<\/code><\/pre>\n<\/li>\n
    • TCP\/IP Connection:<\/strong> After the IP address is found, the browser opens a TCP (Transmission Control Protocol)<\/em> connection with the web server on port 80 (for HTTP) or port 443 (for HTTPS).Live Example:<\/strong> You can use tools like Wireshark to capture packets and observe the TCP handshake.<\/li>\n
    • TLS Handshake (for HTTPS):<\/strong> If you\u2019re using HTTPS, the browser initiates a TLS (Transport Layer Security)<\/em> handshake to ensure a secure, encrypted connection.Live Example:<\/strong> When visiting a secure site, click the padlock icon next to the URL in your browser to view the security certificate.<\/li>\n
    • Sending the HTTP Request:<\/strong> The browser sends an HTTP request to the server, asking for the webpage. This request includes headers like browser type, cookies, and the requested page.Live Example:<\/strong> In your browser\u2019s Developer Tools under the Network<\/strong> tab, you can see the HTTP request sent to the server.<\/li>\n
    • Server Processes the Request:<\/strong> The web server processes the request, fetching the requested page or dynamically generating it (if using server-side languages like PHP or Node.js).Live Example:<\/strong> You can observe the server\u2019s response time in the Developer Tools<\/strong> panel. A 200 OK<\/strong> response means the server successfully processed the request.<\/li>\n
    • Server Sends a Response:<\/strong> The server sends back the requested HTML file along with an HTTP status code (e.g., 200 OK, 404 Not Found, 500 Internal Server Error).Live Example:<\/strong> In the Network<\/strong> tab of Developer Tools, you can view the response code and HTML content sent from the server. For instance:\n
      <html>\r\n<head><title>Example Domain<\/title><\/head>\r\n<body>\r\n<h1>Example Domain<\/h1>\r\n<\/body>\r\n<\/html>\r\n<\/code><\/pre>\n<\/li>\n
    • Browser Renders the Page:<\/strong> The browser parses the HTML, CSS, and JavaScript. It builds the DOM (Document Object Model) and renders the page on your screen.Live Example:<\/strong> In the Network<\/strong> tab, you can track the different assets being loaded (like CSS, JS, and images). The rendering engine (WebKit in Safari or Blink in Chrome) paints the elements on the screen.<\/li>\n
    • JavaScript Execution and Event Handling:<\/strong> Once the HTML is rendered, JavaScript is executed. JavaScript can modify the DOM, handle user events, and send additional requests via AJAX.Live Example:<\/strong> You can monitor JavaScript execution in the Console<\/strong> tab of Developer Tools. This shows any errors in scripts or interactions with the page.<\/li>\n
    • Interaction with the Page:<\/strong> After the page is fully loaded, the user can interact with it (e.g., clicking buttons, filling forms). The browser handles these actions and sends any necessary data to the server.Live Example:<\/strong> Inspect how form data is sent by clicking a submit button and observing the Network<\/strong> tab to view the data sent in the request.<\/li>\n<\/ol>\n
      Conclusion:<\/h3>\n
      When you type a URL into your browser, a complex sequence of events occurs in the background, involving DNS lookups, TCP\/IP connections, HTTP requests, server-side processing, and rendering. This ensures that the webpage is displayed quickly and securely on your screen.<\/p>\n<\/section>\n","protected":false},"excerpt":{"rendered":"
      URL stands for Uniform Resource Locator. A URL is the address of a website that you can find in the address bar of your web browser. It helps you navigate to specific websites by pointing to their location. Example: https:\/\/www.debuggersspace.com DNS and CNAME DNS (Domain Name System) is like the internet’s phonebook, mapping URLs to […]<\/p>\n","protected":false},"author":43,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_uag_custom_page_level_css":"","footnotes":""},"categories":[146,107,14,125,13],"tags":[],"class_list":["post-15","post","type-post","status-publish","format-standard","hentry","category-net-interview-qa","category-architect","category-cloud","category-devops","category-emerson"],"uagb_featured_image_src":{"full":false,"thumbnail":false,"medium":false,"medium_large":false,"large":false,"1536x1536":false,"2048x2048":false},"uagb_author_info":{"display_name":"Himanshu Namdeo","author_link":"https:\/\/debuggersspace.com\/author\/admin\/"},"uagb_comment_info":1,"uagb_excerpt":"URL stands for Uniform Resource Locator. A URL is the address of a website that you can find in the address bar of your web browser. It helps you navigate to specific websites by pointing to their location. Example: https:\/\/www.debuggersspace.com DNS and CNAME DNS (Domain Name System) is like the internet’s phonebook, mapping URLs to…","_links":{"self":[{"href":"https:\/\/debuggersspace.com\/index.php\/wp-json\/wp\/v2\/posts\/15"}],"collection":[{"href":"https:\/\/debuggersspace.com\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/debuggersspace.com\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/debuggersspace.com\/index.php\/wp-json\/wp\/v2\/users\/43"}],"replies":[{"embeddable":true,"href":"https:\/\/debuggersspace.com\/index.php\/wp-json\/wp\/v2\/comments?post=15"}],"version-history":[{"count":4,"href":"https:\/\/debuggersspace.com\/index.php\/wp-json\/wp\/v2\/posts\/15\/revisions"}],"predecessor-version":[{"id":621,"href":"https:\/\/debuggersspace.com\/index.php\/wp-json\/wp\/v2\/posts\/15\/revisions\/621"}],"wp:attachment":[{"href":"https:\/\/debuggersspace.com\/index.php\/wp-json\/wp\/v2\/media?parent=15"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/debuggersspace.com\/index.php\/wp-json\/wp\/v2\/categories?post=15"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/debuggersspace.com\/index.php\/wp-json\/wp\/v2\/tags?post=15"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}