Front-end interview series 4: Network and storage

join us!

Mountain" , provides technical-related information and a series of basic articles for front-end developers. For a better user experience, please move to our official website novices (16125c0500cd2f https://xhs-rookies.com/ ) to learn and get the latest articles in time.

"Code tailor" , if you are interested in our article or want to make some suggestions, follow "Novices of Xiaohe Mountain" public account, contact us, you can also watch it on WeChat Our article. Every suggestion or approval is a great encouragement to us!

Interview series are updated from time to time, please stay tuned

Preface

This column focuses on explaining the interview questions of network and storage in the interview.

Note: This column will only involve key content and will not be expanded. For some topics that need to expand knowledge points, we will place the expanded content and overall detailed information at the top of each topic, and you can check it by yourself.

Network and storage

Network Storage
What is an HTTP request
What is cross-domain
Which methods are there to solve cross-domain, their advantages and disadvantages?
jsonp solves the principle and existing problems of cross-domain problems
The difference between http2 and http1
The difference between HTTPS and HTTP
What is the difference between GET and POST
Cache mechanism in HTTP
Network request status code
What are the parts of the OSI/TCP model
What did axios actually do
How to solve the cross-domain problem of localstroage
The difference between cookie, localstroage, sessionstroage

Problem analysis

1. What is an HTTP request

Full name: HyperText Transfer Protocol (HyperText Transfer Protocol)

Concept: HTTP is a communication protocol that can obtain HTML and pictures.

It is the basis for data exchange web client-server protocol.

HTTP 's role in the Internet: acting as a messenger, doing errands, passing information between the client and the server, but we cannot lack it.

HTTP protocol is an "application layer" protocol, which is most closely related to front-end development.

HTTP request, HTTP cache, Cookies , cross-domain, etc. that we usually encounter HTTP closely related to 06125c0500d168.

2. What is cross-domain

Cross-domain refers to an attempt to communicate with each other between resources that are not of the same origin. However, due to the restriction of the browser's same-origin policy, the interactive communication cannot be carried out normally.

The browser cannot execute scripts from other websites. It is caused by the browser's same-origin policy and is a security restriction imposed JavaScript The inability to cross domains is the browser’s consideration for user security. The same-origin policy restricts the following behaviors: Cookies , LocalStorage and IndexDB cannot be read. DOM and JS objects cannot be obtained, and Ajax requests cannot be sent.

3. What are the methods to solve cross-domain, their advantages and disadvantages

1. Cross-domain through jsonp : You can dynamically create script , and then request a URL with parameters to achieve cross-domain communication. Disadvantages: Only one kind of get request can be realized.
2. document.domain + iframe Cross-domain: Both pages are forced to set document.domain js , and the same domain is realized. This solution is limited to cross-domain application scenarios with the same primary domain and different subdomains.
3. location.hash + iframe : a wants to b across domains through the middle page c . For the three pages, use iframe of location.hash transfer values between different domains, and directly js for communication between the same domains.
4. window.name + iframe cross-domain: the src iframe is transferred from the external domain to the local domain, and the cross-domain data is transferred from the external domain to the local domain iframe of window.name This cleverly bypasses the browser's cross-domain access restrictions, but at the same time it is a safe operation.

5. postMessage cross-domain: postMessage is HTML5 XMLHttpRequest Level 2 in API , and it is one of the few window attributes that can be operated across domains

   It can be used to solve the following problems:

   • Data transfer between pages and new windows opened
   • Message passing between multiple windows

   • Page and nested iframe message transfer Cross-domain data transfer of the above three scenarios

     usage:

   • postMessage(data,origin) method accepts two parameters
   • data: The html5 specification supports any basic type or copyable objects, but some browsers only support strings, so it is best to use JSON.stringify() serialization when passing parameters.
   • origin: protocol + host + port number, it can also be set to "*", which means it can be passed to any window, if you want to specify the same source as the current window, set it to "/".
6. Cross-domain resource sharing (CORS): Only set Access-Control-Allow-Origin server side. The front end does not need to be set. If you want to bring cookie request: both front and back ends need to be set.
7. Nginx proxy cross-domain:

• nginx configuration solution iconfont cross-domain

• nginx Reverse proxy interface cross-domain

  • Cross-domain principle: The same-origin policy is the browser's security policy, not part of the HTTP The server-side calling the HTTP interface only uses the HTTP protocol, and will not execute the JS script. It does not require the same-origin policy, and there is no crossover problem.
  • Realization of ideas: by nginx a proxy configuration server (domain name domain1 same, different ports) springboard machine, reverse proxy access domain2 interfaces, and can modify the way cookie in domain information to facilitate the current domain cookie written, cross-domain login.

8. node.js middleware agent across domains: node Middleware cross-domain agent, the principle is substantially nginx same is by activating a proxy server, to achieve data forwarding may be provided by cookieDomainRewrite parameter modification response header cookie domain name, to achieve this cookie domain is written to facilitate interface login authentication.
9. WebSocket protocol cross-domain: WebSocket protocol is a new protocol HTML5 It implements full-duplex communication between the browser and the server, while allowing cross-domain communication. It is a very good implementation server push The native WebSocket API not very convenient to use. We use Socket.io , which encapsulates the webSocket interface well, provides a simpler and flexible interface, and provides backward compatibility for browsers that webSocket

