The format of markdown here is not the same as that of Jane’s book. The typesetting may not be very good. You can transfer it to my Jane’s book
We usually input some URLs in the address bar, and the page will appear soon, but what happened in this?
It’s a process like this:
- The URL is typed in the address bar of the browser
- Domain name resolution
- Server processing request
- Browser processing
- Drawing web pages
1、 The URL is typed in the address bar of the browser
First, we need to know what the URL is?
URL (uniform resource locator), a uniform resource locator, is used to locate resources on the Internet, which is actually the website address. The format of URL is generally:
Protocol type: / / < hostname >: < port > / < Path > / filename
The protocol types can be HTTP (Hypertext Transfer Protocol), HTTPS, FTP (File Transfer Protocol), telnet (Remote Login Protocol), file, etc. While HTTP is the most common network transmission protocol, HTTPS is the encrypted network transmission.
For example, my short book URL is
http://www.jianshu.com/u/b473784d730cIn which, “HTTP” means communication with web server
httpProtocol, the domain name of Jianshu web server is
u/b473784d730cIndicates the path where the accessed file exists on the web server.
In the URL format, the number after the host name colon is the port number, because a computer often acts as a web, FTP and other servers at the same time. The port number is used to tell the host where the web server is to deliver the request to which service. By default, the port of HTTP service is 80, which does not need to be entered in the URL. If the web server does not use this default port, it needs to write the port used by the service. Common protocol default ports are as follows:
|Protocol type||Default port|
What is IP?
IP is the rule protocol that every computer connected to the Internet follows to realize mutual communication. Each device in the Internet has an IP address, such as 192.168.0.1, while 127.0.0.1 represents the IP address of the machine. IP is divided into LAN IP and public IP. There are differences between LAN IP and public IP. Every website is located by IP.
In order to facilitate memory or identification, people use domain names to log in to the website, and each domain name has its corresponding IP address behind it.
For example, for
http://www.jianshu.comThe browser doesn’t actually know
www.jianshu.comWhat is it? We need to find it
www.jianshu.comThe IP address of the server where the website is located can find the target, which is the domain name resolution to be mentioned below.
2、 Domain name resolution
When the user enters the URL in the browser, the computer you are using will send a DNS request to the local DNS server. The local DNS server is generally provided by your network access server provider, such as China Telecom, China Mobile. After the DNS request arrives at the local DNS server, there are the following steps:
- Find browser cache
The browser will check whether there is a resolved IP address corresponding to the domain name in the cache. If there is one in the cache, the resolution process will end. It’s convenient for Chrome browser to see its own DNS cache time. Enter it in the address bar
chrome://net-internals/#dns, you can see
- Find operating system cache
If the user’s browser cache does not exist, the browser will look up whether there is DNS information stored in the hosts file, and whether there is a target domain name and corresponding IP address
- Find router cache
If the system cache cannot be found, the query request will be sent to the router, which usually has its own DNS cache.
- Find ISP (Internet service provider) DNS cache
If the router cache is not found, the ISP DNS cache server is queried.
We all know that there will be “DNS server address” in our network configuration. The operating system will send this domain name to the DNS set here, such as
220.127.116.11, that is, the domain name server in this region, is usually the application provider that provides you access to the Internet. and
18.104.22.168It is a universal DNS for China Mobile, telecom and Unicom.
- Iterative query
If the DNS cache cannot be found in the previous step, there are several steps:
- The local DNS server forwards the request to the root domain on the Internet (the root domain has no name, which is represented by an empty string in the DNS system). for example
www.baidu.com.The current DNS system does not require domain names to
.Come to an end, i.e
www.baidu.comIt can be resolved, but now many DNS resolution service providers still require that when filling in DNS records
.To end the domain name.)
- The root domain will query the top-level domain in the domain name (for example, to query
www.baidu,com, the top-level domain of the domain name is
com）The server IP address of is returned to the local DNS.
- According to the returned IP address, the local DNS sends a request to the top-level domain (that is, the COM domain), and the COM domain server sends a request to the secondary domain (that is, the COM domain) in the domain name
baidu.com）The IP address of is returned to the local DNS.
- The local DNS then sends a request to the secondary domain for query.
- This process is repeated until the local DNS server gets the final query result and returns it to the host. At this time, the host can access the website through the domain name.
The figure below is a good illustration of thisIterative query:
When the corresponding IP address is found, the corresponding server is found through the IP address, and the browser sends the HTTP request initiated by the user to the server. For example:
GET http://www.baidu.com/ HTTP/1.1
3、 Server processing request
Each server will be installed with the application processing the request——
Web server。 Common web server products include
LighttpdAnd so on.
Regardless of their purpose, these server-side programs usually produce an HTML response that the browser can browse.
So how to handle the request? In fact, it is the work of background processing. Background development now has many frameworks, but most of them are built according to MVC design mode.
The process is as follows:
MVCThe process of processing is as follows: for each user’s input request, it is received by the controller first, the controller decides which model to use for processing, then the model uses business logic to process the user’s request and return data, finally the controller determines which view model to use, returns HTML string to the browser with the corresponding view format model, and presents it through the display page Now to users.
4、 Browser processing
The next step is for the browser to process. The HTML string returned through the background processing is accepted by the browser and then read and parsed by a sentence. The HTML page experiences loading, parsing and rendering.
The browser loads an HTML page in a top-down order. If an external CSS file is encountered during the loading process, the browser issues another request to obtain the CSS file. In case of image resources, the browser will send another request to obtain the image resources. However, when JS file is encountered during document loading, the rendering thread of HTML document will be suspended (loading, parsing and rendering synchronization). The rendering thread of HTML document can be recovered only after the JS file in the document is loaded and the parsing execution is completed.
Parsing documentIt refers to transforming documents into meaningful structures, which can be understood and used by code. The result of parsing is usually the node tree representing the document structure, which is called parse tree or syntax tree, that is, DOM tree. The following picture:
CSS analysisResolves the CSS file to a stylesheet object. The following picture:
JS analysisThe file is loaded and parsed at the same time
If you want to know more about how to parse it, you can see how the browser works: the new web browser reveals this article behind the scenes
This is the process of building a rendering tree, which is to visualize the DOM tree. The tree was built to draw the document content in the right order.
5、 Draw web page
The browser calculates the rendering tree based on HTML and CSS, and finally draws it to the screen
Front end classic interview question: what happened from URL input to page loading?
What really happens when you navigate to a URL
From URL input to page presentation
What is the MVC model structure
Domain name details
Browser ~ load, parse, render
Due to my limited ability, if there is something wrong, please point out! Thank you for watching?