javascript - How many TCP connections will chrome establish when an html page with one css file and one js file is accessed? How many http requests are made?

As the title says.
In addition, is the effect of using ajax to obtain data the same as that of pre-loading the web page? That is, are the established TCP connections and http requests the same?
Would it be very resource consuming if we had to handshake every time? Wouldn't it be better to put all elements on the same page when publishing?

Reply content:

As the title says.
In addition, is the effect of using ajax to obtain data the same as that of pre-loading the web page? That is, are the established TCP connections and http requests the same?
Would it be very resource consuming if we had to handshake every time? Wouldn't it be better to put all elements on the same page when publishing?

Every resource in the page, any resource, needs to send an http request to load.

Question 1: Ajax and preloading load resources in different orders, but both generate HTTP requests for the same number of resources. The former allows you to see the main body of the page first and then display partial information, while the latter is presented all at once after loading. The application scenarios are also different.

Question 2: If both the HTTP request header and the response header set Connection:keep-alive, multiple HTTP requests will share a TCP connection. I just found an article: Detailed explanation of HTTP protocol headers and Keep-Alive mode

Question 3: Refer to question 2

Question 4: The front-end optimization direction includes reducing the number of HTTP requests, so there are optimization solutions such as CSS sprites and Data URLs. However, it also increases the complexity of resource maintenance and update.