2019 front-end interview series --HTTP, browser face questions

Browser stores the way what

characteristic	cookie	localStorage	sessionStorage	indexedDB
Data Lifecycle	Typically generated by the server, the expiration time may be provided	Unless it is cleaned, otherwise there has been	Close page to clean up	Unless it is cleaned, otherwise there has been
The data store size	4K	5M	5M	unlimited
Communicate with the server	It will be carried in each header, in the request for the performance of impact	not joining	not joining	not joining

He added: cookie is not used to store the original, but to communicate with the server, the package needs to access your own api.
And then comes getItem localStorage and setItem methods, very easy to use.

localStorage Precautions:

1. localStorage can store strings of data to be accessed with the JSON.stringify JSON () and the JSON.parse ()
2. SetItem met disable the browser, you need to use try ... catch to catch exceptions

Front and rear side cross-domain can be said about it? How to solve cross-domain?

Nine kinds of cross-domain way to achieve the principles of
how cross-domain we have to understand, if asked: browser does not have the same origin policy will be any danger? Is not it an instant ignorant force?
The following are excerpts of the case, refer to: the reason AJAX cross-domain access is prohibited

Suppose a hacker called the black, he grabbed a bunch of hot girls from the Internet to do a website, daily visits burst table.
In order to maintain the website running, black and hung a collection code, that site can fund it properly good, but too many frustration hand party, black website to make ends meet.
So he was very angry and write in a web page for some js code that uses ajax initiate log-in request to Taobao, because a lot of the number of people visited Taobao, so the computer there Taobao cookie, do not need to enter the account password directly to log on automatically then black parse the data returned in Taobao ajax callback function, get a lot of people's private information, resale and selling, the black of the website is finally profitable.
If you can also send cross-domain AJAX requests, black really get into the user's privacy and a profitable success! ! !

Browser session cookie and understanding of.

cookie-based session is implemented. cookie stored in the client browser and the session saved on the server. cookie mechanism is used to determine the identity of the customer by checking the customer who "pass", then the session is a mechanism to verify the identity of customers through "customer list" to check on the server. session is equivalent to a program built on a customer file server, customers only need to check when visiting customer file table on it.

cookie and session difference:

1. There is location:
   the cookie exists in the client, the temporary folder; session in memory of the server, a session object to a domain user's browser service
2. Security
   cookie is stored in clear text client, security is low, can be encrypted and stored by an encryption algorithm; session stored in memory on the server, so security is good
3. Life Cycle (to 20 minutes, for example)
   cookie life cycle is cumulative, from the time of creation begins as soon as 20 minutes after the end of the life cycle cookie;
   the session's life cycle is the interval from the time of creation, as in 20 starts counting minute, do not have access session, then the session life cycle is destroyed. However, if within 20 minutes (as in the first 19 minutes) visited the session, then the session will recalculate the life cycle. Off the opportunity to cause the end of the session life cycle, but has no effect on cookie
4. Access range
   cookie for multiple users share a browser; session to a user's browser exclusive

What happened to enter the URL?

1. DNS DNS (domain names into ip address, go UTP protocol, so there is no handshake): The browser will parse out the URL corresponding to the server's IP address (1. DNS cache on the local browser 2. Find again DNS cache system 3. send request again router DNS cache 4. the network operator DNS cache recursive search), and parse the port number from the url
2. Browser to establish a TCP connection with the target server (three-way handshake)
3. The browser sends an HTTP request to the server message
4. Server returns to the browser an HTTP response message
5. Browser rendering
6. Close the TCP connection (four wave)

Browser rendering step

1. HTML parsing the DOM Tree
2. CSS Style Rules parsed
3. Both Correlation Render Tree
4. Layout (layout) Render Tree information is calculated for each node according to

5. Painting rendering the entire page is calculated based on good information

   Process browser parses the document, if you encounter a script tag, parses the script immediately stop parsing the document (because JS and DOM may change the CSS, if it continues to resolve wasteful).
   If an external script, the script will wait to continue parsing the document after the download is complete. Now the script tag adds defer and async attribute, the script will parse the script changed DOM and css place> parsed, appended to the DOM Tree and Style Rules

Page rendering optimization

Based on knowledge of the rendering process, we recommend optimization:

