Front end interview questions: from URL to page presentation, what happened?

Time:2020-2-23

Front end interview questions: from URL to page presentation, what happened?

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 ishttp://www.jianshu.com/u/b473784d730cIn which, “HTTP” means communication with web serverhttpProtocol, the domain name of Jianshu web server iswww.jianshu.comu/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
http 80
ftp 21
https 443
telnet 23
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, forhttp://www.jianshu.comThe browser doesn’t actually knowwww.jianshu.comWhat is it? We need to find itwww.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 barchrome://net-internals/#dns, you can see

Front end interview questions: from URL to page presentation, what happened?

  • 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 as114.114.114.114, that is, the domain name server in this region, is usually the application provider that provides you access to the Internet. and114.114.114.114It 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 examplewww.baidu.com.The current DNS system does not require domain names to.Come to an end, i.ewww.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 querywww.baidu,com, the top-level domain of the domain name iscomThe 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 namewww.baidu.comMediumbaidu.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:

Front end interview questions: from URL to page presentation, what happened?

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 includeapachenginxIISLighttpdAnd so on.

When the web server receives an HTTP request, it will return an HTTP response, such as an HTML page. For requests sent by different users, different requests will be entrusted to the corresponding programs on the server for processing (such as CGI script, JSP script, servlets, ASP script, server-side JavaScript, or some other server-side technologies) in combination with configuration files.

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:

Front end interview questions: from URL to page presentation, what happened?
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.

  • Load

    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.

  • analysis

    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:

Front end interview questions: from URL to page presentation, what happened?
CSS analysisResolves the CSS file to a stylesheet object. The following picture:
Front end interview questions: from URL to page presentation, what happened?
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

  • Rendering

    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


References:
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?