“This is the third day of my participation in the Gwen Challenge in November. Check out the details: The last Gwen Challenge in 2021.”

1. What is CDN?

A Content Delivery Network (CDN) is a group of servers distributed in various regions. These servers store copies of the data, so the server can fulfill requests for data based on which servers are closest to the user. CDN provides fast service and is less affected by high traffic.

Users can obtain the content at the nearest location, reducing network congestion and improving user access response speed and hit ratio.

2. Why use CDN

Does caching, local storage provide performance gains only after the “get resources and store them” thing happens? In other words, none of these tactics will save us the first time we ask for resources. In order to improve the response capability of the first request, we also need the capability of CDN in addition to the schemes mentioned in sections 2, 3 and 4.

3. CC

CDN has two core points, one is cache, one is back source.

Both of these concepts are very easy to understand. Label to the process described above

“Caching” is the process in which we copy resources to the CDN server.

“Back source” is the process in which the CDN finds that it does not have the resource (usually the cached data has expired) and turns to the root server (or its upper layer server) for the resource.

4. CDN and front-end performance optimization

CDN is usually used to store static resources

The “root server” mentioned above is essentially a business server whose core task is to generate dynamic pages or return non-static pages, both of which require computation. The business server is like a workshop where machines hum to produce the resources we need; In contrast, a CDN server is like a warehouse, which only acts as a “habitat” and “porter” for resources.

So-called “static resources”

JS, CSS, images, and other resources that do not require a business server to compute. And “dynamic resources”, as the name implies, is the need for back-end real-time dynamic generation of resources, the more common is JSP, ASP or rely on the server render HTML pages.

What is an “impure static resource”?

It is an HTML page that requires the server to do additional calculations outside of the page. Specifically, before I open a site, the site needs to verify my identity through a number of means, such as permission authentication, to decide whether to present the HTML page to me. The HTML is static in this case, but it is coupled to the operations of the business server, and it is not appropriate for us to dump it on the CDN.

5. Practical application of CDN

Static resources have the characteristics of high access frequency and large incoming traffic, so the loading speed of static resources is always a key indicator of front-end performance. CDN is an important means to speed up static resources. In many front-line Internet companies, “static resources using CDN” is not a suggestion, but a regulation.

7. CDN optimization details

Requests under the same domain name carry cookies indiscriminately, whereas static resources often do not require cookies to carry authentication information. Put static resources and main page under different domain names, perfect to avoid unnecessary cookies!

It may seem like a small detail, but the utility is amazing. Due to the huge flow of static resources of e-commerce websites, if this redundant Cookie is not removed, not only the user experience will be greatly reduced, but also the annual economic cost caused by performance waste will be a very horrible number.