Nowadays, front-end is a big concept. This refers specifically to the web front-end, including HTML/CSS/JS and other resources. Optimization methods in this area are relatively mature. Commonly used methods include optimizing browser access, using reverse proxy, CDN, etc.
Browser access optimization
-
Reduce HTTP requests This is obvious, more requests mean more connections are established, requiring more threads to process. The overhead of these communications and services is very high, and sometimes the total communication time may even exceed the processing time.
The main means to reduce HTTP is to merge css, Javascript, and merge images. Combine the resources required by the browser for one visit into one file.
-
Use browser cache For a website, the above-mentioned CSS, Javascript, and some fixed images (logo, basic materials) are all static resource files, and the frequency of changes is small, but each Http request is necessary; Well, using the browser to cache this part of the cache can conveniently save resources.
-
Enable compression It is the same statement file mentioned above. The server compresses the file, and the browser decompresses the file. However, this part of the processing will also take up some time, and the effect is not very obvious. Just have a habit of optimizing the size.
-
CSS is placed on the page, and Javascript is placed below the page. This is only a theoretical method, because the browser will load all CSS before rendering the page. On the contrary, Javascript will be executed immediately after loading, so the browser downloads CSS as soon as possible and finally loads Javascript.
However, it is not appropriate when Javascript control is required for page parsing, so the necessary Javascript should be placed in an appropriate position, and the ones that do not affect parsing should be placed at the bottom.
CDN
The essence of CDN (Content Distribute Network, content distribution network) is a cache, which caches data in the place closest to the user so that the user can access the data nearby.
CDNs can generally cache static resources, such as images, media files, HTML, CSS, Javascript, etc. A good CDN service can achieve the effect of opening static pages in seconds.
Reverse proxy
As the name suggests, reflective proxy adds a proxy server as an intermediary between the server and the user. The user submits all requests to the reverse proxy server, and the server forwards the request to the application server according to certain rules.
The intermediate reverse proxy server can protect the application server on the one hand, and configure the cache on the other. If the resource requested by the user is used in the cache of the proxy server, it can be returned immediately, reducing the pressure on the application server.