360 Front-end Star Project-0409

1. How to write "good" JavaScript (moon shadow)

1.1 Duties

• HTML: responsible for structural functions (Structural)
• CSS: Responsible for presentation function (Presentational)
• JavaScript: responsible for behavioral functions (Behavioral)

1.2 Design of complex UI components

How to design the Jingdong carousel picture? The following steps can be used:

1. Structural design
2. API design
3. Control flow design

optimization:

1. Plugin / dependency injection reduces coupling
2. Improve plugin / template to encapsulate HTML and components
3. Component model abstraction

1.3 Local detail control

• Process abstraction, create once
  • Throttle anti-shake

2. Web Standard: The Force of the Front End (Li Songfeng)

• New features compared with HTTP2.0 and HTTP1.X

  • The new binary format (Binary Format), HTTP1.x parsing is based on text. The format parsing based on the text protocol has natural defects, and there are various forms of text representation. There are bound to be many scenarios to consider the robustness, and binary is different. Only a combination of 0 and 1 is recognized. Based on this consideration, HTTP2.0 protocol analysis decided to use a binary format, which is convenient and robust.

  • Multiplexing (MultiPlexing), that is, connection sharing, that is, each request is used as a connection sharing mechanism. A request corresponds to an id, so there can be multiple requests on a connection, and the request of each connection can be randomly mixed together. The receiver can attribute the request to the different server requests according to the request id.

  • Header compression, as mentioned above, the HTTP1.x header mentioned above has a lot of information, and it must be sent repeatedly every time. HTTP2.0 uses an encoder to reduce the size of the header that needs to be transmitted. The header fields table not only avoids repeated header transmission, but also reduces the size of the transmission.

  • Server push (server push), like SPDY, HTTP2.0 also has server push function.

3. HTTP knowledge commonly used in the front end (Li Chengyin)

3.1 Request type

• GET: Get a resource content
• POST: add a resource
• PUT: update resource content
• DELETE: delete resource
• OPTIONS: Based on the return to determine whether there is permission to request
• HEAD: only return head, not return entity content
• PATCH: Update some content

3.2 Status code

• 1 **: The request has been accepted and needs to be processed
• 2 **: The request has been processed correctly
• 3 **: Redirect
• 4 **: Client error
• 5 **: Server-side error

3.3 Cookie Security Policy

(XSS vulnerability stealing cookies, setting httponly, CSRF vulnerability, setting token / samesite)

• path
• domain (hostonly*)
• expires (max-age)
• secure
• httponly (js cannot get cookies)
• SameSite

3.4 session

• The server side corresponds to Session, which stores user information based on cookies
• Cookie is valid for Session (expires as browser process exits)

3.5 Content-Type

request:

• application/x-www-form-urlencoded（提交）

• multipart/form-data

• application/json

• text/xml

  3.6 Performance optimization

• Keep-alive connection

• Reduce network transmission size

• Cache (strong cache and negotiated cache, LocalStorage and ServiceWorker)

• http2/http3