1. HTML document structure hierarchy as little as possible, preferably no deeper than 6 layers
2. Try to put the script back, avoid tissue page loads
3. A small amount of the first screen pattern can be placed in notes
4. Style structure level as simple as possible
5. DOM scripting reduce operations, reduce reflux, try to access the cache DOM style information
6. JS minimize modify the style, class names can be resolved by modifying the way
7. Find reduce DOM, DOM cache search results
8. Animation when scrolling the screen or page outside, try to stop

Forced cache and cache consultation

• Forced cache is the first time we set the resource request http response headers in an expiration time, will be accessible on the prescription directly from the browser, common http response header fields such as Cache-Control and Expires

• Negotiation is whether we modify the cache by the etag http response header fields such as judge or Last-Modified server resources, if you modify retrieve from the server, if carried out to obtain 304 points to the unmodified browser cache

The difference between GET and POST requests

• GET url passed parameters, POST placed in the body. (Http agreement, url in the request header, the size limit is small)
• GET request parameters passed in the url is the length restricted, but no POST. The reason see above ↑↑↑
• GET fallback when the browser is harmless, and POST will submit the request again
• GET requests are active cache browser, POST will not, unless manually set
• GET is more secure than the POST, as directly exposed to the url parameter can not be used to transmit sensitive information
• The data type of the parameter, GET accepts only ASCII characters, but there is no limit POST
• GET requests only url (x-www-form-urlencoded) encoding, and supports a variety of encoding POST
• GET generates a TCP packet; generating the POST two TCP packets . For the GET request, the browser will http header and the data sent along with the server response 200 (return data). For POST, the browser transmits the first header, the server response 100 continue, the browser then transmits data, in response to the server 200 ok (return data)

HTTP1.0 / 1.1 / 2.0 及HTTPS

You need to know about HTTP common sense
may be the most complete whole network http interview answer
how elegant talk HTTP / 1.0 / 1.1 / 2.0

HTTP1.1 is currently the most widely used HTTP protocol

• HTTP1.0 and compared HTTP1.1
  • Processing Cache: In HTTP1.0 header is mainly used in the If-Modified-Since, Expires do standard cache determination, HTTP1.1 it introduces more cache control strategy e.g. Entity tag, If-Unmodified-Since, If-Match, If-None-Match, and more choice of head control cache caching policy.
  • Bandwidth optimization and network connection to use: HTTP1.0, there are some waste bandwidth phenomena, such as the client needs only a part of an object, and the server puts the whole object gets here and does not support the HTTP functionality, HTTP1.1 introduced the range request header header field, which allows only a certain portion of the requested resource, i.e., the return code is 206 (Partial Content), so to facilitate freedom of choice of the developer in order to fully utilize the bandwidth and connectivity.
  • Error notification management: In HTTP1.1 added in response to the error status code 24, such as 409 (Conflict) represents the current state of the resource request and resource conflicts; 410 (Gone) represents a resource on the server is permanently nature delete.
  • Host header processing: each server are considered to bind a unique IP address in HTTP1.0, therefore, the request URL in the message did not get through the host name (hostname). But with the development of virtual mainframe technology, there can be multiple virtual hosts (Multi-homed Web Servers) on a single physical server, and they share a single IP address. HTTP1.1 request and response messages should support Host header field, and the request message if no Host header field report an error (400 Bad Request).
  • Long connection: HTTP 1.1 support long connector (PersistentConnection) and request pipeline (Pipelining) process, in a TCP connection may transmit a plurality of HTTP requests and responses, and close the connection establishment reducing consumption and delay in the HTTP1.1 enabled by default connection: keep-alive, to some extent make up for the shortcomings HTTP1.0 each request to create a connection. After setting the http request by the head and the head response, to ensure the end of this data requests, the next request still can reuse this channel, to avoid re-handshake.
