current position:Home>Front end interview series 4: network and storage

Front end interview series 4: network and storage

2021-08-22 05:35:51 Rookies of Xiaoheshan

Come and join us !

" Rookies of Xiaoheshan ", Provide technical information and series of basic articles for front-end developers . For better user experience , Please move to our official website, Rookies of Xiaoheshan ( ) To study , Keep abreast of the latest articles .

"Code tailor" , If you are interested in our article 、 Or I want to make some suggestions , Wechat attention “ Rookies of Xiaoheshan ” official account , Get in touch with us , You can also watch our articles on wechat . Every suggestion or approval is a great encouragement to us !

The interview series is updated from time to time , Stay tuned


This column focuses on the interview Network and storage The content of the interview questions .

Be careful : This column will only cover the key content , It will not expand . Some topics need to expand knowledge points , We will expand the content 、 The overall details are placed at the top of each topic , You can check it by yourself .

Network and storage

The Internet / Storage
What is? HTTP request
What is cross-domain
What are some ways to solve cross domain problems , Respective advantages and disadvantages .
jsonp Principles and existing problems of solving cross domain problems
http2 and http1 The difference between
HTTPS and HTTP difference
GET and POST What's the difference
HTTP The caching mechanism inside
Network request status code
OSI/TCP What parts of the model
axios In fact, I did something
How to solve localstroage Is a cross-domain problem
cookie、localstroage、sessionstroage difference


1. What is? HTTP request

Full name : Hypertext transfer protocol (HyperText Transfer Protocol)

Concept :HTTP It's a way to get things like HTML、 Communication protocol of network resources such as pictures .

It's in web On the basis of data exchange , It's a kind of client-server agreement .

HTTP Role in the Internet : Act as a messenger , It's just an errand job , Transfer information between client and server , But we can't lack it .

HTTP Agreement is 「 application layer 」 agreement , It is the protocol most closely related to front-end development .

What we usually encounter HTTP request HTTP cache Cookies Cross domain And so on HTTP Is closely linked .

2. What is cross-domain

Cross domain refers to the attempt of interactive communication between non homologous resources , Due to the restriction of browser homology policy , Unable to communicate normally .

The browser cannot execute scripts from other websites . It's caused by the browser's homology strategy , It 's the browser JavaScript Security restrictions imposed . Failure to cross domain is the browser's consideration for user security , The same origin policy limits the following behavior :CookiesLocalStorage and IndexDB Can't read DOM and JS Object cannot get ,Ajax The request can't be sent out .

3. What are some ways to solve cross domain problems , Respective advantages and disadvantages

  1. adopt jsonp Cross domain : You can create... Dynamically script, Request another URL with parameters to realize cross domain communication . shortcoming : Can only achieve get A request .
  2. document.domain + iframe Cross domain : Both pages passed js Force settings document.domain Is the base primary domain , I'm going to implement the same domain . This scheme only applies to the same primary domain , Different cross domain application scenarios of sub domains .
  3. location.hash + iframea with b Cross-domain communication , Through the middle page c To achieve . Three pages , Between domains iframe Of location.hash Pass value , Direct between the same fields js Access to communicate .
  4. + iframe Cross domain : adopt iframe Of src Property from outland to local region , Cross-domain data is defined by iframe Of From outland to local area . This neatly circumvents the browser's cross-domain access restrictions , But it's also a safe operation .
  5. postMessage Cross domain :postMessage yes HTML5 XMLHttpRequest Level 2 Medium API, And is one of the few that can operate across domains window One of the attributes

    It can be used to solve the following problems :

    • Data transfer for the page and the new window it opens
    • Message passing between multiple Windows
    • Page with nested iframe Messaging: cross domain data delivery in the above three scenarios

      usage :

    • postMessage(data,origin) Method accepts two arguments
    • data:html5 The specification supports any basic type or replicable object , But some browsers only support strings , So it's best to use JSON.stringify() serialize .
    • origin: agreement + host + Port number , Can also be set to "*", It can be passed to any window , Set to... If you want to specify the same origin as the current window "/".
  6. Cross-domain resource sharing (CORS): Only server settings Access-Control-Allow-Origin that will do , There is no need to set the front end , To bring cookie request : Both front and rear ends need to be set .
  7. nginx Agent cross domain :
  • nginx Configuration to solve iconfont Cross domain
  • nginx Reverse proxy interface cross domain

    • Cross domain principle : The same origin policy is the browser's security policy , No HTTP Part of the agreement . Server side call HTTP The interface just uses HTTP agreement , Not execute JS Script , There is no need for homologous strategies , There is no problem of leapfrogging .
    • Realize the idea : adopt nginx Configure a proxy server ( The domain name and domain1 identical , Different ports ) For detecting , Reverse proxy access domain2 Interface , And it can be modified incidentally cookie in domain Information , Convenient current field cookie write in , Implement cross-domain login .
  1. node.js Middleware agent cross domain :node Middleware realizes cross domain agent , The principle is roughly the same as nginx identical , All by starting a proxy server , Realize data forwarding , It can also be set cookieDomainRewrite Parameter modification response header cookie Chinese domain name , Implement the of the current domain cookie write in , Convenient interface login authentication .
  2. WebSocket Protocol cross domain :WebSocket protocol yes HTML5 A new agreement . It realizes full duplex communication between browser and server , At the same time, cross domain communication is allowed , yes server push A good implementation of Technology . Native WebSocket API It's not very convenient to use , We use, It encapsulates well webSocket Interface , It's much simpler 、 Flexible interface , Neither do I webSocket The browser offers backwards compatibility .

