Philip

Philip's blog

0%

browser-what-happened-when-you-input-url-and-press-enter

Posted on Edited on In
Symbols count in article: 596 Reading time ≈ 2 mins.

Introduction

There is a very famous question, “What happened when you input a URL and press Enter in the browser?”

Answer

1. URL parsing

When you input a URL in the browser, the browser will parse the URL into several parts:

  • Protocol: http or https
  • Host/Domain: www.example.com
  • Port: 80 or 443
  • Path: /page.html
  • Query: ?name=Philip
  • Fragment: #section1

2. DNS lookup

The browser will check the cache to see if the DNS lookup result is cached. If not, it will send a DNS query to the DNS server to get the IP address of the host.

  1. Check browser cache.
  2. Check OS cache.
  3. Check router cache.
  4. Check ISP(Internet Service Provider) cache.
  5. Make request to the DNS server.(Only if all cache above failed!)

3. TCP connection

The browser will establish a TCP connection with the server using the IP address and port number. This including the TCP handshake process. 关于TCP的连接与关闭，可以看这篇

4. HTTP request

The browser will send an HTTP request to the server. The request includes the following information:

  • Request method: GET, POST, PUT, DELETE, etc.
  • Request headers: User-Agent, Accept, Cookie, etc.
  • Request body: for POST and PUT requests.
  • URL: http://www.example.com/page.html?name=Philip#section1

5. Server processing

The server will process the request and generate a response. The response includes the following information:

  • Status code: 200, 404, 500, etc.
  • Response headers: Content-Type, Content-Length, etc.
  • Response body: HTML, CSS, JavaScript, etc.
  • Cookies: Set-Cookie header.

6. Browser rendering

The browser will render the response HTML, CSS, and JavaScript to display the web page to the user. When browser parse html page, it may download js file embed in html, this process might block the parsing, see here for details.

  1. Parse HTML: The browser will parse the HTML to create the DOM tree.
    1. The file was transferred from the server to the browser as binary data.
    2. The browser will parse the binary data to the .html file.
    3. The browser constructs the DOM tree based on the parsed HTML.
    4. If the html contains external CSS files, the browser will download the css in parallel, this won’t block the DOM construction.
    5. If the html contains external JavaScript files, the browser will download the js in parallel, this will/won’t block the DOM construction. see here for details.
  2. Parse CSS: The browser will parse the CSS to create the CSSOM tree.
  3. Render tree: The browser will combine the DOM tree and CSSOM tree to create the render tree.
  4. Layout: The browser will calculate the position and size of each element in the render tree.
  5. Paint: The browser will paint the pixels on the screen.
  6. Composite: The browser will composite the layers to display the final web page.
  7. JavaScript execution: The browser will execute the JavaScript code to add interactivity to the web page.
  8. Event handling: The browser will handle user events like click, scroll, etc.

Conclusion

  1. External CSS doesn’t block the DOM construction, but might block the render tree construction since the browser needs to wait for the CSSOM tree to be constructed.
  2. External JavaScript might block the DOM construction if and only if:
    1. The Scripts is in <head> tag, it will block the DOM construction.
    2. And the script doesn’t set async or defer.
  3. If the script is at the end of the <body> tag, it won’t block the DOM construction even when it doesn’t set async or defer.