It is recommended to buy the original text, front-end performance optimization principle and practice, this paper summarizes the use of learning. If there is infringement, thank you for contacting, delete.

1. Storage

1) Browser caching mechanism

  1. Memory Cache
  2. Service Worker Cache
  3. HTTP Cache
  4. Push Cache

HTTP Cache

HTTP caching is one of the caching mechanisms we are most familiar with in our daily development. It is divided into strong cache and negotiated cache. The strong cache has a higher priority. The negotiation cache is enabled only when the strong cache fails to be matched.

Strong caching is controlled using the Expires and cache-Control fields in the HTTP header.

Negotiated cache: a caching strategy in cooperation between the browser and the server

The illustration

When the content of the resource cannot be reused, we directly set the no-store for cache-control to reject all forms of caching. If yes, set cache-control to nocache. If yes, set cache-control to nocache. Otherwise, consider whether the resource can be cached by the proxy server and decide whether to set it to private or public based on the result. Then consider the expiration time of the resource and set the corresponding max-age and s-maxage values. Finally, parameters such as Etag and Last-Modifi Ed are configured for negotiation cache.

(2), MemoryCache

A MemoryCache is a cache that exists in memory. In terms of priority, it is the first cache that the browser tries to hit. It is the fastest type of cache in terms of efficiency.

Usage scenarios: Base64 images can almost always be stuffed into memory cache, which can be seen as a browser “self-preservation” to save on rendering costs. In addition, small JS and CSS files also have a greater chance to be written into memory – by contrast, large JS and CSS files do not have this treatment, memory resources are limited, they tend to be directly thrown into the disk.

③ Service Worker Cache

A Service Worker is a Javascript thread that is independent of the main thread. It is detached from the browser form and therefore cannot access the DOM directly.

Usage: it can help us to achieve offline cache, message push and network proxy and other functions. For detailed use, see the gold digging brochure storage section

(4), Push the Cache

  • Push Cache is the last line of defense for caching. Browsers have only Memory Cache, HTTP Cache, and Service
  • The Worker Cache is only asked to Push the Cache if none of the Worker Cache hits. Push Cache
  • A cache that exists during the session and is released when the session terminates.
  • Different pages can share the same Push Cache as long as they share the same HTTP2 connection.

The cached knowledge is characterized by "fragmentation and fast iteration". We should try to divide layers and key points first, sum up a complete system, and then break down each knowledge point.

2) Cookie

The job of a Cookie is not to store it locally, but to “maintain state.”

HTTP is a stateless protocol. The server receives a request from the client, returns a response, and the story ends there. The server does not record any information about the client.

It has a maximum size of 4KB.

All requests under the same domain name carry cookies. Although cookies are small, there can be many requests, and as requests pile up, the overhead of such unnecessary cookies is unimaginable.

3) Web Storage

Local Storage and Session Storage

The difference lies in the lifecycle and scope.

  • Life cycle: Local Storage is persistent Local Storage. Data stored in it will never expire. The only way to make it disappear is to manually delete it. Session Storage is temporary local Storage. It is session-level Storage. When the Session ends (the page is closed), the Storage content is also released.
  • Scope: Local Storage, Session Storage, and Cookie all follow the same origin policy. However, the special point of Session Storage is that even if two pages under the same domain name are not opened in the same browser window, their Session Storage content cannot be shared.

②, Web Storage features

Large Storage capacity: Web Storage The Storage capacity ranges from 5 to 10 MBIT/s depending on the browser. It is only on the browser side and does not communicate with the server. Store some stable resources. For example, image-rich e-commerce sites will use it to store Base64 image strings: