HTTP, browser interview questions (1)

1. What are the storage methods of the browser?

	Data life cycle	Data storage size	Communicate with the server
cookie	Generally generated by the server, expiration time can be set	4K	It will be carried in the header every time, affecting the performance of the request
localStorage	Unless it is cleaned up, it will always exist	5M	not joining
sessionStorage	Clean up when the page is closed	5M	not joining
indexedDB	Unless it is cleaned up, it will always exist	unlimited	not joining

Supplement:
Cookies are not originally used to store, but to communicate with the server. If you need to access, please encapsulate the api by yourself. LocalStorage comes with its own getItem and setItem methods, which is very convenient to use.

localStorage Note:

• localStorage can only store strings, and access to JSON data requires JSON.stringify() and JSON.parse();
• In case of browsers that disable setItem, you need to use try...catch to catch the exception;

2. Can you talk about the front-end and back-end cross-domain? How to solve cross-domain?

Principles of Nine Cross-Domain Ways
If we already understand cross-domain, if we ask: What is the danger if the browser does not have the same-origin policy? Isn't it a moment of confusion?
The following are selected examples, for reference: Reasons why AJAX cross-domain access is prohibited

Suppose there is a hacker named Xiaohei. He grabbed a bunch of pictures of beautiful women from the Internet to make a website, and his daily visits are exploding.
In order to maintain the operation of the website, Xiao Hei hung up a collection code. He felt that a good website could be properly funded, but he was helpless to reach out to the party too much, and Xiao Hei's website could not make ends meet.
So he was very angry and wrote a piece of js code in the web page, and used ajax to initiate a login request to Taobao. Because many people have visited Taobao, there are Taobao cookies in the computer, so you can log in automatically without entering the account password. , And then Xiaohei parsed the data returned by Taobao in the ajax callback function, obtained private information from many people, and sold it, and Xiaohei’s website finally made a profit.
If AJAX requests can also be sent across domains, Xiaohei will really gain the user's privacy and successfully make a profit! ! !

3. Understanding of browser cookie and session

Session is implemented based on cookies . The cookie is stored in the client browser, and the session is stored on the server. The cookie mechanism is to confirm the customer's identity by checking the "passport" on the customer, then the session mechanism is to confirm the customer's identity by checking the "customer list" on the server. The session is equivalent to a client file created by the program on the server. When a client visits, it only needs to query the client file table.

the difference:

• The
  cookie exists in the temporary folder of the client; the
  session exists in the memory of the server, and a session domain object serves a user's browser;
• The security
  cookie is stored on the client in plain text, with low security, and can be stored after being encrypted by an encryption algorithm;
  session is stored in the memory of the server, so the security is good;
• Life Cycle (Take 20 minutes as an example)
  The life cycle of a cookie is cumulative, starting from the time of creation, and the cookie life cycle ends after 20 minutes;
  the life cycle of a session is interval, starting from the time of creation, such as 20 minutes If there is no access to the session, the life cycle of the session is destroyed. However, if the session is accessed within 20 minutes (such as at the 19th minute), the life cycle of the session will be recalculated. The close opportunity causes the end of the session life cycle, but it has no effect on the cookie;
• Access range
  cookie is shared by multiple user browsers;
  session is exclusive to one user browser;
  portal: thoroughly understand cookie, session, token

4. What happens when you enter the URL?

• DNS domain name resolution (the domain name is resolved into an ip address, using the UTP protocol, so there will be no handshake process) the
  browser resolves the URL to the IP address of the corresponding server (1. Find it in the DNS cache of the local browser; 2. Go to The system DNS cache sends the query request; 3. Then to the router DNS cache; 4. The network operator DNS cache; 5. Recursive search;), and resolve the port number from the url.
• The browser establishes a TCP connection with the target server (three-way handshake);
• The browser sends an HTTP request message to the server;
• The server returns an HTTP response message to the browser;
• The browser performs rendering;
• Close the TCP connection (waves four times);

5. Browser rendering steps

• HTML parses out DOM Tree;
• CSS parses out Style Rules;
• Link the two to generate Render Tree;
• Layout calculates the information of each node according to the Render Tree;
• Painting renders the entire page according to the calculated information;

When the browser is parsing the document, if it encounters the script tag, it will immediately parse the script and stop parsing the document (because JS may change the DOM and CSS, and if it continues to parse it will cause waste).
If it is an external script, it will continue to parse the document after the script download is complete. Now the script tag has added defer and async attributes. The script parsing will parse out the changes in the DOM and css in the script and append them to the DOM Tree and Style Rules.

6. Page rendering optimization

Based on the understanding of the rendering process, the following optimizations are recommended:

• HTML document structure has as few levels as possible, preferably no deeper than 6 levels;
• Try to put the script behind to avoid organizing page loading;
• A few above-the-fold styles can be placed in the notes;
• The style structure level is as simple as possible;
• Scripts reduce DOM operations, reduce reflow, and try to cache style information for accessing DOM;
• Minimize the JS modification style, which can be solved by modifying the class name;
• Reduce DOM lookup and cache DOM lookup results;
• When the animation is off the screen or when the page is scrolling, try to stop it;

7. Forced and negotiated caching

• Mandatory caching is when we set an expiration time in the http response header when we request a resource for the first time, it will be directly obtained from the browser within the time limit, common http response header fields such as Cache-Control and Expires;
• Negotiation caching is that we judge whether the resource on the server is modified through the http response header field etag or Last-Modified, etc., if it is modified, it will be retrieved from the server, if it is not modified, 304 will point to the browser cache for retrieval;

8. The difference between GET and POST requests

• GET parameters are passed through the url, and POST is placed in the body (the http protocol stipulates that the url is in the request header, so the size limit is very small);
• The parameters passed in the url of a GET request have a length limit, while POST does not (the http protocol stipulates that the url is in the request header, so the size limit is very small);
• GET is harmless when the browser rolls back, and POST will submit the request again;
• GET requests will be actively cached by the browser, while POST will not, unless manually set;
• GET is more insecure than POST, because the parameters are directly exposed in the url, so it cannot be used to transmit sensitive information;
• Regarding the data type of the parameter, GET only accepts ASCII characters, while POST has no restrictions;
• GET request can only be url (x-www-form-urlencoded) encoding, while POST supports multiple encoding methods;
• GET generates one TCP data packet, and POST generates two TCP data packets;
  for GET requests, the browser will send the http header and data together, and the server will respond with 200 (return data). For POST, the browser sends the header first, the server responds with 100 continue, the browser sends data again, and the server responds with 200 ok (return data)

9. HTTP1.0 / 1.1 / 2.0 and HTTPS

The HTTP common sense you need to know
can be the most comprehensive http interview answer in the entire network.
How to talk about HTTP/1.0/1.1/2.0 elegantly

Compared with HTTP1.0 and HTTP1.1

• HTTP1.0 defines three request methods: GET, POST and HEAD methods;
  HTTP1.1 adds six new request methods: OPTIONS, PUT, PATCH, DELETE, TRACE and CONNECT methods;

• Cache processing
  HTTP1.0 mainly uses If-Modified-Since and Expires in the header as the criteria for caching judgment;
  HTTP1.1 introduces more cache control strategies such as: Entity tag, If-Unmodified-Since, If -Match, If-None-Match and more optional cache headers to control the cache strategy;

• Bandwidth optimization and network connection use
  HTTP1.0, there are some phenomena of wasting bandwidth, for example: the client only needs a part of a certain object, but the server sends the whole object, and does not support the function of resumable transmission;
  HTTP 1.1 introduced the range header field in the request header, which allows only a certain part of the resource to be requested, that is, the return code is 206 (Partial Content), which facilitates the free choice of developers to make full use of bandwidth and connections.

• Error notification management: 24 new error status response codes have been added to HTTP 1.1, such as: 409 (Conflict) indicates that the requested resource conflicts with the current state of the resource; 410 (Gone) indicates that a certain resource on the server is Permanent deletion;

• Host header processing
  HTTP1.0 thinks that each server is bound to a unique IP address, so the URL in the request message does not pass the hostname (hostname). But with the development of virtual host technology, there can be multiple virtual hosts (Multi-homed Web Servers) on a physical server, and they share an IP address.
  Both the request message and response message of HTTP1.1 should support the Host header field, and if there is no Host header field in the request message, an error (400 Bad Request) will be reported;

• 
  Persistent Connection HTTP 1.1 supports Persistent Connection and Pipelining processing of requests. Multiple HTTP requests and responses can be transmitted on a TCP connection, which reduces the consumption and delay of establishing and closing connections. It is the default in HTTP 1.1 Open Connection: keep-alive, to a certain extent make up for the shortcomings of HTTP1.0 that each request has to create a connection. By setting the HTTP request header and response header, it is ensured that after the end of this data request, the channel can still be reused for the next request to avoid re-handshake.

Compared with HTTP2.0 and HTTP1.X

• New Binary Format: The parsing of HTTP1.x is based on text. The format analysis based on the text protocol has natural defects, and the expression of the text is diversified. There are bound to be many scenarios to consider the robustness. The binary system is different, and only the combination of 0 and 1 is recognized. Based on this consideration, the protocol analysis of HTTP2.0 decided to adopt the binary format, which is convenient and robust.
• Multiplexing (MultiPlexing): That is, connection sharing, that is, each request is used as a connection sharing mechanism. A request corresponds to an id, so that there can be multiple requests on a connection, and the requests of each connection can be randomly mixed together, and the receiver can assign the requests to different server requests according to the request id.
• Header compression: As mentioned above, the header of HTTP1.x mentioned earlier contains a lot of information, and it must be sent repeatedly every time. HTTP2.0 uses the HPACK algorithm specially designed for header compression, and the encoder is used to reduce The size of the header that needs to be transmitted, each of the communication parties caches a header fields table, which not only avoids repeated header transmission, but also reduces the size that needs to be transmitted.
• Server push: Server push can send the resources needed by the client to the client along with index.html, eliminating the need for the client to repeat the request. Because there are no operations such as initiating requests, establishing connections, etc., static resources can be pushed through the server to greatly increase the speed. For example, my webpage has a request for sytle.css. When the client receives the sytle.css data, the server will push the sytle.js file to the client. When the client tries to obtain sytle.js again, it will be fine. Get it directly from the cache, no more requests.

HTTPS vs. HTTP

• The HTTPS protocol requires a CA to apply for a certificate. Generally, there are few free certificates and a fee is required;
• HTTP protocol runs on TCP, all transmitted content is plaintext, HTTPS runs on SSL/TLS, SSL/TLS runs on TCP, and all transmitted content is encrypted;
• HTTP and HTTPS use completely different connection methods and use different ports. The former is 80 and the latter is 443;
• HTTPS can effectively prevent operator hijacking and solve a big problem of anti-hijacking;

HTTPS introduction: HTTPS requires a handshake between the client (browser) and the server (website) before transmitting data. During the handshake process, the password information for the encrypted transmission of the data will be established. The TLS/SSL protocol is not just a set of encrypted transmission protocols. Asymmetric encryption, symmetric encryption and HASH algorithms are used in TLS/SSL.

A brief description of the handshake process is as follows:

1. The browser sends a set of encryption rules it supports to the website.
2. The website selects a set of encryption algorithms and HASH algorithms, and sends its identity information back to the browser in the form of a certificate. The certificate contains information such as the website address, encryption public key, and the issuing authority of the certificate.
3. After obtaining the website certificate, the browser has to do the following:
   a. Verify the validity of the certificate (whether the certificate issuing authority is legal, whether the website address contained in the certificate is consistent with the address being visited, etc.), if the certificate is trusted, the browser A small lock will be displayed in the column, otherwise a prompt will be given that the certificate is not trusted.
   b. If the certificate is trusted, or the user accepts an untrusted certificate, the browser will generate a string of random numbers and encrypt it with the public key provided in the certificate.
   c. Use the agreed HASH to calculate the handshake message, and use the generated random number to encrypt the message, and finally send all the previously generated information to the website.
4. After the website receives the data sent by the browser, do the following operations:
   a. Use your private key to decrypt the information and take out the password, use the password to decrypt the handshake message sent by the browser, and verify whether the HASH is consistent with the one sent by the browser .
   b. Use a password to encrypt a handshake message and send it to the browser.
5. The browser decrypts and calculates the HASH of the handshake message. If it is the same as the HASH sent by the server, the handshake process ends at this time. After that, all communication data will be encrypted by the random password generated by the previous browser and using a symmetric encryption algorithm.

Here, the browser and the website send encrypted handshake messages and verify each other, the purpose is to ensure that both parties have obtained a consistent password and can encrypt and decrypt data normally. Among them, the asymmetric encryption algorithm is used to encrypt the generated password during the handshake process, the symmetric encryption algorithm is used to encrypt the real transmitted data, and the HASH algorithm is used to verify the integrity of the data. Since the password generated by the browser is the key to the encryption of the entire data, an asymmetric encryption algorithm is used to encrypt it during transmission. The asymmetric encryption algorithm generates a public key and a private key. The public key can only be used to encrypt data, so it can be transmitted at will. The private key of the website is used to decrypt the data, so the website will take care of its private key. Prevent leakage. If there is any error in the TLS handshake process, the encrypted connection will be disconnected, thereby preventing the transmission of private information. It is precisely because HTTPS is very secure that attackers cannot find a place to start, so they use fake certificates to deceive clients to obtain information in plain text.

10. Introduce the 304 process

a. When the browser requests a resource, it first hits the Expires and Cache-Control of the resource. Expires is limited to the local time. If the local time is modified, the cache may become invalid. You can specify the maximum life cycle through Cache-control: max-age. The status still returns 200, but no data is requested, and the word from cache can be clearly seen in the browser.

