Performance?

From site generation to code running, browser and server resources consumed, some of the resources required, collectively referred to performance

Why performance tuning?

1: The industry can’t get around the block

2: Your interviewer will ask

3: The knowledge you need to be a big shot

How to optimize performance?

1: indicates the browser cache policy

– strong cache

—Cache -Control

-public Indicates that the response can be cached by the client and proxy server

-private Indicates that the response can only be cached by clients

-max-age-30 Indicates that the cache expires after 30 seconds and a new request is required

-s-maxage-30 Overwrites Max age. It has the same effect and takes effect only on the proxy server

-no-store Does not cache any response

-no-cache Indicates that the resource is cached but invalid immediately. The system sends a request next time to verify whether the resource is expired

-max-stale=30 If the cache expires within 30 seconds, the cache will be used

-min-fresh=30 Expects to get the latest response within 30 seconds

–Expires (Understand)

Cache expiration time, used to specify the expiration time of resources, is a specific point in time on the server. That is, Expires max-age + request time needs to be used in conjunction with last-Modified

Expires is a Web server response header field that tells the browser in response to an HTTP request that the browser can cache data directly from the browser before the expiration date without having to request it again.

— Two states of strong cache

From Memory cachel: The process of retrieving resources from memory. There is no such process after the browser refreshes or re-opens

From disk cache: Reads the cache from the hard disk. This memory is not cleared when the browser closes

Negotiation cache

The local cache will be ignored, and the server will be asked to verify that the resource is up to date. If not, the local cache will continue to be used. In this case, 304 will be returned, which is the negotiated cache. . Negotiation cache does not take effect HTTP status code 200. Obtain resources from the server through a normal path.

2: Refine the code

When it comes to refining code, we have to mention algorithms, which can be optimized from two perspectives: time complexity and space complexity. It’s hard. The algorithm, um, just needs to know that, in terms of time complexity, it can make order 2n into order n, and that’s it. It’s optimized

3: Static resource loading

1: JS, CSS, ah pictures ah compression processing, evil webpack

2: The full name of CDN is Content Delivery Network. CDN is an intelligent virtual network built on the basis of the existing network. It relies on the edge servers deployed in various places, through the central platform of load balancing, content distribution, scheduling and other functional modules, users can get the content nearby, reduce network congestion, and improve user access response speed and hit ratio. The key technologies of CDN mainly include content storage and distribution

3: Sprite graphics and stuff