Triggered when the user enters the URL

URI parsing

erDiagram URI ||--o{ URL : son URI }|.. | {URN - ADDRESS: son

URI: Uniform resource Identifier (URI)

  • Uris can be URLS or UrNs developer.mozilla.org/zh-CN/docs/…
  • A URL or URN is not necessarily a URI
  • URL is a URI, identifies the Web resources, and specify the operation or access ways, also includes access protocol and location, developer.mozilla.org/zh-CN/docs/…
  • Urns are a type of URI that identifies a resource by a specific name, excluding access, developer.mozilla.org/zh-CN/docs/…


Make up a URI: aoteman. IO /posts/hello… HTTP: defines the access mode

  • The default HTTP port is 80
  • HTTPS The default port number is 443
  • You can view it in network-general-remote Address

Aoteman. IO/posts/hello. HTML defines access to the resource path

# type resources

The status of each part is as follows

  • URL: aoteman. IO/posts/hello…
  • URN: aoteman.io/posts/hello.html#intro

The DNS

Find the server IP, if previously resolved, there may be a local cache

  • Recursive query: the user requests to the local DNS server, the local server requests to the domain server, the domain server requests to the first level, and so on, and then the local server tells you when it gets the result
  • Iterative query: the local server requests the root server, gives the next level of address, after the local server requests, gets the result, the local server tells you

DNS optimization:

  • Minimize DNS requests
  • (link rel=”dns-prefetch” href=””)
  • Third party acceleration

Cache check

Caches are classified as follows: Strong cache > Negotiated cache

  • Yes, and not invalidated, strong cache
  • If not, or fail

Negotiation cache in detection

  • If yes, go to the cache
  • None The latest data is obtained

Cache location: Memory cache Disk cache

  • Memory cache: deactivates when the browser is closed
  • Hard disk cache: Save directly to the computer

For example, baidu is used to open the hard disk cache, matching the corresponding cache, there is the use of words, no words to initiate a request; What if: the file is updated?

  • Example Change the version number verson
  • You can put in a timestamp when you save, and update a timestamp if the file changes

Here’s another example of strong caching: Expires/cache-control

Based on the response header returned from the first request resource

  • Expires: indicates the cache expiration time
  • Cache-control:max-age=time, request within time, read Cache information
  • Cache-control > Expries

Negotiated cache: last-Modified/ETag

After the strong cache fails, the browser sends a request with the identifier, the server decides whether to use the cache, uses the negotiated cache to return 304, and then reads the local cache

  • Last-modified: Contains the date and time that the resource identified by the source server was Modified, with lower precision than ETag

  • ETag: Identifier for a specific version of a resource

TCP (channel)

Three handshakes, in order to connect

Core idea: to ensure reliable data transmission, and improve transmission efficiency

  • Seq: Serial number, which is the mark when the initiator initiates data

  • Ack: Confirm the sequence number

  • ACK: Confirms that the serial number is valid

  • RST: resets the connection

  • SYN: Initiates a connection

  • FIN: Releases the connection

According to? Two or four times?

M: Are you there? 2. Your girlfriend thinks: You can’t hear what your girlfriend says at this point

1. M: Are you there? The girl friend in the mind think: HMMM, OK, and confirm reply you, HMMM, in 3. Male :OK, you in 4. Girlfriend :SB, not in!

The data transfer

TCP quadruple wave (instant reply mechanism)

You can set connection: keep-alive to keep a long connection without four waves until the page closes

  • The client initiates a request

  • The server receives the request and replies to the client that it has been received and is preparing data

  • The server sends data to the client, do you have anything else to send

  • Client: No, you have received the data, you can close it

Page rendering

  • The browser begins parsing the target HTML file, executing the flow from top to bottom.

  • The HTML parser transforms the HTML structure into the underlying DOM(document object Model). When the DOM tree is built, the DomContendLoaded event is triggered.

  • The CSS parser parses CSS into a CSSOM(Cascading Style Sheet object Model), a tree containing only style information.

  • CSSOM and DOM begin to merge to form a render tree, and each node begins to contain specific style information.

  • Calculate the location information of each node in the rendering tree, that is, the layout stage.

  • Displays the layout rendering tree on the interface.

HTTP1.0, 1.1, 2.0

HTTP1.0 is different from HTTP1.1

  • Caching: HTTP1.0 mainly uses Last-Modified,Expires caching. HTTP1.1 supports ETag, catche-Control
  • HTTP1.1 supports breakpoint continuation, return code 206
  • HTTP1.1 added many error response codes, such as 404 request resource conflict with current status,410 indicates permanent deletion of a resource
  • HTTP1.1 enables long connections by default (if a request times out, it will be blocked later)

HTTP2.0 is different from HTTP1.x

  • Multiplexing!! The main
  • Server push (need to be actively enabled, such as request index.html, will actively return contained CSS JS)
  • More robust
  • Binary format

Performance optimization

 1.Using cache to implement strong cache and negotiation cache for static resources2.DNS optimizes server deployment and increases HTTP concurrency3.TCP optimization Enables the long connection4.Data transfer Volume Reduction Content compression The server enables GZIP compression (general compression)60%) Large amount of data batch requests reduce the number of HTTP requests Resource file merge processing font icon Sprite image CSS-sprit image base64 less use! important5.CDN
  6.HTTP2. 0
  7.Reduce white screen time loading skeleton screen images lazily8.If js does not manipulate the DOM, you can + sync or defer9.CSS does not block rendering media="print"
  10.Reduce DOM backflowCopy the code

Welcome to all the gods