One minute to show you the entire process of entering a URL into the page display
Foreword: Do you really understand how you go online every day?
Imagine you're hungry, turn on your phone and type in "fried chicken takeaway," then a bunch of food pictures pop up, and the fried chicken is delivered to you in a few minutes.
But have you ever thought that in just a few seconds, your request has undergone a mysterious journey "halfway around the world"?
How did it all happen? You type the URL into your browser, press enter, and then what?
Don't worry, today we will show you the magic behind every time you go online in the most easy-to-understand way! (You don't need any computer foundation, so you can understand it in seconds!) ）
Step 1: Find a "way" for your browser
You open your browser, type in, and press enter — but your computer doesn't actually know who the "www.baidu.com" is, it only recognizes the numeric address (IP address). www.baidu.com
So, it has to ask the "phonebook of the Internet" - DNS (Domain Name System):
- Your computer: Hey, I'm going to www.baidu.com, what's its address?
- DNS servers: Wait, I'll check...... Got it! Its IP address is 110.242.68.66.
- Your computer: Okay, I'm going to go!
(PS: If DNS resolution is slow, you feel like web pages are loading slowly.) ）
Step 2: Data "courier brother" picks up the parcel
Your computer has to send the request (HTTP request) to the Baidu server, and at this time, the delivery guy - TCP/IP comes into play.
TCP (Transmission Control Protocol) is like a serious delivery guy, it is not sloppy and every time the data is transmitted it will say:
- "Hey, Baidu, I'm going to send you data, are you there?" （SYN）
- "I'm here! You send it! ”（SYN-ACK）
- "Okay, I'm starting to send it!" （ACK）
This process is called a three-way handshake and is used to ensure the reliability of data transmission, just like when you confirm with the merchant before you shop online
"Do you really have the goods?" → "I've got it!" → "Okay, then I'm ordering!"
Step 3: Data packaging and express delivery
Once confirmed, your HTTP request (e.g., "I want to visit Baidu's homepage") will be packaged into multiple small slips of paper (multiple packets) through network cables, WiFi, fiber, satellites, and ...... Transmit it in various ways.
Each packet has its own "ID card":
- Sender (your IP)
- Recipient (Baidu's IP)
- Contents (I want to see the homepage)
The packages pass through an infinite number of routers (courier transit stations), each of which looks at "where this package is going" and then forwards it closer to Baidu.
Imagine that you place an order for lychees from Guangdong in Beijing:
- The lychees were first sent from the orchard to the warehouse in Guangzhou
- Then fly from the airport in Guangzhou to Beijing
- Finally, it will be delivered to you by the courier brother
This is how the data transmission is "transferred" from station to station.
Step 4: The Baidu server receives the request and starts "cooking"
When Baidu's server receives your HTTP request, it will perform the following steps:
- Confirm what you want (parse request).
- Go to the database to find data (such as the data on Baidu's homepage).
- 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 stir-frying (processing requests)
- Then plate (pack the data)
- Finally, the courier (network) delivers the food back to your home
Step 5: The data is returned and the page is assembled
The process of returning data is similar to when it was sent, and it goes back to your computer the way it came.
But at this time, the web page is not displayed in its entirety at once, but:
- HTML file comes back first and tells your browser what the general structure of the page is
- CSS file and then come back to make the page look good
- JS files, if any, make pages smarter
- Images, videos, ads, ...... Load sequentially
If you feel that the web page is loading slowly, it may be:
- The server is too busy (the restaurant is bursting)
- The network is too congested (the express is stuck in traffic)
- Your internet speed is too slow (WiFi is too crowded)
Step 6: You see the full web page!
Once all the data has been transferred, the browser will be able to display the complete web page to you!
You're like, "Huh? It's as if nothing happened", but behind the scenes, a cyber magic was actually completed.
Summary: The whole process from entering the URL to displaying the page
- DNS resolution: Find an address (like looking up a phone number).
- TCP three-way handshake: Establish a connection (like confirming with the seller that it's in stock).
- Data packaging: Your request is sent out in small packages
- Network transmission: Packets travel through multiple routers to the server
- Server processing requests: Baidu servers "stir-fry and cook".
- Data Return: The server sends the data back to your browser
- Web page assembly: The browser combines HTML, CSS, JS into a complete page
Hands-on demo: You can also see the data transfer for yourself!
Want to see for yourself what your web requests look like? Here's how you can do it:
- Open your browser
- Press F12 (to open Developer Tools).
- Switch to the Network tab
- Refresh the page and you'll see all the requests and the data returned!
epilogue
The next time you open a web page, don't feel like it "came out of nowhere"! Every time you load, it's a mysterious interaction between your computer and servers around the world.
Today, we will take you through the basic process from entering a URL in a browser to displaying the page in a simple and interesting way , hoping to give you a general understanding of the mechanism behind the loading of a web page. However, for the sake of easy understanding, 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 packets are transmitted in fragments, how network communication is layered, and how browsers parse HTML/CSS/JS step by step to render the full page, etc.