The front end can be optimized in a very, very, very, very, very many ways, so let’s talk about it briefly in terms of CRP.

Enter URL to render page process:

CRP(Critical Rendering Path) : Critical Rendering Path

Key process 1: browser rendering process

1. Build DOM tree, CSSOM tree and render tree

The DOM tree

Transformations, tokens, lexical analysis, DOM construction

2. CSSOM tree

Summary steps:

1. Process HTML tags and build DOM trees

2. Process CSS markup and build CSSOM tree

3. Merge DOM tree and CSSOM tree into render tree

4. Calculate their exact position and size within the device viewport based on the generated render tree. The stage of this calculation is Lavout = or reflow.

5. Absolute pixel of nodes = “painting or Rasterizing” according to the geometric information obtained from rendering tree and reflux.

Note:

The actual rendering to the page must happen after both the DOM tree and the CSSOM tree are completed. HTTP and CSS are the things that get in the way of page rendering.

Optimization scheme

1. Semantic labels

2. Avoid deep nesting (CSS selectors render from right to left)

3. Download CSS to the client as soon as possible (take full advantage of HTTP multiple requests)

To the top:

Style (HTML was requested when it came back, better than link)

Link (Sending HTTP requests, asynchronous)

@import (reduce import blocking render requests, sync)

4. Avoid blocking JS loading at the bottom

Green: the page is rendering Blue: script request is encountered to pull data Red: Render

Async declared JS do not set dependencies

5. Reduce DOM backflow and redraw

A page must be rendered with backflow and redraw. Backflow: element size or position changes. Redraw: a change in style, such as background color.

Backflow triggers redraw, and redraw does not necessarily backflow

Avoid backflow:

1. Abandoned the era of traditional DOM manipulation and started the data impact view mode based on VUE/React.

2. Separate read and write operations (modern browsers have a render queue mechanism)

3. Style set changes

4. Cache layout information

5. Batch modify elements

6. Animation effect applied to elements with position attribute absolute or fixed (out of document flow)

7.CSS3 hardware acceleration (GPU acceleration)

8. Sacrifice smoothness for speed

9. Avoid table layouts and javascript expressions with CSS

Key process 2: DNS resolution

DNS resolution is resolved locally and then elsewhere

1. Optimization of DNS (each DNS resolution time is expected to be 20-120 ms)

Reduce the number of DNS requests (difficult to do, one site now returns resources from multiple servers)

DNS Prefetch

<link rel="dns-prefetch" href="//d.jd.com"/>
Copy the code

2. Reduce the number of HTTP requests and the size of requested resources

Resource merge compression, font icon (no vector map, no independent request), Base64, GZIP (general file compression more than 60%), image lazy loading, data delay batch loading, CDN resources (regional distribution)

3. Apply cache (after the first load, reload, stop reading cache)

The cache location

Memory Cache: indicates the Memory Cache. Disk Cache: indicates the hard Disk Cache

  1. Open the web page and enter the address in the address bar: Check whether there is a match in the disk cache. If there is no match, send a network request.
  2. First flush (F5) : Since TAB is not closed, the memory cache is available and will be used first (if a match is made), followed by the disk cache.
  3. Forced refresh (Ctrl + F5) : Browsing items do not use caching, so requests are sent with cache-Control: no-cache in the header (with Pragma: no-cache for compatibility), and the server returns 200 and the latest content.

Strong and negotiated caching:

Strong cache

Strong caching requires two response headers, Cache-control

Expires: Expires is a header introduced in HTTP1.0 that represents the expiration date of a resource. It describes an absolute time that is returned by the server

Expires: Wed, 11 May 2018 07:20:00 GMT
Copy the code

Cache-control: Cache-control occurs in HTTP / 1.1 and takes precedence over Expires, which represents a relative time

Cache-Control: max-age=315360000
Copy the code

Current mainstream practices use cache-control to Control the Cache, max-age to Control expiration times, and the following instructions

Cache-control: public can be cached by all users, including terminals and intermediate proxy servers such as CDN

Cache-control: private can only be cached by the terminal browser, not by the trunk Cache server

Cache-control: no-cache, the Cache is cached locally first, but after hitting the Cache, the server must verify the freshness of the Cache before using it

Cache-control: no-store, no Cache is generated

Negotiate the cache

When the server returns a response header with no cache-control or Expires in the first request, or if cache-control or Expires is set to no-cache, the browser negotiates with the server on the second request.

If the latest version of the cache and the server resources is consistent, then don’t need to download the resource again, the server returns a 304 Not Modified status code directly, if the server is found in the browser cache is the old version, then the server will be the entire contents of the latest resources back to the browser, a status code is 200 Ok.

Negotiation cache takes effect, return 304

Last – Modi fied and If – Modified – Since

  1. When the server returns the resource for the first time, last-Modified (the Last modification time on the server) is set in the response header. After the browser receives the resource, the file and the response header are cached.
  2. The next time the resource is requested, the browser detects last-Modified and adds the 1f-Modified-since request header, which is the value in last-Modified:
  3. When the server receives the resource cleanup again, it compares the value in if-modifed-since with the last modification time of the resource in the server. If there is no change, it returns 304 and an empty response body, read directly from the cache, if
  4. Modifed-since is less than the last modification time of the resource in the service, indicating that the file has been updated, so the new resource file and 200 are returned;
  5. However, last-Modified can only be measured in seconds. If the file is Modified within an imperceptible time, the server will consider the resource hit and will not return the positive source.

Protocol cache failed. 200 is returned

The ETag and If – None – Match

  1. Etag is a unique identifier (generated by the server) that is returned to the LAN resource file when the server responds to the request. As long as the resource changes, Etag will be generated again.
  2. The next time the server sends a request to the resource, the Etag returned last time will be added to the request header if-none-match. The server only needs to compare the if-none-match sent by the client with the Etag of the resource on the server. It is a good idea to determine whether the resource has been modified relative to the client.
  3. If the server finds that the ETag does not match, it sends the new resource (including the new ETag) back to the client in the normal GET 200 packet format: if the ETag is consistent, it returns 304 and tells the client to use the local cache directly.
  4. Overall cache flow chart:

Strong cache negotiation caches are for files and can be stored locally with LocalStorage for data

Other key nodes are code operation, code compilation, security optimization, etc

Well this is personal performance optimization small note O (╥﹏╥) O, citing some blogs and Everest training pictures, and then write may not be very perfect very good, just a small note for their review