This is the 16th day of my participation in the November Gwen Challenge. Check out the event details: The last Gwen Challenge 2021

Cookie optimization

Early years, due to the browser functionality crude, programmers like to abuse the Cookie to store temporary information (later browser provides LocalStorage/SessionStorage to do it).

What can be done to solve the problem of Cookie size becoming so large that the size of a simple GET request goes from hundreds of bytes to thousands of bytes?

Instead of standardizing Cookie usage, some programmers have figured out how to get around the Cookie problem by using new domain names to make requests. Requests for new domain names do not carry cookies for this domain name.

For example:

  • Cookies under the qq.com domain name are abused, resulting in large volume of all requests on the web page.
  • The programmer moved all CSS, JS and image files to*.qqcdn.comUnder the domain name, there are no cookies under the domain name and the request volume is very small.
  • But all AJAX requests (e.gqq.com/api/v1/users) it’s still so big that programmers look the other way.

A “domain without any cookies” is called a cookie-free domain. CDN generally uses a separate new domain name and therefore belongs to cookie-free domain.

CDN(Content Delivery Network)

CDN is a service dedicated to transferring static files. For example:

  • The server is located in Washington, AND the user is located in Beijing, China, about 10,000 kilometers apart.
  • The speed of light is about 300 million meters per second, and it takes at least 66 milliseconds to make a round trip. And electronic signals are essentially light signals.
  • If the contents of the server are copied to Tianjin, it is only about 100 kilometers away from the user.
  • The speed of light makes the trip back and forth in 0.66 milliseconds!

CDN is based on this idea. It copies the static content of the server to all parts of the world. When a user accesses the DNS dynamically resolves the domain name to the nearest IP address of the example user to obtain the fastest access speed. Take Baidu as an example:

  • index.htmlOn thewww.baidu.comContains three to five cookie items.
  • Pictures ondss0.bdstatic.comThis is a cookie-free domain name.
  • CSS files and JS files are placed inss1.bdstatic.comThis is also the cookie-free domain name.
  • The domain name of the AJAX request orwww.baidu.com, because its cookie items are not many, there is no need to optimize.

Advantages of using CDN:

  1. Use cookie-free domain names to reduce the size of requests.
  2. The use of multiple domain names allows for parallelization of requests and can overcome the number of connections with a single domain name.
  3. By reducing the transmission distance, users can get content more quickly.

Disadvantages of using CDN:

  1. Expensive. Copying content to multiple servers requires the purchase of more machines, bandwidth, hard disks, and so on. Of course, third-party services can also be purchased. Aliyun and Qiniu in China both provide CDN services.
  2. Deployment becomes complex. The deployment tool needs to upload the code to the CDN server after it is packaged.
  3. Less control. If you buy a third party CDN service, if something goes wrong, you have to wait for someone else to fix it.
  4. Cross domain problems. For example, Canvas cannot read cross-domain image files.window.onerrorUnable to catch error messages in cross-domain JS files, this all needs to be resolved with CORS response headers.

But in general, the advantages of using CDN outweigh the disadvantages.

One last word

If this article is helpful to you, or inspired, help pay attention to it, your support is the biggest motivation I insist on writing, thank you for your support.