• [2021] Front direction: Review of summer internship refers to north (Top)
  • [2021] Front: Review of summer internship Refers to north (Second)

Network article

The difference between GET and POST

More: juejin. Cn/post / 684490…

  1. Get is used to get data and POST is used to submit data.
  2. Get requests pass parameters with url and the entity part is empty, while post requests have data in the entity part.
  3. Get requests have length limits on the parameters they pass in the URL, while POST does not.
  4. Get requests are cached, post requests are not cached.
  5. The most important difference – idempotence: A GET request is an idempotent request. Usually GET requests are used in scenarios that have no impact on server resources; While Post is not an idempotent request, it is typically used in situations that have an impact on server resources.

The HTTP status code

1xx: Further operation
  • 100: You can continue sending (a POST request sends a header first and then a body)
2xx indicates success
  • 200: The request succeeds
  • 204: Request succeeded, but no response body. Usually used when the client is sending information to the server, but the server does not return any information to the client
3xx indicates that further operations are required
  • 301: permanent redirection
  • 302: temporary redirect
  • 304: Cache hit
4xx indicates an error with the browser
  • 400: The syntax of the request packet is incorrect
  • 403: The request is rejected by the server
  • 404: Server could not find the specified resource
5xx indicates an error on the server

  • 500: Server error

  • 503: Server down for maintenance

The HTTP version

More: mp.weixin.qq.com/s/GICbiyJpI… Related to multiplexing: muyiy.cn/question/ne…

HTTP / 0.9

  • Request method: GET
  • Request/response headers are not supported
  • You can only request HTML files

HTTP / 1.0

  • Request method: GET POST HEAD
  • Support for request headers/response headers
  • Multiple Content-types (not just HTML files)
  • Support long connection (default short connection) : Connection: keep-alive
  • Cache: Expire, if-modified-since

HTTP / 1.1

  • Request methods: GET, POST, HEAD, OPTIONS, PUT, PATCH, DELETE, TRACE, CONNECT
  • By default, long connections and pipelining of requests are enabled. However, there is the problem of queue blocking: subsequent requests wait for the return of previous requests to get a chance to execute, and once a request times out, subsequent requests can only be blocked.
  • New cache features:
    • ETag, if-none-match: negotiation cache
    • Cache-control: indicates strong cache
  • Added status code: 410 – A resource on the server has been permanently deleted.
  • Host domain: Solves the problem of multiple hosts sharing one IP address.
  • Bandwidth optimization: Supports resumable data.

HTTP / 2.0

  • Binary framing: more convenient and robust.

  • Multiplexing:

  • Header compression: Smaller volume, faster transfer.

  • Server push: The server push can send the required resources to the client along with the index.html, eliminating the need for the client to repeat the request.

conclusion

  • Http1.0 vs http1.1
    1. Http1.0 is connectionless by default. Keep-alive is used for long connections. Http1.0 enables persistent connections by default, but there is a queue header blocking problem.
    2. Http1.0 only supportGET POST HEADThree ways. Http1.1 addedPUT OPTIONS DELETE TRACEAnd so on.
    3. Http1.0 useexpire+if-modified-sinceKeyword control cache; Http1.1 usecache-control if-none-matchControl cache, more reliable.
  • Http1.1 vs http2.0
    1. Http2.0 uses binary framing to make applications more robust
    2. Http2.0 uses the compressed header method to be more efficient
    3. Http2.0 uses the server push, the REQUEST will be referenced in the HTML file JS, CSS files sent together, improve efficiency.
    4. Http2.0 uses multiplexing to solve the queue head blocking problem.

Cross domain

JSONP

  • Principle: The browser is allowed by the same origin policy<script>Inter-domain resource nesting of tags,<script>Not restricted by the same origin policy.

For example, in order to reduce the load of the Web server, we usually separate js, IMG, CSS and other static resources to another server with an independent domain name, and then load the resources under different domains through the corresponding tag

  • Implementation method: the front-end set the callback function, and the callback function as the request URL parameters; When the backend receives the request, it returns the name of the callback function, passing in the required data; Execute this function on the front end.
http.createServer((req, res) = >{
  let urlObj = url.parse(req.url, true)
  if(urlObj.pathname === '/getWeather') {let data = {city:'hangzhou'.weather:'sunny'}
    res.end(`${urlObj.query.callback}(The ${JSON.stringify(data)}) `)
  }
}).listen(2020)
Copy the code
<script>
  function showData(data) {
    console.log(data) //
  }
