Skills summary from the front to white senior front-end need to know (2)

The second article of this series, continue to summarize ~~

This is derived from a problem of knowledge, the problem is
URL from the input to the process of loading the page .
First sort out this process

first step

Url from the browser receives the request to open the network thread (the browser process / thread model, operation mechanism of js)

Browser process

It is a multi-process browser. There is a primary process, and each tab will open a new page process (in some cases (such as blank tab) will merge into a multiple tab processes)
process may include a main course, plug-in process, GPU, tab page, and so on.

• brower process

The main process responsible for coordinating, master, etc.

• Third-party plug-in process

Each type of plug-in, there will be a process, only when plug-in will be created.

• GPU Process

Only one, for 3d rendering

• The default browser process (kernel)

Each tab page corresponds to a process responsible for page rendering, script execution, independently of each other, sometimes optimization (multiple blank tab will be merged into one)

Browser multithreaded kernel

Each tab page can be viewed as the browser kernel process, the process is multi-threaded, it has the following major threads:

• GUI rendering thread
• JavaScript thread (which is why JS is always said that the reason single-threaded)
• Event trigger thread
• Timer trigger thread
• Network request thread

Each network request will need to open a separate thread, if url resolves to http request, it will open a new thread to handle resources download. (Http2.0 connection multiplexing can be realized tcp)

JS operating mechanism

Refer to my other article
js event loop implementation mechanisms

The second step

Open network to issue a complete thread http request (dns queries, tcp knowledge / IP requests, five Internet protocol stack, etc.)

DNS lookup IP

If you enter a domain name, DNS resolution needs to IP, as follows:

• If the browser has cached, the direct use of the browser's cache, and if not, use the local cache
• If there is no local cache, use host, then you no longer query to a DNS server (the middle of the route there is a cache, you can use routing cache, etc.) IP

dns queries are very time-consuming, if resolving the domain name too, will slow to load the first screen, you can optimize the use dns-prefetch

tcp / IP requests

The essence is http tcp / ip request
this part of the need to understand the four waving at the three-way handshake and disconnected.

Three-way handshake

http tcp the long message into a short message, via three-way handshake to establish a connection for transmission of data.

1. Client: hi, I'm a client, the server you are right
2. Server: hi, I am a server, you are a client you
3. Client: Yes, I am the client

After the connection is successful, you can begin transmitting data it ~~

Four waving

1. The active side: hi, I want to disconnect it, I can only passively receive data
2. Passive side: hi, I received it
3. Passive side: hi, I have to disconnect it
4. The active side: Well, I connect passively receiving data also turned off.

After it is disconnected, unable to communicate.

tcp / ip concurrency limit

Tcp concurrent browser connections under the same domain name is limited (2-10 range), and before http2.0, a resource you need to download a tcp / ip request.

Differences get / post of

Although the nature of the get and post are tcp / ip, but in addition to http level in tcp / ip also differentiated level, get only produce a data packet (together with the headers and data sent out), two post request is sent packets (headers after the first transmission, 100 will receive the retransmission data)

Five-layer Internet protocol stack

Http requests sent to the server received from a client, an intermediate will flow through a series of simple generalization is:
sending a http request from the application layer, the transport layer is formed by three-way handshake tcp / ip connection, then the network layer address ip, and then framing the data link layer of the package, and finally to the physical layer using a physical transmission medium.
there is also a full frame of the OSI, a multi-session and presentation layers
session layer: managing the dialogue between the different users and processes, such as login and logout control
presentation layer: processing two communication systems to represent the information exchange, including the exchange of data format, data encryption and decryption, data compression and the like.

third step

A request received from the server receiving the request back to the corresponding (load balancing, interception and handling inside the safety background)

Load Balancing

For large projects, the amount of concurrent access is great, the next server in this case is definitely not enough, so in general there will be a number of servers in a cluster, with the reverse proxy load balancing.
User-initiated requests are directed scheduling server, the scheduling server and the actual scheduling algorithm, different allocation request to a corresponding server in the cluster execution, scheduler then waits for the http server in response to the actual, and then returned to the browser

Security interceptor

Background usually add interceptors, security interceptor verified, cross-domain authentication, etc.

the fourth step

1. Interactive foreground and background (http header response code, message structure, cookie, etc., gzip compression, etc.)

http head

This section includes three portions

Universal head

The server address request: Request Url

Request Method: mode request (the GET, the POST, the HEAD, OPTIONS, the PUT, the DELETE, the CONNECT, the TRACE)
(HTTP1.0 defines three request methods, GET, POST, HEAD, http1.1 added five methods, OPTIONS , PUT, DELETE, CONNECT, TRACE )

Status Code: request returns a status code

Remote Address: the address of the remote server requests (will turn into IP)

Request headers

Accept: receiving type, expressed browser supports MIME ((Multipurpose Internet Mail Extensions) is a description of the type of message content Internet standard) type, the corresponding server returned content-type

Accept-Encoding: browser supports compression formats such as gzip

The type of browser entity that issued to the content of: Content-Type

Cache-Control: Specifies the request and return the caching mechanism, such as no-cache

If-Modify-Since: corresponding to the service side of the Last-Modified, whether changes to match the file, whether a cache is only accurate to within 1s, it is the http1.0

Expires: using the cache at this time, http1.0

Max-age: represents the number of seconds in a local cache resources, the use of cache within the effective time

If-none-Match: Etag the corresponding service ends, to match the content of the document has changed

Cookie: the cookie and will take time to access the same domain

