1. General steps

Step 1: Enter the URL:

• Url is the unified resource locator, url corresponding protocol (common HTTP (plaintext transmission), HTTPS (encrypted transmission), file, FTP, etc.), port number,
• The difference between a URL and a URI
  • Url (Resource Uniform Locator) URI (Resource Uniform Identifier)
  • A URL is a special case of a URI that contains enough information to locate a Web resource. Other URIs (such as mailto:[email protected]) are not locators because no resource can be located by their identifier. The URL is absolute; it is a structured string.
  • Urn is a subclass of URI. Urns name resources but do not specify how to locate them.

Step 2: Domain name to IP

• Procedure: Domain name (URL) => DNS (Domain Name Stystem) parser =>IP address

• Where will DNF query?

  1. Browser cache: If you have accessed the host specified by the URL before, the browser caches the IP address of the host for a period of time (specified by the browser) and finds the host using the IP address.
  2. System cache: If the browser does not have this cache, it queries the system cache. The browser makes system calls to query the cache.
  3. Router cache: If not in the system cache, then to the router cache for query;
  4. ISP DNS cache: If the router cache still fails to match, you can query the ISP DNS. Common domain names can be queried here.
  5. Recursive search: if the above are not found, then will go to the root server of the top-level domain name server for recursive query, as long as the domain name exists will certainly be able to find;

• Browser attributes: window. The navigator userAgent

Step 3: After finding the host corresponding to the IP, package and send the HTTP request

