Optimize Website Design (2): Use CDN

ArticleDirectory

• Microsoft CDN service
• Google CDN service

Preface

The optimization of website design is a big topic. There are some general principles and some suggestions for different development platforms. This research has never been stopped, and I have shared this topic on different occasions.

As a general principle, Yahoo's team of engineers once provided 35 best practices. For this list, see

Best practices for speeding up your web site http://developer.yahoo.com/performance/rules.html

At the same time, they also released a corresponding test tool yslow http://developer.yahoo.com/yslow/

I strongly recommend that all website developers learn these best practices and apply them based on their actual projects.

In the next period, I will combine ASP. NET development platform, aiming at these Principles, provides some explanations and interpretations in the form of a series of articles to help you better understand these principles and use them better.

Preparations

Prepare the following development environment and tools to follow me for subsequent learning.

1. Google Chrome or Firefox, and install the yslow extension component. Please note that this component is provided by Yahoo, but there is no version for IE currently.
   1. Https://chrome.google.com/webstore/detail/yslow/ninejjcohidippngpapiilnmkgllmakh
   2. Https://addons.mozilla.org/en-US/firefox/addon/yslow/
   3. You should have some knowledge about the developer tools of these browsers. You can call up this tool by pressing F12.
2. VISAUL studio 2010 SP1 or later, Visual Studio 2012 is recommended
   1. Http://www.microsoft.com/visualstudio/eng/downloads
3. You need to have a good understanding of the basic development process and core technologies of ASP. NET. This series of articles is difficult to popularize basic knowledge.

The topic to be discussed in this article

This article, I will discuss with you the problem of CDN, this is the second principle, the related concepts can refer to here http://developer.yahoo.com/performance/rules.html#cdn

I will introduce this topic from several aspects:

1. What is CDN?

CDN stands for content delivery network. It mainly refers to the network that delivers some content. For website development, the content we are talking about usually refers to content files (such as JavaScript, CSS, images, etc.), that is, the content of CDN here refers, establish (or use) a network that is more conducive to delivery of such content.

2. Why CDN?

We must admit that there was no CDN concept or requirement in the early days. At that time, the JavaScript and other files required for our website were stored in the directory of our website. In fact, this is also a method of content delivery, and it is often relatively efficient. But one day, we made a variety of websites, and we will find another problem: for the same Javascript file, the browser may cache multiple versions, as shown below:

This is because the browser caches content resources based on the domain. As long as the domain is different, the browser needs to repeatedly download these resources, and cache them in the same way.

However, this may cause some minor problems:Repeat the download, cache these same script files requires bandwidth and local cache file space.

As a result, people come up with a solution: Since browsers distinguish these content resources based on the domain, can these content be put in a unified domain? In this way, even if we have many websites, we can use the same address to reference these content resources, so there will be no repeated download and cache problems.

 

3. How to Use CDN

The key to many problems is to think about it. As long as you think about it, it is not difficult to do it next time. This is like the CDN issue we are currently discussing.

We can continue to analyze the homepage of the blog Park as an example.

Today, we know that there are many sites in the blog Park, such as www.cnblogs.com, news.cnblogs.com, and q.cnblogs.com. They should use jquery as a general library more or less. So how does the blog garden work?

I found that they made a so-called public sub-site: common.cnblogs.com, which stores the final jquery version they used.

In fact, this is the most direct and simplest way to use CDN: If you have many websites, they can share some content (such as JavaScript, CSS, image, and so on ), therefore, it is better to store each site in a uniform place, which can reduce the number of downloads and the size of the cache.

The advantage of doing so is that because mainstream browsers limit the number of connections allowed for the same domain (refer to the http://www.impng.com/web-dev/browser-max-parallel-connections.html Introduction ), the HTTP 1.1 protocol even explicitly recommends limiting the number of connections to 2 (clients that use persistent connections shocould limit the number of simultaneous connections that they maintain to a given server.A single-user client shocould not maintain more than 2 connections with any server or proxy.A proxy shocould use up to 2 * n connections to another server or proxy, where N is the number of simultaneously active users. These guidelines are intended to improve HTTP response times and avoid congestion ). Then, we adopt CDN to place some content in different domains, which can increase the parallel download degree in a certain sense. For this principle, you can also refer to the http://developer.yahoo.com/performance/rules.html#split

 

In addition to the above practices (you can create a separate site to store these content resources), if you are creating an Internet application, you can also enjoy the CDN services provided by some well-known vendors in the industry. They put many of the most commonly used JavaScript libraries in a unified location (usually their servers are very fast ), it can be used free of charge by website developers all over the world. The advantage of doing so is to expand the sharing scope. For example, if you want to access cnblogs.com, it uses the jquery library, you may have downloaded it when you access Microsoft.com, so you do not need to download it for the first time.

The following vendors provide CDN services:

Microsoft CDN service

Http://www.asp.net/ajaxlibrary/cdn.ashx

Google CDN service

Https://developers.google.com/speed/libraries/devguide

The service you choose depends on your preferences. In fact, their usage is very similar, such

 
<SCRIPT src =Http://ajax.aspnetcdn.com/ajax/jQuery/jquery-2.0.0.min.js"Type ="Text/JavaScript"> </SCRIPT>
 

 

In addition, I mentioned in the previous article that to reduce the number of requests, we can use bundle to package and Merge multiple files. If we want to use CDN for a file, how should we improve it? See the followingCode

Config. usecdn =True; Config. Add (NewScriptbundle ("~ /Jquery",Http://ajax.aspnetcdn.com/ajax/jQuery/jquery-2.0.0.min.js"). Include ("~ /Scripts/jquery-2.0.0.min.js"));
 

Note that CDN is used only when debug of compilation is set to false in the web. config file. Otherwise, local files are used. This is why we need to define two paths.

 
<Compilation Debug= "False" Targetframework= "4.5"/>
 

 

It looks good, isn't it? However, the use of CDN also has some additional considerations for negative effects.

 

4. Negative Effects of using CDN

When using CDN, especially third-party CDN, you need to consider the network accessibility. Since the content is host on someone else's server, in a sense, it is not very controllable. For example, I did not use the CDN address provided by Google for a well-known reason.

In addition, using CDN involves multiple domains, which violates the following two principles:

Minimize HTTP requests (which I described in detail in the previous article)

Http://developer.yahoo.com/performance/rules.html#num_http

Reduce DNS lookups (coming soon)

Http://developer.yahoo.com/performance/rules.html#dns_lookups

 

Are you surprised? Why are these principles (also called best practices) self-contradictory? In fact, it is not surprising that the world is originally a dialectical unity. These contradictions exist objectively. What we need to do is to consider their advantages and disadvantages and make a trade-off. What do you mean