Browser cache and data compression optimization
HTTP caching mechanism: If the request is successful, there will be three situations: 200 from cache: Get the response directly from the local cache, the fastest and the least traffic, because there is no request to the server at all; 304 not modified: negotiate the cache, the browser is locally If there is no hit, send certain verification data in the request header to the server. If the server data does not change, the browser will respond from the local cache and return 304, which is fast. Very little data is sent, and only some basic response header information is returned. , The amount of data is very small, and the actual response body is not sent; 200 OK: The above two kinds of caches all fail, and the server returns a complete response. The cache is not used, which is relatively slow.
The browser thinks that the local cache is available and will not request the server. Related header: pragma: a legacy of the HTTP1.0 era. When this field is set to no-cache, it will tell the browser to disable local caching, that is, send a request to the server every time; expires: HTTP1.0 era is used to enable local Cached fields, the time between the browser and the server cannot be kept the same. If the time gap is large, the cache result will be affected; cache-control: HTTP1.1 is a solution for the inconsistent time of expires, and informs the browser of the time interval for cache expiration instead of At any time, even if the specific time is inconsistent, it does not affect the management of the cache; the values that can be set: no-store: prohibits the browser from caching the response; no-cache: does not allow direct use of the local cache, first initiate a request and negotiate with the server; max-age =delta-seconds: Tell the browser that the response local cache is valid for the longest period, in seconds; priority: pragma> cache-control> expires. When the browser does not hit the local cache, such as the local cache expires or the response states that it is not allowed to use the local cache directly, the browser will definitely initiate a server request;
The server will verify whether the data is modified, and if it does not notify the browser to use the local cache. Related header: last-modified: notify the browser of the last modification time of the resource; if-modified-since: After getting the last modification time of the resource, this information will be submitted to the server for inspection through it. If there is no modification, a 304 status code will be returned. ; ETag: HTTP1.1 is launched, the fingerprint identifier of the file, if the content of the file is modified, the fingerprint will change; if-none-match: the local cache is invalid, will carry this value to the server, the server will determine whether the resource has changed, If there is no change, use the local cache directly and return 304
The choice of caching strategy: content suitable for caching: unchanging images, such as logos, icons, etc., js, css static files, downloadable content, media files; it is recommended to use negotiated caching: html files, pictures that are frequently replaced, and frequently modified The loading of js, css files, js and css files can be added to the file signature to refuse caching, such as a.css? signature or a.signature.js; cache content is not recommended: user privacy and other sensitive data, frequently changed api Data interface
nginx configuration cache strategy:
local cache configuration: add_header instruction: add response header information with status codes 2xx and 3xx, add_header name value [always];, you can set Pragma/Expires/Cache-Control, which can be inherited; expires instruction: notify browsing The expiration time of the device, expires time;, when it is negative, it means Cache-Control: no-cache;, when it is positive or 0, it means Cache-Control: max-age=specified time;; when it is max, Cache -Control is set to 10 years;
negotiation cache related configuration: Etag instruction: specify the signature; etag on|off;, the default is on
Front-end code and resource compression: make resource files smaller, speed up the transmission of files on the network, make web pages faster, reduce bandwidth and traffic overhead; compression methods: js, css, pictures, html code compression, Gzip compression . js code compression: generally remove extra spaces and carriage returns, replace long variable names, simplify some code writing, etc. There are many code compression tools UglifyJS (compression, syntax checking, beautification code, code reduction, conversion), YUI Compressor (from yahoo , Only the compression function), Closure Compiler (from google, the function is similar to UglifyJS, the compression method is different), there are online tools tool.css-js.com, applications, editor plug-ins. CSS code compression: The principle is similar to the principle of js compression, the same is to remove white space, comment and optimize some CSS semantic rules, etc., compression tool CSS Compressor (optional mode). html code compression: It is not recommended to use code compression, sometimes it will destroy the code structure, you can use Gzip compression, of course, you can also use the htmlcompressor tool, but you must check the code structure after conversion. Img compression: the proportion of general pictures in the web system is relatively large, compression tools: tinypng, JpegMini, ImageOptim. Gzip compression: configure nginx service, gzip on|off, gzip_buffers 32 4K|16 8K #buffer (how many blocks are cached in memory? How big is each block), gzip_comp_level [1-9] #Recommended 6 compression level (the higher the level, the higher the compression The smaller is, the more CPU computing resources are wasted), gzip_disable #Regularly match UA what kind of uri does not perform gzip, gzip_min_length 200 #The minimum length to start compression, gzip_http_version 1.0|1.1 #The http protocol version to start compression, gzip_proxied #Set requester Proxy server, how to cache content, gzip_types text/plain applocation/xml #Which types of files are compressed, gzip_vary on|off #Whether to transmit gzip compression flag. Other tools: Grunt, an automated build tool.