</script>
<script src="Http://127.0.0.1:2020/getWeather? callback=showData"></script>

Copy the code
  • Advantages: Good compatibility.
  • Disadvantages: Only HTTP requests in GET mode are supported.

CORS

  • How it works: When an Ajax request is sent, the browser finds that the request does not comply with the same origin policy and adds a request header to the request:Origin. After receiving the request, the background adds a response header to the return result if it is determined to accept the request:Access-Control-Allow-Origin; The browser determines whether the current is included in the response headerOriginIf there is one then the browser will process the response and we’ll get the response data, if not then it will be caught by the XMLHTTPRequest’s onError.

The browser article

How browsers render

More: juejin. Cn/post / 684490…

Browser storage technology

The common storage technologies of browsers include cookie, localStorage, and sessionStorage.

Cookies, sessionStorage and localStorage

  • knowledge

    SessionStorage, LocalStorage, and Cookie can all be used to store data on the browser side, and all are string key-value pairs. The differences are:

    • The first two belong to H5 webStorage and are created to facilitate data storage on the client.
    • Cookie data is forcibly carried in the same source HTTP request (same protocol, host, and port), and is transmitted in both directions between the browser and the server. Cookies are data (usually encrypted) stored on a user’s local terminal to identify the user

  • Answer:

    • Cookies are set by the server, stored by the client, and sent to the server each time the same origin request is initiated. A cookie can store up to 4 KB of data, its lifetime is specified by the Expires attribute, and the cookie can only be shared by pages of the same origin.

    • SessionStorage is a browser local storage method provided by H5. It borrosts from the concept of server-side session, which represents the data saved in a session. It is typically capable of storing 5M or more data, it fails after the current window is closed, and sessionStorage can only be shared by the same page in the same window.

    • LocalStorage is also provided by h5 a browser localStorage method, it is generally able to store 5M or more data. Unlike sessionStorage, it does not fail unless you manually delete it, and localStorage can only be accessed and shared by the same page.

Event mechanism

There are three stages of event triggering:

  • windowPropagates to the event trigger, which is triggered when a registered capture event is encountered
  • The event that triggers registration when propagated to the event trigger
  • From the event trigger towindowPropagated, triggered by a bubbling event upon registration

Stop bubbling:

event.stopPropagation()

Event delegation

Event delegation essentially takes advantage of the browser event bubbling mechanism.

Since events are uploaded to the parent node during the bubbling process, and the parent node can obtain the target node through the event object, the listening function of the child node can be defined on the parent node, and the listening function of the parent node can handle the events of multiple child elements uniformly, which is called event proxy.

  • Advantages: Performance optimization.

  • Implementation:

     ul.addEventListener('click'.function(e){
     if(e.target.tagName.toLowerCase() === 'li'){
         fn() // Execute a function}})Copy the code

Browser caching mechanism

More: github.com/xiangxingch…

Strong cache

  • Cache-control: specifies the absolute time (2000s), priority > Expires
  • Expires: A date (2020.7.1) that can be changed by the client

Weak cache

  • If-none-match: Etag (local Etag of requested resource)

    Policy: Check whether the local Etag of the requested resource is consistent with that of the server

    • If yes, the file has not changed during the period, return 304;

    • If not, the file changed during the period, return 200 and the new file;

  • Last-modified/if-modified-since: Date (2008.1.1)

    Policy: After the first request for a file, the server returns last-Modified to represent the last time the file was changed. The next time the client sends a request, enter the last-modified value in the if-Modified-since field to see if there have been any updates since the specified date:

    • If there is an update, then the file changed during the period, return 200 and the new file;

    • If it is not updated, the file has not changed during the period, return 304;

Full cache mechanism

Check strong cache => Check cache => Request a new file

Typical Interview Questions

From the input URL to the presentation page, what happens?

This is a question that has no mark answer, want to pass not difficult, but want to answer full mark answer is very take an examination of grind understanding depth and breadth. Here I recommend my blog: juejin.cn/post/691709… I’m sure you’ll get something out of it

Next up

How can you miss the JavaScript article! Because JS can write too much content, separate out a text will tell, please continue to pay attention to oh ~