Front-end performance optimization — caching

The body has no colourful feng wings, mind acts upon mind.

Antecedents to review

The previous article discussed the implementation of nginx start stop and anti-theft chain, today we talk about the front-end performance optimization of the Web cache solution.

Factors affecting network access speed

Generally speaking, there are the following points:

• Network bandwidth
• Access to the distance
• Server processing power
• Resource size or content size itself

Optimization scheme

Dynamic pages that do not need to be updated in real time are cached and accessed according to static content.

Specific operation

• Optimize the resource itself

/ * *

Traditional Sprite graphics, code compression, including now based on Node, WebPack configuration

Some things are optimizing the resource itself

* * /

Copy the code

• Client cache

/ * *

According to --[[Convert dynamic pages that do not need real-time updates to static pages for caching,

Access as static content]]-- a term that front-end developers can easily relate to

To the client cache, localStorage and sessionStorage, etc.

There's nothing wrong with this idea per se, but we need to pay attention to a few details,

For example, the expiration time of a resource, which is cumbersome to control on the client side.

You may need to implement a caching class that handles expiration times yourself.

However, it is fine to say that some static resources are not updated for a long time

Put it on the client side.

* * /

Copy the code

• Web caching based on Nginx

/ * *

The basic idea is to make a local copy of what the customer has visited,

The next time the data is accessed, it is not linked to the server, but stored locally

The copy of data rings.

Specifically, the Web server gets a response from the back-end server based on a client request

The data is sent back to the client, while the Web server responds to the data set up locally

Duplicates are saved, and by local I mean the Web server, not the client. The next time

When the same request comes in, the Web server responds directly to the access request using the local copy.

* * /

Copy the code

Nginx cache configuration instance

• 404 Error driving Web cache

location {

  root /myweb/server/;   # the root directory

  

  error_page 404 =200 /errpage$request_url;   Redirect to the errpage directory

  

}



location /errpage/ {

  internal; # This directory cannot be accessed via external links.

  alias /home/html/;

  proxy_pass http://backend/;  Upstream address or source address

  proxy_set_header Accept-Encoding ' ' ; # back end does not return compression;

  proxy_store on;  # set nginx to save files returned by the proxy.

  proxy_store_access user:rw group:rw all:r; Configure data access permissions

  proxy_temp_path /myweb/server/tmp; # temporary directory

}

Copy the code

• Proxy_Cache mechanismThe cache

This mechanism uses MD5 to hash the request link to generate a file system directory to store the response data. Nginx creates cached indexes in memory to improve access efficiency. This mechanism supports caching of arbitrary linked response data, not just data at 200 state. However, it does not automatically clean up disk cache data sources. If the number of caches is too large, the server storage will be affected.

# Proxy_Cache configuration example

http {

.# Other configuration

  Configure the cache data storage path and memory space

  proxy_cache_path /test/proxycache levels=1:2 max_size=20m inactive=5m loader_sleep=1m;

  keys_zone-MYPROXYCACHE:10M

  Configure a temporary directory for storing response data

  proxy_tem_path /test/tmp;

  s

  server {

    location / {

      proxy_pass http:/mingyuejiangnan.club;

      proxy_cache MYPROXYCACHE; MYPROXYCACHE keys_zone

      proxy_cache_valid 200 302 1h; # configure 200 302 status response cache for 1 hour;

      proxy_cache_valid 301 1d; Configure 301 status response cache for 1 day;

      proxy_cache_valid 1m; Configure other state response cache for 1 minute;

    }

  }

}

# Configuration interpretation

/test/proxycache /proxycache /proxycache

If the cached data is not accessed within 5 minutes, it will be updated forcibly.

# MYPROXYCACHE: no more than 10m;

Update the cache index by traversing the cache every 1 minute.

Copy the code

Today’s summary

• Factors affecting performance
• Optimization scheme

One last word

1. Move your rich little hands and “like it.”
2. Move your rich little hands, “click here”
3. All see here, might as well “add a follow”