For details, please see: Implementation Principles of Nine Cross-domain Methods (Full Version)

5. The difference between http2 and http1

• Binary framing
• Head compression: Use HPACK to compress the head HTTP/2
• Server push

• Multiplexing : The most important feature, (MultiPlexing), that is, connection sharing, that is, each request is used as a connection sharing mechanism. A request corresponds to a id , such a connection can have multiple request , each connection of request can be randomly mixed together, the receiver can according to request id assign request to their different server requests.

  Multiple requests can be executed in parallel on a connection at the same time (due to the support of the binary format, it can be out of order) A certain request task is time-consuming and will not affect the normal execution of other connections

For more information, please see: The Past and Present of HTTP

6. The difference between HTTPS and HTTP

• https protocol, you need to CA . Generally, there are fewer free certificates, so a certain fee is required
• http is a hypertext transfer protocol, information is transmitted in plain text, and https is a secure ssl/tls encrypted transfer protocol.
• http and https use completely different connection methods and use different ports. The former is 80 and the latter is 443.
• http is very simple and stateless; The https protocol is a SSL/TLS+HTTP protocol constructed by the 06125c05023ef7 protocol for encrypted transmission and identity authentication, which is more secure http

7. What is the difference between GET and POST?

get and post essentially TCP connections, and there is no difference, but due to HTTP regulations and browser and server restrictions, they

There are some differences in the application process:

• get parameters are passed through URL ; post placed in request body
• get requests that the parameters passed URL post does not ( HTTP protocol is not specified, because of browser and server restrictions)
• get request can only be coded URL post request has multiple coding methods
• get request parameters will be completely retained in the browsing history; post will not be retained
• get generates one TCP data packet; post generates two TCP data packets
• For get requests, the browser sends http header and data together, and the server responds with 200 OK ; for post requests,

The browser first sends header , the server responds 100 Continue , the browser sends data , the server responds 200 OK

• Caching aspect: get request is similar to the search process, users get data without connecting to the database every time, so

Cache can be used; post requests generally do modify and delete work, and must interact with the database, so cache cannot be used

8. Cache mechanism in HTTP

Two caching methods, determined according to the content of the header

• Strong cache (status code: 200): The browser does not send any request to the server, and directly reads the file from the local cache and returns it (related fields: Cache-Control , Expires )
• Negotiation cache (status code: 304): the browser sends a request to the server, and the server informs whether the cache is available (related fields: Last-Modified/If-Modified-Since , Etag/If-None-Match )

Cache related header

Cache-Control、Expires、Last-Modified/If-Modified-Since、Etag/If-None-Match

For details, please see: Thoroughly understand the browser’s caching mechanism

9. Network request status code

Common status codes:

• 200 Request successful
• 301 Permanent redirect
• 302 Temporary redirect
• 404 request failed. The requested resource was not found on the server.
• 500 server encountered a situation that did not know how to deal with it.

For more information, please see: HTTP response status code

10. What are the parts of the OSI/TCP model

OSI seven-layer model

• Physical layer-bit stream transmission
• Data link layer-control the communication between the network layer and the physical layer
• Network layer- IP addressing and routing
• Transport layer-create, manage, and maintain end-to-end connections
• Session layer-create, manage, and maintain session connections
• Presentation layer-encryption and decryption, data formatting
• Application layer-provide network services for applications

The TCP the session layer, presentation layer, and application layer as the application layer, and the physical layer and data link layer as the data link layer.

For details, please see: OSI 7-layer model and TCP/IP 4-layer model

11. What did axios actually do

Axios is a HTTP client Promise node.js and browsers. It is isomorphic (= it can run in browsers and node.js with the same code base). On the server side it uses the native node.js http module, while on the client side (browser) it uses XMLHttpRequests . It has the following characteristics

• XMLHttpRequest from the browser
• Support Promise API
• Client support prevents CSRF
• Provides some concurrent request interfaces (important, convenient for a lot of operations)
• Create http request from node.js
• Intercept request and response
• Convert request and response data
• Cancel request
• Automatic conversion of JSON data

For more information, please see: axios docs

12. How to solve the cross-domain problem of localstroage

postMessage used to solve the communication between different domain pages, the main parameters are

• message : the data to be sent to other window
• targetOrigin : Specify which windows can receive message events through the origin
• transfer (optional): whether the ownership will be transferred to the recipient of the message, and you no longer hold it

For details, please see: What is postMessage Browser homology policy and its circumvention methods

13. The difference between cookie, localstroage, sessionstroage

cookie: is limited in size, only 4kb in size, server-side and browser; and each time a new page cookie will be sent in the past, which invisibly wastes bandwidth; cookie also needs to specify the scope, which cannot be crossed Domain call

localstorage: is a persistent local storage, unless forced to delete, otherwise the data will never expire, support get and post request (stored between 2.5MB to 10MB); does not provide search function, can not build a custom index

sessionStroage: is a local session-level storage, created when the page is opened, and destroyed when the page is closed

Preview of the next section

In the next section, we will bring you browser and computer-based interview questions, so stay tuned!