Enter url

What happens when you type in a url and the page pops up quickly?

It goes something like this:

  • Type in the URL in the browser’s address bar
  • Domain name resolution
  • The server processes the request
  • Browser processing
  • Drawing page

Type the URL in the browser’s address bar

So first of all, what is the URL?

Uniform Resource Locator (URL) is a Uniform Resource Locator (URL) used to locate resources on the Internet. The format of url is:

Protocol type ://< host name >:< port >/< path >/ file name

The protocols can be HTTP (hypertext transfer protocol), HTTPS, FTP (file transfer protocol), Telnet (remote login protocol), and File. HTTP is the most common network transport protocol, and HTTPS is encrypted network transport.

My Jane books, for example, the url is http://www.jianshu.com/u/b473784d730c, among them, the “HTTP” to the web server communication USES the HTTP protocol, Jane books web server domain name at www.jianshu.com, U /b473784d730c indicates the path where the accessed file resides on the Web server.

The number after the colon in the host name in THE URL format is the port number. Because a computer often acts as a Web server, FTP server, etc., the port number is used to tell the host of the Web server which service to send the request to. By default, the HTTP service port is 80. You do not need to enter this port in the URL. If the Web server does not use this port, specify the port used by the service. Common protocol default ports are as follows:

Protocol type The default port
http 80
ftp 21
https 443
telnet 23
What is the IP

IP is the regular protocol that every computer connected to the network on the Internet follows in order to communicate with each other. Each device on the Internet has an IP address, such as 192.168.0.1, and 127.0.0.1 represents the local IP address. IP addresses are classified into LAN IP addresses and public IP addresses. There is a difference between LAN IP and public IP. Every website is located by IP.

For easy memorization or identification, people use domain names to log in to websites, with an IP address behind each domain name.

In the case of http://www.jianshu.com, for example, the browser doesn’t actually know what www.jianshu.com is. It has to look for the IP address of the www.jianshu.com server to find the target.

Second, domain name resolution

When the user enters the URL in the browser

  • Find the browser cache

The browser checks the cache for a resolved IP address for the domain name, and if it does, the resolution process ends. It is easy to see the DNS cache time in Chrome. Enter Chrome ://net-internals/# DNS in the address bar to see the DNS cache time





  • Find the operating system cache

If the user does not have DNS information in the browser cache, the browser checks whether the DNS information is stored in the hosts file and whether the target domain name and corresponding IP address exist

  • Find the router cache

If not found in the system cache, the query is sent to the router, which typically has its own DNS cache.

  • Find the ISP DNS cache

If it is not found in the router cache, it queries the ISP DNS cache server. We all know that we have a DNS server address in our network configuration, and the operating system will send that domain name to the DNS set up here, for example, 114.114.114.114, which is the local domain name server, usually the application provider that gives you access to the Internet. And 114.114.114.114 is the domestic mobile, telecom and Unicom common DNS.

  • Recursive search

If you can’t find the DNS cache, there are several steps:

  • The local DNS server forwards the request to the root domain on the Internet (the root domain has no name and is represented by an empty string in the DNS system). For example,www.baidu.com.Today’s DNS systems do not require domain names.To end, i.ewww.baidu.comIt can be resolved, but many DNS resolution service providers will still require when filling in DNS records.To end the domain name.
  • The root domain will query the top-level domain of the domain to be queried (such as to querywww.baidu,com, the top-level domain of the domain name iscom) server IP address is returned to the local DNS.
  • The local DNS sends a request to the top-level domain (that is, the COM domain) based on the returned IP addresswww.baidu.comIn thebaidu.com) is returned to the local DNS.
  • The local DNS sends a query request to the secondary domain.
  • This process is repeated until the local DNS server gets the final query result and returns it to the host. Only then can the host access the site by domain name.

    The figure below illustrates this wellRecursive search:





After finding the corresponding IP address, the browser searches for the corresponding server based on the IP address, and sends the HTTP request to the server. For example, GET http://www.baidu.com/ HTTP/1.1

The server processes the request

The application that handles requests, the Web Server, is installed on each server. Common Web server products include Apache, Nginx, IIS, Lighttpd and so on.

When a Web Server receives an HTTP request, it returns an HTTP response, such as an HTML page. Requests sent by different users are combined with configuration files to delegate different requests to the program that handles the corresponding request on the server (such as CGI scripts, JSP scripts, servlets, ASP scripts, server-side JavaScript, or some other server-side technology).

Regardless of their purpose, these server-side programs usually produce an HTML response that the browser can browse.

So how do you handle requests? It’s actually background processing. There are many frameworks for backend development, but most of them are built according to the MVC design pattern.

The processing process is shown as follows:





The MVC process looks like this: For each input from the user’s request, the first controller, the controller is used to decide which model to processing, and then model with business logic to handle the user’s request and return data, and finally determine what view model controller, using the corresponding view formatting model return HTML string to the browser, and through the display page presented to the user.

Fourth, browser processing

Next is the browser for processing, through the background processing returned HTML string is accepted by the browser after reading and parsing, HTML page through loading, parsing, rendering.

  • loading

    Browsers load an HTML page from the top down. If an external CSS file is encountered during loading, the browser issues a separate request to retrieve the CSS file. When an image resource is encountered, the browser also issues a separate request to retrieve the image resource. However, when a JS file is encountered during the document loading process, the HTML document will suspend the render (load parsing render synchronization) thread, and not only wait for the completion of the JS file loading in the document, but also wait for the completion of parsing execution, before resuming the HTML document rendering thread.

  • parsing

    Parsing a document means turning it into a meaningful structure that code can understand and use. The result of parsing is usually a tree of nodes that represents the structure of the document, called a parse tree or syntactic tree, also known as a DOM tree. The diagram below:





    CSS parsing refers to parsing CSS files into stylesheet objects. The diagram below:





    Js parsing is how files are parsed as they are loaded. If you want to learn more about how browsers work, see how they work: Behind the scenes of the new Web Browser

  • Apply colours to a drawing

    The process of building a render tree is a visual representation of the DOM tree. This tree is built to draw the document contents in the correct order.

Five, draw web pages

The browser computes the render tree from HTML and CSS and eventually draws it to the screen

Classic interview questions: What happens from entering the URL to loading the page? What really happens when you navigate to a URL What is the structure of the MVC model from the URL input to the page

Because my ability is limited, if where write wrong words, please point out! Thanks for watching 😀