WEB front-end optimization of large-scale website architecture

Review the large-scale website architecture mentioned in the previous blog:


In this picture, there are many classic modules. Such as CDN server, reverse proxy server, load balancing system, application server, distributed cache system, etc. I will introduce them one by one in the next few blogs. Today, let's take a look at the WEB front-end optimization. In the above figure, the part before the load balancing server can be regarded as the WEB front-end, and the browser is naturally indispensable.

WEB front-end optimization includes browser optimization, using CDN cache acceleration, and using reverse proxy cache acceleration.
When optimizing the browser
, you can reduce http requests, use browser caching, enable compression, reduce cookie transmission, optimize CSS and JS code locations, etc.
to reduce http requests:
http protocol is an application layer protocol, which means that every http request needs to Establish a communication link for data transmission. So reducing http requests improves performance.
Under normal circumstances, when the browser accesses a web page, the server will first return the corresponding html page. If there are other css, js and other scripts in the html, it will make multiple http requests to download these scripts, which will increase the number of scripts. Server pressure. So we need to associate the least scripts in html as much as possible, and even write css into html to reduce the number of http requests.

Use browser cache:
By setting the Cache-Control and Expires attributes in the http response header, you can set the browser to cache the page. In some cases, despite caching, we still want to apply changes to static files to the client browser in a timely manner, which can be achieved by changing the file name. Because if you only change the content of the file without changing the name, the browser's caching mechanism will not load a new file with the same name.

Enable compression:
For text files, such as html, css, javascript, enabling GZip compression can achieve good results.

Reduce cookie transmission:
Cookies are included in every request and response, and a cookie that is too large can seriously affect data transmission. Therefore, write data to cookies as little as possible. In addition, for access to some static resources, cookie verification is not required, so there is no need to send cookies.

Optimize CSS and JS code position:
put CSS at the top of the page and js at the bottom.

The full name of CDN is Content Delivery Network. Its essence is still cache (cache some commonly used static resources). The CDN server is deployed in the computer room of the network provider to provide cache in the place closest to the user, speeding up user access and reducing Data center stress.

The reverse proxy is located at the forefront of the entire website, proxying the entire website system to receive Http requests. In addition to protecting the website system, the reverse proxy server also caches some resources. If the requested content happens to be one of the resources, it will be directly returned to the user, which can avoid some requests to the application server.

Guess you like

Origin http://10.200.1.11:23101/article/api/json?id=326876923&siteId=291194637