b. The strong cache is invalid and enters the negotiation cache stage. First, verify that ETagETag can ensure that each resource is unique, and resource changes will cause ETag changes. The server judges whether the cache is hit according to the If-None-Match value sent by the client.

c. Negotiation cache Last-Modify/If-Modify-Since stage, when the client requests a resource for the first time, Last-Modify will be added to the header returned by the service server, and Last-modify is a time to identify the last modification time of the resource . When the resource is requested again, the request header will contain If-Modify-Since, which is the Last-Modify returned before caching. After receiving the If-Modify-Since, the server judges whether it hits the cache according to the last modification time of the resource.

11. HTTP Status Code

1xx (temporary response) indicates a temporary response and a status code that requires the requester to continue the operation

• 100-The continuation requester should continue to make the request. The server returns this code to indicate that it has received the first part of the request and is waiting for the rest;
• 101-The switch protocol requester has asked the server to switch the protocol, and the server has confirmed and is ready to switch;

2xx (success) indicates the status code of the request successfully processed

• 200-Success The server has successfully processed the request. Usually, this means that the server provided the requested page;
• 201-The creation request was successful and the server created a new resource;
• 202-Accepted The server has accepted the request, but has not yet processed it;
• 203-The unauthorized information server has successfully processed the request, but the returned information may come from another source;
• 204-No content server successfully processed the request, but did not return any content;
• 205-The reset content server successfully processed the request, but did not return any content;
• 206-Some content servers successfully processed some GET requests;

3xx (redirect) indicates that further action is required to complete the request; usually, these status codes are used for redirection

• 300-Multiple options In response to requests, the server can perform multiple operations. The server can select an operation according to the requester (user agent), or provide a list of operations for the requester to choose;
• 301-The requested webpage has been permanently moved to a new location. When the server returns this response (response to a GET or HEAD request), it will automatically transfer the requester to the new location;
• 302-The temporary mobile server currently responds to requests from web pages in different locations, but the requester should continue to use the original location for future requests;
• 303-View other locations when the requester should use separate GET requests for different locations to retrieve the response, the server returns this code;
• 304-Not modified Since the last request, the requested page has not been modified. The server returns this response without returning the content of the webpage;
• 305-Use proxy The requester can only use the proxy to access the requested web page. If the server returns this response, it also indicates that the requester should use a proxy;
• 307-Temporary redirection server currently responds to requests from web pages in different locations, but the requester should continue to use the original location for future requests;

The 4xx request error status code indicates that the request may be wrong, which prevents the server from processing

• 400-Error request server does not understand the syntax of the request;
• 401-Unauthorized request requires authentication. For web pages that need to log in, the server may return this response;
• 403-The server is forbidden to reject the request;
• 404-The server cannot find the requested page;
• 405-Method to disable the method specified in the disabling request;
• 406-Do not accept web pages that cannot respond to requests with the requested content features;
• 407-Agent authorization is required. This status code is similar to 401 (Unauthorized), but specifies that the requester should authorize the use of the agent;
• 408-Request timeout timed out while the server was waiting for the request;
• 409-The conflicting server has a conflict when completing the request, and the server must include information about the conflict in the response;
• 410-Deleted If the requested resource has been permanently deleted, the server will return this response;
• 411-A valid length is required. The server does not accept requests without a valid content length header field;
• 412-Preconditions not met The server did not meet one of the preconditions set by the requester in the requester;
• 413-The request entity is too large and the server cannot process the request because the request entity is too large, which exceeds the processing capacity of the server;
• 414-The requested URI is too long. The requested URI (usually a URL) is too long for the server to process;
• 415-Media type is not supported. The requested format is not supported by the requested page;
• 416-The requested range does not meet the requirements. If the page cannot provide the requested range, the server will return this status code;
• 417-Expectation not met The server did not meet the requirements of the "Expectation" request header field;

The 5xx server error status code indicates that an internal error occurred while the server was trying to process the request. The error may be an error of the server itself, not a request error

• 500-Server internal error The server encountered an error and could not complete the request;
• 501-Not yet implemented The server does not have the capability to complete the request. For example: the server may return this code when the request method is not recognized;
• 502-Wrong gateway server is acting as a gateway or proxy, and cannot receive an invalid response from the upstream server;
• 503-Server unavailable The server is currently unavailable (due to overload or downtime for maintenance). Usually, this is only a temporary state;
• 504-The gateway timeout server is acting as a gateway proxy, but it did not receive a request from the upstream server in time;
• 505-HTTP version is not supported The server does not support the HTTP protocol version used in the request;

12. Web performance optimization

Hi, send you a web performance optimization map