Connection: the server and client communications connection, keep-alive, the connection length indication (data transfer complete TCP connection is not maintained (RST packets not made, not four wave), the client can not indefinitely long connection take it, there will be a timeout, the server will tell the client sometimes timeout, if the server does not tell the client timeout does not matter, the server may initiate waved off four times a TCP connection, the client can know the TCP connection It has been ineffective; in addition there are TCP heartbeat packets to detect whether the current connection is still alive)

Host: Requested server URL

Origin: where the initial request is initiated, it will only be accurate to port

Referer: the source of the page will be accurate to the page address, csrf used to intercept this field

User-Agent: some information about the user of the client, such as browser information

Response header

Access-Control-Allow-Headers: headers allows the server requests

Access-Control-Allow-Methods: Method server allows requests

Access-Control-Allow-Origin: origin server allows requests

Content-Type: type of content returned by the server entity

date: data originated from the server time

cache-control: tells the client caching mechanism

Last-modified: request last modified resources

Expires: tell the client using the cache at this time

Max-age: tell the client how many seconds in the local cache

Etag: request identifies the resource indicates whether the resource change

Set-cookie: cookie settings and page associated with the server by the head of the cookie to the client

keep-alive: if the client provided a keep-alive, there will be a corresponding response server, such as timeout = 20

Server: server information. Such as Apache

Response Code

Meaning the state of a different range of

• 1xx --- request has been received, processing continues
• 2xx --- request has been accepted, understood
• 3xx --- redirection, complete the operation requires further processing
• 4xx --- client error (parameter error, syntax error or request can not be achieved)
• 5xx --- server error

Common status codes

• 200 --- request has been received and successfully returned to the client
• 302 --- redirect
• 304 --- with the browser's cache
• 400 --- client request is wrong, wrong request parameters, etc.
• 401 --- request no permissions
• 403 --- prohibit access (such as prohibition not logged in)
• 404 --- Resource not found
• --- 500 internal server error
• --- 503 Service Unavailable

cookie

A cookie is a way browser local storage, and general help the client and server communications, to verify the identity, combined with the use of server-side session.

Simply put under usage scenarios:

1. User login
2. Information server receives the request, generates session, there will be users
3. Generate a sessionid
4. Server-side cookie is written in the login page
5. Browsers have this cookie, and access to the same domain name will automatically take the time this cookie

gzip

gzip compression of high efficiency, up to 70%, specifically refer to another article I optimize front-end performance of gzip

the fifth step

1. Caching Issues (http cache, cache head, etag, cache-control, etc.)

This part of the cache can refer to my other article
analyzes the browser cache mechanism

1. Parsing process browser receives the http packets (Analysis html, lexical analysis dom parsed into a tree, css parse tree generated css rules, combined into render tree and layout, drawing rendering, synthetic composite layers, the GPU rendering, outer processing, loaded domcontentloaded chain resources and the like)

Composite layer, a synthetic layer, GPU, hardware acceleration, please refer to this article https: //juejin.im/entry/59dc9 ...

1. css visual model (render rule element, such as a block containing the control block, BFC, IFC concepts)

BFC can refer to this section notes
BFC

1. JS engine parsing process (JS interpretation stage, the pretreatment stage, execution stage generates a context, VO, scope chain, recovery mechanisms)

JS enforcement mechanism section may refer to this article
js enforcement mechanisms

In general, knowledge point is the following ~~

Core Knowledge

Browser model

Process Explorer and thread

Rendering principle

Dom constructed tree, css tree, render tree, reflow, repaint, and the simple layer composite layer, GPU rendering

JS resolution process

Byte -> word -> syntax tree -> parse into machine code

JS operating mechanism

Variable lift, lift function, VO, AO, this

Key knowledge

http relevant

HTTP1.1 http2.0 HTTP1.0, HTTPS
http2.0 major new features

1. Multiplexing (a tcp / ip connection can request multiple resources)
2. Header compression (http header compression, reducing the volume)
3. Binary framing (application layer and transport layer in a multi-layer binary framing layer, improving the transmission performance, low latency and high throughput)
4. A push server (a server for the requesting client can issue multiple responses, may actively notify the client)

http https is built on the basis of prior request to establish ssl connection, make sure the next communications are encrypted and can not be stolen.

Here simply under the SSL / TLS handshake process:

1. Browser requests to establish ssl connection and sends a random encryption client random number and client-side support services, such as RSA encryption, and this was transmitted in the clear
2. Server to choose the set of encryption algorithms and hash algorithm, reply to a random number server random, and their own identity information to the browser in the form of certificates (including website address, asymmetric encryption public key certificate authority Wait)

3. After the browser receives the server certificate issued

   • Legality verification certificate (authority is legitimate, whether the same URL and credentials in the URL where), if the trust certificates, the browser will appear in front of a small lock icon
   • After (believe it or to any matter) receiving user credentials, the browser will generate a new random number premaster-key, and the encryption premaster-key with the public key certificate and the specified encryption method, is sent to the server

• Using the client random, server random, and premaster-key through a certain algorithm may generate a symmetric encryption session key transmission connection http
• Use good agreement handshake message hash algorithm, and encrypted using the generated session key, and transmits all the information to the server before the generation of

1. Server receives the browser's reply

• Encryption and decryption using known methods and its own private key to decrypt the information sent by the client, access premaster-key
• And the same browser generates a session key rules
• Use browser session key to decrypt the information sent by the handshake, and verify whether or not consistent with the hash sent by the browser
• Use session key encryption period of handshake information sent to the browser

1. Browser to decrypt the hash sent by the server handshake, if the server sent to hash the same, the end of the handshake.

web security-related (xss, csrf)

xss cross-site scripting attacks
csrf cross-site request forgery

Cross-domain and treatment

Cross-domain processing with reference to the previous article in this series ~~
skills summary from the front to white senior front-end need to know (1)