One minute to show you: the complete process from entering a URL to displaying the page

Preface: Do you really understand your daily Internet use?

Imagine that you are hungry, so you open your phone and type in "fried chicken takeout" , then a bunch of food pictures pop up, and a few minutes later the fried chicken is delivered to you.

But have you ever thought that in just these few seconds, your request has undergone a mysterious journey "across half the world" ?

How does this happen? You type the URL into your browser, hit enter, and then what?

Don't worry, today we will use the most easy-to-understand way to show you the magic behind every time you go online ! (No computer knowledge is required, you will understand it in seconds!)

Step 1: Your browser needs to find a "path"

You open your browser, type in www.baidu.com , and press Enter - but your computer doesn't actually know who "www.baidu.com" is, it only recognizes the numerical address (IP address).

So, it has to first ask the "Internet's phone book" - DNS (Domain Name System):

• Your computer : Hello, I want to go to www.baidu.com, what is its address?
• DNS Server : Wait a minute, I'll check... I found it! Its IP address is 110.242.68.66 .
• Your computer : OK, I'll be off right away!

( PS : If the DNS resolution is slow, you will feel that the web page loads slowly.)

Step 2: Data "courier" picks up the package at your door

Your computer has to send the request (HTTP request) to the Baidu server. At this time, the courier - TCP/IP comes into play.

TCP (Transmission Control Protocol) is like a rigorous deliveryman. It is not sloppy. Every time it transmits data, it will say:

1. "Hello, Baidu, I'm going to send you data, are you there?" (SYN)
2. "I'm here! Go ahead!" (SYN-ACK)
3. “OK, I’m sending!” (ACK)

This process is called a three-way handshake , which is used to ensure the reliability of data transmission, just like when you confirm with the merchant before shopping online:

“Do you really have the product?” → “I do!” → “Okay, I’ll place an order!”

Step 3: Data packaging and express delivery

After it is confirmed that it is connected, your HTTP request (such as "I want to visit the Baidu homepage") will be packaged into multiple small notes (multiple data packets) and transmitted through various means such as network cables, WiFi, optical fibers, satellites, etc.

Each packet has its own "ID card":

• Sender (your IP)
• Recipient (Baidu's IP)
• Content (I want to see the homepage)

These packages will pass through countless routers (express transfer stations) , each of which will look at "where this package should go" and then help forward it to a place closer to Baidu.

Imagine you place an order in Beijing to buy lychees from Guangdong:

1. Lychees are first sent from the orchard to the warehouse in Guangzhou
2. Then fly from Guangzhou Airport to Beijing
3. Finally, the courier will deliver it to you.

Data is transmitted in this way through one stop after another.

Step 4: Baidu server receives the request and starts "cooking"

When Baidu's server receives your HTTP request, it will perform the following steps:

1. Confirm what you want (parse request)
2. Go to the database to find data (such as the data on Baidu's homepage)
3. Package the web page data and send it back to you

Baidu is like a restaurant:

• You ordered the dish "Baidu Homepage"
• The kitchen starts cooking (processing requests)
• Then load the disk (pack data)
• Finally, the courier (online) delivers the food back to your home

Step 5: Data return, page assembly

The data return process is similar to that of sending data, and it will return to your computer along the same route.

But at this time, the webpage is not displayed completely at once, but:

1. The HTML file comes back first, telling your browser: what is the general structure of the page
2. CSS files come back to make the page look good
3. JS files (if any) make the page smarter
4. Pictures, videos, ads... are loaded one by one

If you feel that a web page is loading slowly , it may be because:

• The server was too busy (the restaurant was overwhelmed)
• The network is too congested (the courier is stuck in traffic)
• Your internet speed is too slow (WiFi is too crowded)

Step 6: You see the complete web page!

After all data transmission is completed, the browser can show you the complete web page !

You may think, "Huh? It seems like nothing happened", but a network magic is actually done behind the scenes .

Summary: The whole process from entering the URL to displaying the web page

1. DNS resolution : finding an address (like looking up a phone number)
2. TCP three-way handshake : establish a connection (just like confirming the availability of goods with the seller)
3. Data packaging : Your request is broken down into small packages and sent out
4. Network transmission : Data packets pass through multiple routers to reach the server
5. Server processing request : Baidu server "cooking"
6. Data return : The server sends data back to your browser
7. Web page assembly : The browser combines HTML, CSS, and JS into a complete page

Actual Demonstration: You can also see the data transfer yourself!

Want to see what your network requests look like? You can do this:

1. Open your browser
2. Press F12 (Open Developer Tools)
3. Switch to the Network tab
4. Refresh the page and you can see all the requests and returned data!

Conclusion

Next time you open a web page, don't think it just appeared out of thin air! Every time it loads, it's a mysterious interaction between your computer and servers around the world .

Today, we use a simple and interesting way to show you the basic process from inputting a URL in the browser to displaying the page , hoping to give you a general understanding of the mechanism behind web page loading. However, in order to make it easy to understand, we only talked about the overall process and did not go into more detailed parts, such as the specific process of DNS resolution, the details of the TCP three-way handshake, how data packets are transmitted in fragments, how network communications are layered, and how the browser parses HTML/CSS/JS step by step to render a complete page , etc.