HTTP related knowledge

I. Requests

• A Web page is all displayed, you need to send a lot of requests to the server
  • First, the first request is an HTML page, the server returns the HTML source code to the client, the client browser to render
  • During page rendering, if you encounter these tags such as link,script,img,iframe,audio,video, you will also need to re-send a new request to the server
  • In the networks option of the Google Chrome console, you can view all request logs and request information
  • If you want to improve the load performance of the page (faster opening and loading time), we want to reduce the client's request information (reduce the HTTP request), at least at the beginning of the page opened, the fewer requests, the smaller the request content
    • Reduce the number of HTTP requests
      1. CSS or JS to merge compression (Webpack/gulp Automation platform), to ensure that the current page to introduce only a CSS and a JS (occasionally a public class library can introduce more than one or two), if the CSS and JS code is not a lot of time, the direct use of embedded type, This technique is often used on the mobile side 2. For the static resource Picture (button icon or background map, etc., fixed image) CSS sprite technology; for dynamic images, we can do picture delay loading; Large images can be compressed or BASE64 in the case of guaranteed distortion.
      2. Batch asynchronous loading of data
    • Reduce the size of the HTTP request
      • Code optimization: Html/css/js The code can be optimized
      • Security optimization

Two. BASE64

• Regular IMG Requests
  • When encountering IMG, first send a request to the server based on the SRC address
  • The server prepares the desired picture and then returns it to the client's browser
  • The browser BASE64 decode the received image
  • The browser renders the decoded code
• Convert the image to BASE64 encoding and put it directly in the IMG SRC
  • Maintenance is inconvenient, but can be packaged and compiled by Webpack, so that maintenance and compilation are separated

Three. URL module interpretation

URL this built-in module is used to parse every piece of information in a URI address: url,parse

let url=require("url");let str="http://finance.sina.com.cn/chanjing/gsnews/2017-06-02/doc-ifyfuvpm7126441.shtml"let obj=url.parse(str,boolean);let {pathname,query}=url.parse(str.true);

• Str:url Path string
• Boolean: The default is false, setting true when parsing, the parameter value passed by the question mark is automatically stored in the query property as an object key value pair for later use
• OBJ: An object that contains information after parsing a URL string
• ES6 structure assignment, take only pathname and query properties

Four. fs file read/write module

• Fs.readfilesync read out the content format is different, if it is html/css/js and other text code, read out is the string, if it is a picture audio and video files, read out the buffer format data (for pictures, reading should not use " UTF-8 ")

Let fs=Require"FS"); Fs.readfile ("./temp.html","UTF-8",function (error,result) {});  Asynchronously reads the contents of the file let result=fs.readfilesync ("./temp.html","UTF-8",function (error,result) {});  Synchronously reads the contents of the file Fs.readdirsync ("./");  Synchronously reads all the files in a directory, returns an array of Fs.writefilesync ("./temp.html", result+"VERY good","UTF-8");  Synchronously writes content to a file, and if the file does not exist, it also helps to create the file by default, written as overwrite write; //If you want to append to the write, first get the original, and then add the new stitching, and finally unify to write to the file             

Five. http

• Create HTTP Service

  let server= Http.createserver (function (
   req,res) {});      

  The
  • client sends a request to the current service once, and the callback function executes once
    • [req]:request
      • It is an object that stores the client's request information, which contains the internal
    • [res]:response
      • It is also an object that stores a lot of methods that allow the server to return the content that the client needs to the client
      • res.end (): Returns the contents of the end to the client
    • req.url: Stores the URL address of the client's request (the path name of the request resource file + The parameter value of the question mark passed to the server)
    • the Guest When the client request file does not exist, you need to use try catch to avoid the server crashing
• The client sends the request to the server, not only the request of the resource file, many times the request of the data interface, the core principle and method of the two request processing is different, and the following code only applies to the request of the resource file (Html/css/js/png/gif ...
  • If the requested path contains the suffix name of the file, then the resource file is requested

  let suffixReg=/\.[0-9a-zA-Z]+$/i;if(suffixReg.test(pathname)){资源文件代码}

• Most of what we get is data in string format, and the data returned to the client is basically a string format (in some IE browsers, the content we return to the client is a string, causing some IE browsers to not recognize HTML or CSS or JS code, Only IE has this problem, the rest of the browser does not exist this problem, will be automatically recognized)
  • So when the server returns the data, you need to tell the client what type of content (MIME type) "Rewrite the response header"

  res.writeHead(200,{"content-type":"text/css;charset:utf-8"})

Six. HTTP messages

The content that the client passes to the server side and the content returned to the client by the server is collectively referred to as a message

• Start line: Request start line, response start line
• Header (Head): Universal header, request, response header, custom (Request/Response) headers
• Principal: Request body, response body

Client <===========> Server Side

1. What are the ways that clients can pass content to the server?
   • Ask the question mark after the URL address to pass the parameter
   • By setting the request header information, the content is passed to the server (Request header: Client settings/server-side Fetch)
   • Passing information to the server via the request principal (Request Principal: Client settings/server-side Fetch)
2. How does the server side return the content to the client?
   • Return information to the client via the response header (response header: server-side setup/client acquisition)
   • Return information to the client via the response Body (response header: server-side setup/client acquisition)

Seven. AJAX

Asynchronous JS and XML (asynchronous Javascript and XML)

• Asynchronous JS: Local refresh, the role of Ajax is to achieve local refresh (so-called local refresh and we have learned before the synchronous asynchronous no relationship)
• XML: Extensible Markup Language (the tags used inside are basically self-defined), storing data structures with their own tags (clearly defined)
  • Now we generally use JSON-formatted data instead of XML to store, JSON is not only a clear structure, the operation is also relatively convenient, the current AJAX request, the server side of the data returned to the client is generally JSON format (long ago in XML format)

HTTP Related knowledge