Discussion from URL input to page presentation

What is a URL a URL is uniform
resourcesLocalizer, pair can be from
The InternetIs the address of a standard resource on the Internet. Every file on the Internet has a unique URL that contains information indicating where the file is and what the browser should do with it.
 ^[1]

It was originally invented by Tim Berners-Lee as the address for the World Wide Web. It has now been compiled by the world wide web consortium as the Internet standard RFC1738.

Type the URL in the browser’s address bar

The basic URL contains the mode (or protocol), server name (or IP address), path, and file name, for example, “Protocol :// authorization/path? The query “. The complete common UNIFORM Resource Identifier syntax, with the authorization part, looks like this: Protocol :// Username: password @subdomain name. Top-level domain name: port number/directory/file name. File suffix? Parameter = value # flag.

Protocol type ://< host name IP>:< port >/< path >/ file name Protocol type (Scheme) The most commonly used Hypertext Transfer Protocol (HTTP for short) is also known as HTTP. The protocols are as follows:

Mailto – email address – LDAP – Lightweight directory Access protocol (LDAP) search -file – files shared on a local computer or online -news – Usenet newsgroup -gopher – Gopher

(2) 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 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

Search the IP address corresponding to the domain name in the local DNS cache based on the URL

1 – find the browser cache browsers and operating system in the website domain name for the actual IP address IP cache of its own, after repeated access to the same domain name in a short time, can directly read the IP address of the corresponding domain in the DNS cache, in order to reduce the wastage of the network request (in the browser first DNS cache lookup, if not found, Will be looked up in the operating system DNS cache). Both browsers and operating systems have a fixed DNS cache time, in which Chrome’s expiration time is 1 minute, and DNS will not be re-requested within that time. You can easily view the DNS cache time in Chrome. Enter the following information in the address bar:

chrome://net-internals/#dns

2- Find the operating system cache (query hosts files)

If no IP address corresponding to the domain name is found in the local DNS cache, the system queries the hosts file to check whether there is an IP address corresponding to the current domain name. If yes, the system uses the IP address. If no, the DNS server performs domain name resolution to translate the domain name to the IP address.

3- 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.

4- Search 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.

5- Iterative query

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. www.baidu.com can be resolved, but many DNS resolution service providers still require the DNS record to be filled in with. To end the domain name.

– Root Domain Returns the IP address of the top-level domain of the domain to be queried (for example, to query www.baidu,com, the top-level domain is com) to the local DNS.

– The local DNS sends requests to the top-level domain (namely, the COM domain) based on the returned IP address. The COM domain server returns the IP address of the secondary domain (namely, baidu.com in www.baidu.com) of the domain name 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 following figure best illustrates this iterative query:

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 www.baidu.com/ HTTP/1.1

The server processes the request

The browser connects to the server and sends the request to the server. The application that handles the request, 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.

Process diagram:

Fourth, browser processing

After receiving the response from the server, the browser will read and parse the HTML string in the response sentence by sentence, and then send a request to download the CSS file after parsing to the link tag, and then send a request to download the JS file after parsing to the script tag, and then execute the code, and then send a request to obtain the image resource after parsing to the IMG tag.

The browser calculates the rendering tree according to HTML and CSS, and draws the web page on the screen in combination with the execution results of relevant JS. – 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 Parses CSS files into stylesheet objects. The diagram below:

Js parsing
How browsers work: Behind the scenes of the new Web browser

Five, draw web pages

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. The browser calculates the rendering tree according to HTML and CSS, and draws the web page on the screen in combination with the execution results of relevant JS.