This is the 14th day of my participation in the August More Text Challenge. For details, see: August More Text Challenge;

First, write in front

As front-end developers, we deal with the most software in daily development, besides VS Code is Chrome? Haha, of course this is not absolute, in addition to the code editor, is the browser.

We use the browser to see if the HTML and CSS we write are valid, use the console and breakpoints to debug the JS code, and use the Network panel to see the results of requests for some network resources and interfaces. Do you know how the browser makes a network request? Let me give you a brief overview.

Second, the body

We go directly to the home page of the nugget, and then open the console Network panel to see some of the following interface requests. There are HTML files, JS files, CSS files, image resources files, and some did not intercept some network request font files.

In addition to these files, we can also see the request status of these requests, such as 200 successful, 301 redirection, 403 access denied, 404 not found, and so on, as well as some request headers request body, response header response body, file size, request time, and so on.

When the browser requests the first file, that is, the document of juejin. Cn, the browser will start to try to load it. When the page loads CSS and JS or image files, the browser will also initiate a new request to the corresponding file.

Back to our question, how do browsers make these web requests?

In fact, after we enter a website, the moment we hit Enter, the browser will start the network request, the main process is divided into the following steps:

  1. DNS domain name resolution: Locate the server IP address based on the domain name
  2. The browser establishes a TCP connection with the server
  3. The browser initiates an HTTP request; The server returns the appropriate request resource, which is the HTML file of the first requested page
  4. The browser parses the HTML file, and requests the js file, CSS file, image resources and other files that are parsed
  5. The browser integrates this information and renders it to the page

Third, summary

Today we learn about how the browser will be the main network request, and a request after the network request page, between page rendering is roughly what a process, believe that after I read this article you should have a preliminary understanding of this process on, behind me to learn more together with everybody every step of the process.

The front is a long distance, we are all on the road, hope to communicate with friends, progress together. Keep updating ing…..