For details, please see : Nine cross domain implementation principles ( Full version )

5. http2 and http1 The difference between

  • Binary framing
  • The head of compression : Use HPACK Yes HTTP/2 The head of compression
  • Server push
  • Multiplexing : The most important feature ,(MultiPlexing), That is, connect to share , Per one request They are all used as connection sharing mechanisms . One request Corresponding to one id, There can be multiple on such a connection request, Each connected request Can be randomly mixed together , The receiving party may according to request Of id take request And then belong to different server requests .

    Multiple requests can be executed in parallel on one connection at the same time ( Because it supports binary format , Can be disordered ) A request task is time consuming , Will not affect the normal execution of other connections

More on :HTTP The past and this life

6. HTTPS and HTTP difference

  • https The agreement needs to reach CA Apply for a certificate , Generally, there are fewer free certificates , So there is a certain cost
  • http It's the hypertext transfer protocol , The message is transmitted in clear text ,https It is safe ssl/tls Encrypted transport protocol .
  • http and https It USES a completely different connection , The ports are different , The former is 80, The latter is 443
  • http The connection is simple , It's stateless ;https Agreement is made SSL/TLS+HTTP The protocol is built for encrypted transmission 、 Network protocol for identity authentication , Than http Security agreement

7. GET and POST What's the difference

get and post It's essentially TCP Connect , There is no difference , But because of HTTP The rules and browsers 、 Server limitations , Cause it

There are some differences in their application :

  • get Parameters through URL Pass on ;post Put it in request body in
  • get Request in URL The parameter passed in has a length limit ;post No, (HTTP The agreement does not provide for , Because of the limitations of browsers and servers )
  • get Request can only proceed URL code ;post Requests are encoded in a variety of ways
  • get The request parameters are kept in the browser history ;post The parameters in are not retained
  • get Produce a TCP Data packets ;post Produce two TCP Data packets
  • about get request , The browser will http header and data Send it together , Server response 200 OK; about post request ,

Browser sends first header, Server response 100 Continue, The browser sends data, Server response 200 OK

  • Cache :get The request is similar to the search process , Users get data , You don't have to connect to the database every time , therefore

You can use caching ;post Requests generally do modification and deletion work , Must interact with the database , So you can't use caching

8. HTTP The caching mechanism inside

There are two caching methods , According to the response header Content determines

  • Strong cache ( Status code :200): The browser does not send any requests to the server , Read the file directly from the local cache and return ( Related fields :Cache-ControlExpires
  • Negotiate the cache ( Status code :304): Browser sends request to server , Let the server know if the cache is available ( Related fields :Last-Modified/If-Modified-SinceEtag/If-None-Match

Cache related header


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

9. Network request status code

Common status code :

  • 200 The request is successful
  • 301 Permanent redirection
  • 302 Temporary redirection
  • 404 request was aborted , The resource expected by the request was not found on the server .
  • 500 The server encountered a situation that did not know how to handle it .

More on :HTTP Response status code

10. OSI/TCP What parts of the model

OSI Seven layer model

  • The physical layer —— Transmission of bitstreams
  • Data link layer —— Control the communication between the network layer and the physical layer
  • The network layer —— IP Addressing and routing
  • Transport layer —— establish 、 management 、 Maintain end-to-end connections
  • The session layer —— establish 、 management 、 Maintain session connections
  • The presentation layer —— encryption 、 Formatting Data
  • application layer —— Network services for applications

and TCP The four layer model is the session layer 、 The presentation layer 、 The application layer is collectively referred to as the application layer , The physical layer and the data link layer are collectively referred to as the data link layer

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

11. axios In fact, I did something

Axios It's based on Promise Of HTTP client , be used for node.js And browser . It is isomorphic (= It can be used in browsers with the same code base and node.js Run in ). On the server side, it uses native node.js http modular , And on the client side ( browser ) It USES XMLHttpRequests. It has the following characteristics

  • Created from the browser XMLHttpRequest
  • Support Promise API
  • Client support prevents CSRF
  • Provides some interfaces for concurrent requests ( important , It is convenient for many operations )
  • from node.js establish http request
  • Intercept requests and responses
  • Transform the request and response data
  • Cancel the request
  • Automatic conversion JSON data

More on :axios docs

12. How to solve localstroage Is a cross-domain problem

postMessage Used to solve the communication between pages in different domains , The main parameters are

  • message : Will be sent to others window The data of
  • targetOrigin : windowed origin Property to specify which Windows can receive message events
  • transfer( Optional ): Whether to transfer ownership to the receiver of the message , And I no longer hold

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

13. cookie、localstroage、sessionstroage difference

cookie: Limited size , Only 4kb Size , Server side and browser ; And every time you send a new page cookie Will be sent to , This virtually wastes bandwidth ; cookie You also need to specify the scope , You can't call... Across domains

localstorage: Is a persistent local storage , Unless forced to delete , Otherwise, the data will never expire , Support get and post request ( Stored in 2.5MB To 10MB Between ); No search function , Unable to create a custom index

sessionStroage: It is a local session level storage , Create... When the page opens , Destroy when the page closes

Notice of next section

In the next section, we will bring you Browser and computer foundation My interview questions , Coming soon !

copyright notice
author[Rookies of Xiaoheshan],Please bring the original link to reprint, thank you.

Random recommended