• HTTP2.0 and compared HTTP1.X
  • The new binary format (Binary Format): HTTP1.x text of the resolution is based. Parse text-based format protocol naturally occurring defects, there is diversity in forms of text, the robustness of the scene to do a lot to consider inevitable, binary is different, recognize only the combination of 0's and 1's. Based on this consideration HTTP2.0 decided to adopt the protocol parsing binary format, convenient and robust implementation.
  • Multiplexing (MultiPlexing): i.e. Connection Sharing, i.e. each request is a sharing mechanism is used as a connection. A request corresponds to a id, there may be a plurality of such connection request, each request may be connected to random mixed together, then the receiver may be attributed to their different request service ends according to a request which the request ID.
  • header compression: In said above, of the previously mentioned HTTP1.x header with a large amount of information, and is repeatedly transmitted every time, HTTP2.0 HPACK using special algorithms designed headed compression, to reduce the use of encoder We need to transfer header size, each of the parties communications cache header fields of a table, both to avoid repeating header of transmission, but also reduces the size to be transferred.
  • Server push (server push): the server can push client resources needed along with the index.html sent along to the client, eliminating the need for repeat steps a client request. Because not initiate a request to establish a connection and other operations, so the push of static resources by way of the server can greatly enhance the speed. For example, I have requested a page sytle.css, but received sytle.css data on the client side, the server will sytle.js files pushed to the client when the client can again try to obtain sytle.js to obtain directly from the cache, no longer need to send a request.
• HTTPS than HTTP
  • HTTPS protocol requires the CA to request a certificate, the certificate is generally free little need to pay.
  • HTTP protocol runs on top of TCP, all the contents are transmitted in clear text, HTTPS runs over SSL / TLS, SSL / TLS runs over TCP, the contents of all transmissions are encrypted.
  • Using HTTP and HTTPS connection is completely different, with the port are not the same, the former is 80, which is 443.
  • HTTPS can effectively prevent hijacking operators to solve a big problem of anti-hijack.

HTTPS Description: HTTPS need to conduct a handshake between the client (browser) and server (website) before transmitting data, establish password information encrypted transmission of data both in the handshake process. TLS / SSL protocol just set encrypted transmission protocol, TLS / SSL used in asymmetric encryption, symmetric encryption and HASH algorithm.

A brief description of the handshake is as follows:

1. The browser sends its own set of encryption rules to support the site.
2. The site selected from a group encryption algorithm and HASH algorithm, and their identity information in the form of a certificate sent back to the browser. Certificate which contains the website address, public key encryption, as well as information about the certificate authority and so on.
3. After obtaining the certificate of the website your browser does the following:
      . A legality verification certificate (the certificate issued by the agency is legitimate, website address if the address contained in the certificate is consistent with being accessed, etc.), if the certificate is trusted, then the browser displays a small bar inside the lock, otherwise they will be given a certificate untrusted tips.
      b. If the certificate is trusted, or is the user accepts the certificate is not the letter, the browser will generate a password string of random numbers and encrypted with the public key certificate provided.
      c. Use good agreement handshake message HASH calculation, and uses a random number generation to encrypt the message, and finally all of the information will be sent to the site previously generated.
4. website to do the following operation to receive data sent by the browser after:
      . A uses its own private key to decrypt the message out passwords, using password decryption browser sent a handshake messages and verify whether the browser HASH sent consistent.
      b. Use password encryption for a handshake message, sent to the browser.
The calculated HASH browser and decrypts handshake message sent to the server and if the HASH, where this end of the handshake, the communication data after all of the browser will be generated before the random password and encrypted using a symmetric encryption algorithm.

Here browsers and websites to send each other encrypted handshake messages and verify that the aim is to ensure that both sides get the same password, and can be a normal encryption and decryption of data. Wherein an asymmetric encryption algorithm for encrypting passwords generated during the handshake, the symmetric encryption algorithm for encrypting data is actually transmitted, the HASH algorithm for data integrity verification. Because the browser generated password is the key data encryption, so when transmitted using asymmetric encryption algorithm to encrypt. Asymmetric encryption algorithm will generate a public key and a private key, a public key can only be used to encrypt the data, so you can freely transfer, while the private key for the site to decrypt the data, so the site will be very careful to keep their private key, prevent leakage. TLS handshake process if there are any errors, will make an encrypted connection is disconnected, thereby preventing the transmission of private information. It is because of very HTTPS security, an attacker can not find the place to start, so more is the use of false certificates of tactics to deceive the client, in order to gain information plaintext.

Introduce the next process 304

. A browser first hit resource requests a resource Expires and Cache-Control, Expires limited to local time, local time if modified, could cause cache invalidation, by Cache-control: max-age specifies the maximum life cycle, the state still returns 200, but will not request data in a browser can clearly see from cache words.

b. Strong cache miss, the cache into the negotiation stage, first verify ETagETag can guarantee that every resource is the only resource ETag change will lead to change. The server sent to the client If-None-Match value to determine whether a cache hit.

