Cookie sessionStorage localStorage A: \
Cookie data is always carried (even if it is not needed) in same-origin HTTP requests, i.e. cookies are passed back and forth between the browser and the server
Cookie data also has the concept of a path, which can be restricted. Cookies belong to a specific path
The storage size limit is also different, cookie data cannot exceed 4K, and because cookies are carried with each HTTP request, cookies are only suitable for storing very small data, such as call tokens.
WebStorage, while limited in size, is much larger than cookies, up to 5M or more
SessionStorage: only valid when the current browser window is closed; LocalStorage: always valid, saved even when the window or browser is closed and therefore used as persistent data; Cookie: Only lasts until the set cookie expiration time, even if the window and browser are closed
Different scoped SessionStorages: not shared in different browser Windows, even on the same page; LocalStorage: shared in all origin Windows; Cookie: Is also shared among all same-origin Windows.
2. Cookie Session difference?
A:
1. Cookie data is stored on the client’s browser, and session data is stored on the server.
2. Cookies are not very secure. Others can analyze cookies stored locally and cheat cookies.
3. The session is stored on the server for a certain period of time. Cookies should be used to reduce server performance when the number of accesses increases.
4. The data saved by a single cookie cannot exceed 4K. Many browsers limit the maximum number of cookies saved by a site to 20.
3. What is the status code returned from HTTP?
A:
100 Continue. The client should continue with its request
101 Switching Protocols Switching protocol. The server switches protocols based on client requests. You can only switch to a more advanced protocol, for example, the new version of HTTP
200 The OK request succeeded. Typically used for GET and POST requests
201 Created Created. The new resource was successfully requested and created
202 Accepted. The request has been accepted, but processing is not complete
Our Authoritative Information is Authoritative. The request succeeded. The meta information returned is not the original server, but a copy
204 No Content No Content. The server processed successfully, but did not return content. You can ensure that the browser continues to display the current document without updating the web page
205 Reset Content Resets the Content. The server is successful, and the user end (for example, browser) should reset the document view. Use this return code to clear the browser’s form field
206 Partial Content The server successfully processed some of the GET requests
300 Multiple Choices. The requested resource can include multiple locations, and a list of resource characteristics and addresses can be returned for user terminal (e.g., browser) selection
301 Moved Permanently Moved Permanently. The requested resource has been permanently moved to the new URI, the return message will include the new URI, and the browser will automatically redirect to the new URI. Any future new requests should be replaced with a new URI
302 Found temporary movement. Similar to 301. But resources are moved only temporarily. The client should continue to use the original URI
303 See Other View Other IP addresses. Similar to 301. Use GET and POST requests to view
304 Not Modified. The requested resource is not modified, and the server does not return any resources when it returns this status code. Clients typically cache accessed resources by providing a header indicating that the client wants to return only resources that have been modified after a specified date
305 Use Proxy Uses Proxy. The requested resource must be accessed through a proxy
306 Unused INDICATES the Unused HTTP status code
307 Temporary Redirect Temporary redirection. Similar to 302. Use GET to request redirection
400 Bad Request The syntax of the client Request is incorrect and cannot be understood by the server
401 Unauthorized Requests require user authentication
402 Payment Required for future use
403 Forbidden The server understands the request from the client but rejects the request
404 Not Found The server could Not find the resource (web page) requested by the client. With this code, a web designer can set up a personalized page that says “the resource you requested could not be found.
405 Method Not Allowed The Method in the client request is prohibited
406 Not Acceptable The server was unable to complete the request based on the content nature of the client request
407 Proxy Authentication Required The request requires the identity of the Proxy, similar to that of the 401, but the requester should use the Proxy for authorization
408 Request time-out The server waits for the Request sent by the client for a long Time and times out
409 Conflict server may return this code after completing the client PUT request. A Conflict occurred when the server processed the request
410 Gone The resource requested by the client does not exist. 410 differs from 404 in that if a resource previously had a 410 code that is now permanently deleted, the site designer can specify a new location for the resource through the 301 code
411 Length Required The server cannot process requests without Content-Length sent by clients
412 Precondition Failed The client’s request information
413 Request Entity Too Large The server rejects the Request because the requested Entity is Too Large. To prevent continuous requests from clients, the server may close the connection. If the server is temporarily unable to process it, a retry-after response is included
414 Request-URI Too Large The URI of the Request is Too long (usually the URL), and the server cannot process it
415 Unsupported Media Type The server cannot process the Media format attached to the request
416 Requested range not satisfiable Client request range invalid
417 Expectation Failed The server cannot meet Expect’s request header information
500 Internal Server Error Indicates an Internal Server Error. The request cannot be completed
501 Not Implemented The request was Not supported by the server
502 Bad Gateway The server working as a Gateway or proxy received an invalid response from the remote server when attempting to execute the request
503 Service Unavailable The server cannot process requests from clients temporarily due to overload or system maintenance. The length of the delay can be included in the server’s retry-after header
504 Gateway time-out The server acting as a Gateway or proxy fails to obtain requests from the remote server in a timely manner
505 HTTP Version Not Supported The server does not support the HTTP Version.
4. HTTP headers?
| Head agreement | instructions |
|---|---|
| Accept | The content-types of acceptable responses. |
| Accept-Charset | Acceptable character set |
| Accept-Encoding | The encoding of acceptable response content. |
| Accept-Language | List of acceptable response content languages |
| Accept-Datetime | An acceptable time-dependent version of the response content |
| Authorization | Authentication information of the resource to be authenticated in HTTP |
| Cache-Control | Used to specify whether caching is used in the current request/reply. |
| Connection | The type of connection that the client (browser) wants to use preferentially |
| Cookie | An HTTP Cookie Set by the previous server via set-cookie (see below) |
| Content-Length | The length of the request body in base 8 |
|---|---|
| Content-MD5 | The binary MD5 hash value (digitally signed) of the content of the request body, the result encoded in Base64 |
| Content-Type | MIME type of the request body (for POST and PUT requests) |
| Date | The date and time the message was sent (in the “HTTP date “format defined in RFC 7231) |
| Expect | Indicates that the client is asking the server to perform a specific behavior |
| From | The email address of the user who initiated this request |
| Host | Indicates the domain name of the server and the port number monitored by the server. If the requested port is the standard port (80) of the corresponding service, the port number can be omitted. |
| If-Match | The operation is performed only when the entity provided by the client matches the entity on the server. In methods such as PUT, a resource is updated only if it has not been modified since the last update by a slave user. |
| If-Modified-Since | 304 unmodified is allowed if the corresponding resource has not been modified |
| If-None-Match | Allows 304 Not Modified to be returned if the corresponding content has Not been Modified, referring to hypertext Transfer protocol entity flags |
| If-Range | If the entity has not been modified, the missing one or more parts are returned. Otherwise, return the entire new entity |
|---|---|
| If-Unmodified-Since | A response is sent only if the entity has not been modified since a certain time. |
| Max-Forwards | Limits the number of times the message can be forwarded by the proxy and gateway. |
| Origin | Initiate a request for cross-domain resource sharing (this request requires the server to include an Access-Control-Allow-Origin header in the response to indicate the source that Access Control allows). |
| Pragma | Implementation-specific, these fields can be generated at any time in the request/response chain. |
| Proxy-Authorization | Authentication information used to authenticate the agent. |
| Range | Represents a request for a portion of an entity, byte offset starting at 0. |
| Referer | Represents the previous page visited by the browser, which can be considered to have been brought to the current page by links from previous visits. “Referer” is actually the word “Referrer,” but the RFC misspelled the standard and used it instead. |
| TE | Encoding the way the browser expects to accept transfers: You can use the value in the transfer-encoding response protocol header (and you can also use “Trailers” to say that the browser wants to receive some additional fields after the last block of size 0. |
| User-Agent | The browser identity string |
| Upgrade | Requires that the server be upgraded to a higher version protocol. |
|---|---|
| Via | Tell the server which agent made the request. |
| Warning | A general warning that there may be an error in the entity content body. |
5. When to use strong cache or negotiated cache?
A: Because the resource on the server is not fixed all the time, most of the time it will update, if we also access the local cache, then for the user, it is equivalent to the resource is not updated, the user will see the old resource; Therefore, we want to request new resources when the browser updates the resources on the server, and use the local cache when there is no update to minimize the waste of resources caused by network requests.
6. What are the strategies for front-end optimization?
A:
Reduce request volume: merge resources, reduce HTTP requests, Minify /gzip compression, webP, lazyLoad.
Speed up the request: pre-resolving DNS, reducing the number of domain names, parallel loading, CDN distribution.
Cache: HTTP protocol cache request, offline cache manifest, offline data cache localStorage.
Rendering: JS/CSS optimization, loading order, server-side rendering, pipeline.
**7. What is the difference between GET and POST? 支那
A: \
The GET argument is passed through the URL, and the POST is placed in the request body.
Get requests pass parameters in the URL with length limits, whereas POST does not.
Get is less secure than POST because parameters are directly exposed in the URL and therefore cannot be used to pass sensitive information.
Get requests can only be url encoded, while POST supports multiple encoding methods
Get requests are actively cached by the browser, while POST supports multiple encodings.
Get request parameters are retained in the browser history, while POST parameters are not.
GET and POST are essentially TCP links and are no different. However, due to HTTP regulations and browser/server restrictions, they are applied differently.
GET generates a TCP packet; POST generates two TCP packets.
8.HTTP supported methods?
A:
GET, POST, HEAD, OPTIONS, PUT, DELETE, TRACE, CONNECT
Copy the code
9. How to draw a triangle?
A:
Triangle principle: equalization principle of frame
div {width:0px;height:0px;border-top:10px solid red;border-right:10px solid transparent;border-bottom:10px solid transparent;border-left:10pxsolid transparent; }Copy the code
10. Status codes 304 and 200?
A:
Status code 200: The request was successful and the desired response header or data body will be returned with this response. That is, the returned data is the full amount of data, if the file is not compressed by GZIP, the size of the file, how much data must be transferred.
Status code 304: The server should return this status code if the client has sent a conditional GET request and the request has been granted, and the contents of the document have not changed (since the last access or according to the conditions of the request). That is, the client and server only need to transfer a small amount of data for file verification. If the file has not been modified, you do not need to return the full amount of data. \
11. What about browser caching?
A:
There are two types of caching: strong caching and negotiated caching, depending on the header content of the response.
Strong cache fields include Expires and cache-Control. Cache-control takes precedence over Expires if both exist.
The negotiation cache fields are last-modified/if-modified-since, Etag/ if-none-match. \
12. New elements for HTML5?
A:
First of all, in order to better practice web semantics, HTML5 adds header, footer, nav,aside, P and other semantic labels. In terms of forms, in order to enhance forms, it adds color, emial,data,range and other types for input. In terms of storage, Provides sessionStorage, localStorage, and offline storage, through these storage methods to facilitate data storage and access to the client, in the multimedia aspect of audio and video elements Audio and vedio, in addition to geographical positioning, Canvas canvas, drag and drop, Multithreaded programming of Web worker and Websocket protocol. \
13. Type in a URL in the address bar, and when the page displays, what happens?
A:
After entering the URL, you need to find the server IP address of the URL domain name. To find the IP address, the browser first searches the cache to check whether there is a record in the cache. Browser cache – “system cache -” router cache, the cache is not is to find whether there is record in the hosts file system, if you don’t have the query DNS server, after get the IP address of the server, the browser based on the IP and port number, constructs an HTTP request, the request message will include the requested information, Mainly request method, description and request the attached data, and the HTTP request encapsulated in a TCP packet, the TCP packets will in turn after the transport layer, network layer, data link layer and physical layer to the server, the server parses the request to respond, to return to the corresponding HTML browser, because HTML is a tree structure, The browser builds the DOM tree based on this HTML. During the DOM tree building process, if it encounters JS scripts and external JS connections, it will stop building the DOM tree to execute and download the corresponding code, which will cause blocking. This is why it is recommended that the JS code should be placed after the HTML code, and then according to external CCTV, internal CCTV, The main thing to do here is to exclude non-visual nodes, such as script, meta tags and nodes with display none. After that, the layout is mainly to determine the location and size of each element. After is rendering the page, because the HTML file can contain images, video, audio and other resources, in the process of parsing the DOM, met with the parallel downloads, web browser for each domain has certain limitations, the number of parallel downloads is commonly 4 to 6, in all this, of course, we also need to pay attention to is the cache in the request, The Cache is controlled by header fields such as cache-Control, last-modify, and Expires. The difference between cache-Control and Expires is that cache-Control uses relative time, whereas Expires uses absolute time on the server side. Because of the time difference, cache-Control is usually used. When requesting cached data, If the ETag value is set in the Last response, the ETag value will be sent to the server for verification. If the ETag value is set in the Last response, the last-Modified value will be verified by the server. If the ETag value is set in the Last response, the last-modified value will be verified. If no ETag is set, last-Modified is verified and 304 is returned. \
14. Common HTTP headers?
A:
HTTP headers can be divided into generic headers, request headers, response headers, and entity headers.
The common header indicates some common information. For example, date indicates the time when the packet is created.
The header of the request is unique to the request message, such as cookie, and cache-dependent, such as if-modified-since.
The response header is unique to the response message, such as set-cookie, and the location associated with redirection,
The entity header describes the entity part, such as allow for executable request methods, content-type for subject type, and content-encoding for how the body is encoded
15. Features of HTTP2.0?
A:
Http2.0 features the following:
1, content security, because HTTP2.0 is based on HTTPS, natural security features, through http2.0 features can avoid the simple use of HTTPS performance degradation.
2, Binary format, http1.X parsing is text-based, http2.0 breaks all transmission information into smaller messages and frames, and encodes them in binary format. Based on binary format, the protocol has more extensibility, such as the introduction of frames to transmit data and instructions.
3, multiplexing, this function is equivalent to the enhancement of long connection, each request can be randomly mixed together, the receiver can according to the REQUEST ID of the request to be assigned to their different server requests, in addition, multiplexing also supports the priority of the stream. Allows the client to tell the server which content is a higher priority resource and can be transferred first.
16. What are the values of cache-control?
A:
Cache-control is a generic header field used in HTTP requests and responses. The cache mechanism is implemented by specifying directives. This cache directive is one-way, and the common values include private, no-cache, max-age, and must-revalidate. The default is private. \
17. Which two trees do browsers generate when they generate a page?
A:
Construct two trees, DOM tree and CSSOM rule tree
When the browser receives an HTML document from the server, it traverses the document nodes to generate a DOM tree.
The CSSOM rule tree is generated by browsers parsing CSS files.
Note that the answers in this article are for reference only \
Pay attention to the public account, background reply “PDF001”, free access to basic computer knowledge + operating system core notes