• HTTP Packet Information example get: asadasdasd.com/asdasd (Request mode… The user-agent: the type of the user’s browser version information accept: text/HTML and application/XHTML + XML, application/XML. Q =0.9,image/webp* (image/webp*) accept-encoding: gzip, deflate (deflate) Accept-language: cache-control: Max-age =0 Connection: keep-alive cookie: XXXXXXXX (user’s cookie)

• What is a cookie

  1. Cookie is a small piece of text. When the user visits the site, a cookie can be planted on the user’s browser to save the user’s relevant information. Then, when the user visits the site next time, the site will read the user’s cookie first, and then present the corresponding page (for example, after logging in once, the webpage will be automatically logged in next time).

• The uses and similarities and differences of several request methods

  • Get: request data (can also be used to send data), fetch a resource to the server, common Baidu search, with a 512 byte limit on the parameters sent, the parameters will be displayed in the URL address, in the form of key-value pairs and with? To separate;
  • Post: sends data (also used to obtain data) to the server. It is commonly used as a message board. In theory, there is no limit on the size of the attached data and the attached data will not be displayed in the URL.
  • Put: Transmits a piece of data to the server. This can be done through GET or POST.
  • Delete: Deletes a piece of data from the server. You can use get or POST to delete the data.
  • Head: query only the header of the response, but not the response.
  • Trace: Queries what nodes have passed between the local network and the station to be accessed, and queries routes.
  • Option: Asks the server what transport mode is supported.

Step 3: Create a TCP link

• Differences between UDP and TCP

  1. UDP cannot ensure the reliability of transmission. If the packet is incomplete, UDP does not resend the request (for example, only half of the image is received).
  2. TCP ensures the reliability of transmission. If the packet is incomplete, TCP resends the request.

• Why pages are sometimes incomplete is because the DOM layout is distorted when embedded resources (such as images from the IMG tag) are not downloaded;

• Related process processing (default ports are no longer displayed on the URL, here are some default ports) processes are handled by port number HTTP: 80 HTTPS: 443 Ssh: 22 FTP: 21

• Server Physical host Webserver

  • nginx
  • The apache
  • Microsoft

Step 4: The server responds to the request

• That content affects the results generated by the server

  1. Request method (get/ POST may get different)
  2. The path
  3. Request parameters (? = XXX XXX)
  4. Cookie (User identity)
  5. Server Configuration
  6. Dynamic language code logic

• The content of the server response

  1. The corresponding head
  2. response

Step 5: The browser takes the response text and renders it

• Browser render page

  1. The browser renders the page from top to bottom, rendering order is also top-down, download and render at the same time;
  2. Parsing HTML into a DOM tree;
  3. Parsing CSS into render trees
  4. Parse JS when it encounters JS, and execute immediately after parsing; (1,2 are carried out at the same time, and the page is generated while parsing, which will be constantly adjusted with the content of the page)

• Processing of associated resources

  1. When a part of the page is rendered, all the parts above it (the current HTML elements and CSS) have been downloaded;
  2. But the associated elements may not be downloaded (for example: images, videos and other elements will be downloaded in parallel);
  3. The number of concurrent downloads under the same domain name is limited (some website images and other resources will be placed on another server);

• JS and AJAX

  1. When downloading parsing JS, the browser will block the download and rendering of other resources after sending the request until the response.
  2. You can use HTML5’s asynchronous download properties (async and defer)
     • Async: Download JS with other resources after encountering it, and execute it after downloading.
     • Defer: When you encounter JS, download it along with the other resources and wait until all resources are downloaded.
  3. JS obstructs downloading because JS may change the DOM structure, resulting in page redrawing;
  4. Execute when AJAX is encountered, and then perform the following steps, waiting for AJAX to fetch the data before executing the AJAX callback;

• CSS

  1. After the CSS is downloaded, it will be parsed with all the stylesheets downloaded previously. After parsing, all the previous elements (including the rendered elements) will be rendered again.
  2. If the JS and CSS are redefined, check the priority of the item with the highest priority. If the item has no priority problem, the item later defined by the browser takes the priority.

• Blank screen and FOUC problem

  1. Blank screen problem:
     • The reason:
       • The CSS is loaded first, and then the HTML is rendered. If the LOADING time of the CSS is too long, a blank screen is displayed.
       • Using @import, even if the CSS is in the link tag, may result in a blank screen.
       • In Internet Explorer, the CSS is placed at the bottom of the page. In some scenarios (when a new window is opened or refreshed), the page will display a blank screen instead of gradually displaying the content.
       • JS placed in the header blocks the download of content after;
  2. FOUC (Style-free content flicker)
     • The reason:
       • Because of the browser rendering mechanism, and then CSS loading before rendering HTML, there will be a gradual display of unstyled content, and then suddenly out of the style of the problem;
  3. Conclusion:
     • If you wait for the CSS to download before rendering, you may end up with a blank screen.
     • If you present the page first and then render it after the CSS has been downloaded, you may cause FOUC problems.
  4. Solution: CSS in the head, JS before /body;

• Common status code

  1. 200: OK (response succeeded);
  2. 301: Moved Permanently (page redirected);
  3. 304: Not modified;
  4. 403: Forbidden (no permission to access);
  5. 404: Not Found;
  6. 500: Internal Server Error;
  7. 502: Bad Getway (server not connected)

• 304 Not Modified

  1. 304 code indicates that the page has not changed, indicating that the current page has been visited and cached within the validity period. Then the server responds last-Modified to the browser. If the browser determines that the cache has not changed, the page will be directly extracted from the local cache.
     • Cache-control: max-age=30000
     • Expires: Mon 02 Nov 2015 03:02:54 GMT
  2. If the page cache is cleared, resend the request.
  3. If the cache expires, last-modified or ETAG is validated
     • Last-modified: The time when a page was last modified;
     • Etag: a string of encrypted text. If the text remains unchanged, 304 will be sent.

Second, apache server, PHP language, dynamic website access process diagram

Three of the following

The first is that the user accesses the server’s index.html file

1. Enter the URL, through the local DNS resolution to IP address, through the IP address to find the Apache server;
2. Create a TCP connection using HTTP and connect it to the server. The default port number is 80 and request the server to download the corresponding resource.
3. The server receives the request, finds the corresponding page after opening, and then returns the content to the user’s browser;
4. The browser renders the page and presents it to the user;

Second: the user accesses the index.php file on the server

1. As above, the DNS resolved IP finds the server, and the server finds the corresponding PHP file;
2. Apache cannot process PHP files on its own, so it delegates processing to the PHP application server (which needs to be installed). To HTML static code, which is returned to Apache;
3. Apache sends HTML static code to the browser, which renders it;

Third, the user accesses the mysql database on the server

1. As above, the DNS resolved IP finds the server, and the server finds the corresponding PHP file;
2. The server delegates PHP application servers to parse PHP files; ★3. PHP The server opens a PHP file, links to the database through the code connected to the database in the PHP file, and then operates the data in the database through SQL statements. After finding the data, the PHP server converts it into HTML static code and returns it to Apache.
3. The Apache returns to the browser, which renders and renders;