c. Consultative cache Last-Modify / If-Modify-Since stage, the first time a client requests a resource, header service returned service will add Last-Modify, Last-modify is a time to identify the resource of last modification time . Again the resource request, request the request header contains If-Modify-Since, the buffer is returned before the Last-Modify. After the server receives the If-Modify-Since, according to the last modification time resources to determine whether a cache hit.

HTTP status code

• 1xx (provisional response) shows a state in a provisional response and require the requestor to continue with the operations of the code
  • 100-- continue requestor should continue with the request. The server returns this code indicates a first portion of the request has been received and is waiting for the rest of the
  • 101-- switching protocol requestor has asked the server to switch protocols and the server acknowledging that handover
• 2xx (Successful) expressed successfully processed the request status code
  • 200-- successful server has successfully processed the request. Typically, this means that the server provided the requested page
  • 201-- has been created request was successful and the server created a new resource
  • 202-- server has accepted the request has been accepted, but not yet processed
  • 203 - Non-authorized Information Server has been successfully processed the request, but is returning information that may be from another source
  • 204-- No content server successfully processed the request, but is not returning any content
  • 205-- Reset Content server successfully processed the request, but not returning any content
  • 206-- part of server successfully processed a partial GET request
• 3xx (Redirection) indicates to fulfill the request, the need for further operation; Typically, these status codes for redirection
  • 300-- choice of a request, the server may perform various operations. The server may operate a requestor (user agent) selected in accordance with, or provide a list of actions for the requester to choose
  • 301-- Moved Permanently requested page has been permanently moved to a new location. When the server returns this response (response to a GET or HEAD request), it automatically forwards the requestor to the new location
  • 302-- Temporary Mobile server is currently responding to a request from a web of a different location, but the requestor should continue to use the original location for future requests
  • 303-- When viewing location requestor should further separate the response to the GET request to retrieve a different location, the server returns this code
  • 304-- not modified since the last request, the requested page has not been modified. The server returns this response, it does not return the content of the page
  • 305-- using the proxy that the requestor can only access the requested page using a proxy. If the server returns this response, said requester use the agent
  • 307-- temporary redirection server is currently responding to a request from a web of a different location, but the requestor should continue to use the original location for future requests
• 4xx (Request error) These status codes indicate that the request may be wrong, the processing server hampered
  • 400-- server did not understand the request syntax error in the request
  • 401-- unauthorized request requires authentication. For pages that require login, the server might return this response
  • 403 - Forbidden The server is refusing the request
  • 404 - web server can not find the requested was not found
  • 405-- method disables the method specified in the request
  • 406-- not accept the use of the requested page can not respond to the request of the content characteristics
  • 407-- Proxy Authentication Required This status code 401 (not authorized), but specifies that the requestor should be authorized to use the agent
  • 408-- time-out occurs when the server request timed out waiting for the request
  • 409-- conflicts server encountered a conflict fulfilling the request. The server must include information about the conflict in the response
  • 410-- deleted if the requested resource has been permanently removed, the server returns this response
  • 411-- Length required server will not accept the request without a valid Content-Length header field
  • 412-- preconditions is not satisfied wherein the server is not a prerequisite for the requester satisfies the requestor
  • 413-- Request Entity Too Large The server can not process the request because the request entity is too large, beyond the server's processing power
  • 414 - URI (typically a URL) request requesting the URI too long, the server can not handle
  • 415 - does not support the media type of request in a format not request support page
  • 416-- request does not meet the requirements of the scope if the scope of the requested page can not be provided, the server returns this status code
  • 417-- server can not meet expectations unmet "desired" request-header field requirements
    
• 5xx (Server Error) These status codes indicate that the server internal error when trying to process the request. These errors could be wrong server itself, not with the request
  • 500 - Internal Server Error The server encountered an error and could not complete your request
  • 501-- server does not have yet in complete request. For example, this code may be returned when the server can not recognize the request method
  • 502-- error gateway server acting as a gateway or proxy, not from the upstream server received an invalid response
  • 503-- server is unavailable server is currently unavailable (because it is overloaded or down for maintenance). Typically, this is a temporary state
  • 504-- gateway as the gateway proxy server timeout, but did not receive a timely request from the upstream server
  • 505 - HTTP version not supported server does not support the HTTP protocol version used in the request

Web Performance Optimization

Hey, give you a map Web Performance Optimization

2019 series --CSS the front face interview questions
2019 front-end interview series --JS face questions
2019 front-end interview series --Vue face questions