Situation: ONE day, I was reading the front end blog, and the front end god next to me said,

Big god: small star, give you debut interview question bai, the interview real question of some gold suit oh ~ me: huh? Yeah, what question? I'll try. God: the web page of a certain area user can not open, why appear this kind of problem or you how to solve? Me: Well, the Internet speed is bad or the server is down? Da God: notice, it is a certain area, oh, spread your mind, this is an open type of topic. Me (thinking for a moment, no good answer) : I'll do some research. Dagod: well, this problem is still quite good, think about ~ I: oh (oneself or dish) 😯Copy the code

The question is: what happens when the browser enters a URL? In addition to the basic knowledge, it also tests the developer’s ability to solve problems, which may be more important for large companies. This topic is still quite comprehensive, here to write down my own understanding, the level is limited, for reference only 😯.

First, the URL address

When a user enters a URL address in the browser, DNS resolution is performed to convert the domain name to an IP address. The browser searches for network resources on the corresponding server based on the IP address. There are a series of complex processes that will not be described here.

The DNS resolution process is as follows:

1, if the browser has cache, use the browser cache directly, otherwise use the local cache, if not, use host 2, if not, query the DNS domain name server (of course, there may be a route, also cache, etc.), query the corresponding IP addressCopy the code

Page access failure occurs in the following two cases for URL:

1. Incorrect URL

When a user enters a wrong URL, if the browser resolves that there is no network resource on the corresponding IP address, the web page will fail to load, as shown in the following figure:

2. Whether to modify the HOST file

If the user binds the url domain name address to the local HOST (common practice of developers), the IP address points to the user’s HOST during IP address resolution, resulting in the failure of loading network resources, and thus the failure of loading web pages. Of course, this situation is rare, but there is only such a possibility here, a simple list.

Two, TCP request, and the server to establish a connection

HTTP is essentially a TCP/IP request that establishes a connection to a server through a three-way handshake (abstract) :

Client: Hello, are you server? Server: Hello, I'm server, are you client client: Yes, I'm clientCopy the code

In this way, the client can interact with the server and obtain page resources only after the client establishes a connection with the server.

If the connection fails, the page will fail to load:

1. For large projects, due to the large number of concurrent visits, it is often too much for one server, so there are generally several servers to form a cluster, and then cooperate with reverse proxy to achieve load balancing. Of course, there is more than one way to achieve load balancing, so I will not go into depth here. If a server node in a region is faulty, the connection fails and network resources cannot be accessed. As a result, the page fails to be loaded.

2. In the process of establishing a connection with the server, if the user’s network environment is poor at that time, such as slow and unstable network speed, the process of establishing the connection will be affected, resulting in page loading failure.

Three, the cache

The use of caching can greatly improve the efficiency of HTTP interactions at the front and back ends, and it is almost mandatory for front-end projects that require performance.

Caches can be easily divided into two types: strong cache 200 (from cache) and negotiated cache 304. Here is not a detailed description of cache, interested students can go to research, there are a lot of knowledge points.

When the client optimizes the project using the cache, if the server is associated with some web resources updated: HTML, JS files, etc. However, the cache on the client may cause a mismatch between the cache and server resources, resulting in the unavailability of some functions or even page loading failure. This is when we hear a common refrain: Tell the user to clear the browser cache…

Well, you asked me how to clean the cache? Aesthetics of violence:

<a onclick="Alert (' Cleared successfully! ')"> Clear browser cache </a>Copy the code

Ha ha, skin a 😝 ~

Fourth, client rendering

After the interaction between the client and the server is completed, the browser kernel gets the content and begins to render the browser page, which is roughly divided into the following steps:

Parsing HTML and building A DOM tree 2. Parsing CSS and generating CSS rule tree 3. Parsing javascript and completing the construction of DOM tree and CSS rule tree 4. 5. Render tree (Layout/reflow), responsible for the size of each element, location calculation 6. 7. The browser will send the information of each layer to the GPU, which will composite the layers and display them on the screenCopy the code

HTML, CSS and JS all affect the rendering of the page

1, the network

If the user’s network environment is poor, for example, the network speed is slow or unstable, the loading of the preceding resources is affected. As a result, the browser fails to load resources and the page fails to be loaded. Network related problems were also mentioned in the TCP request above, establishing a connection with the server, with the same result, but for a different reason.

2. JavaScript blocking (browser compatibility)

In front-end development, browser compatibility must be considered: CSS properties and JS methods in the browser compatibility. The compatibility of CSS properties only affects DOM styling and does not block page rendering. If one of the JS methods is not browser-compatible, js parsing may fail and the page may fail to load. So the type of browser users use, the version should be taken into consideration.

The above is the reason WHY I think of a user web page in a certain area can not open, review summary, my understanding is that it can be analyzed from four aspects: front-end, network, back-end, browser. The current explanation and understanding may still be relatively shallow, slowly add it in the future, welcome everyone to comment and exchange learning.