引用CDN內(nèi)容的方法總結(jié)

CDN相信大家都聽說過，甚至使用過相關(guān)的技術(shù)，也許有些人會回答“沒有聽說過和使用過該技術(shù)”，真的是這樣嗎？...

1.1.1 摘要

CDN相信大家都聽說過，甚至使用過相關(guān)的技術(shù)，也許有些人會回答“沒有聽說過和使用過該技術(shù)”，真的是這樣嗎？

CDN的全稱是Content Delivery Network，即內(nèi)容分發(fā)網(wǎng)絡(luò)。其目的是通過在現(xiàn)有的Internet中增加一層新的網(wǎng)絡(luò)架構(gòu)，將網(wǎng)站的內(nèi)容發(fā)布到最接近用戶的網(wǎng)絡(luò)"邊緣"，使用戶可以就近取得所需的內(nèi)容，解決 Internet網(wǎng)絡(luò)擁擠的狀況，提高用戶訪問網(wǎng)站的響應(yīng)速度。

看完上面一大串的定義，我們可以把CDN簡單的描述為：內(nèi)容分發(fā)，解決網(wǎng)絡(luò)擁擠和提供網(wǎng)站相應(yīng)速度。

其實，CDN并不神秘甚至我們在日常開發(fā)過程中常常使用到該技術(shù)，例如：引用網(wǎng)絡(luò)腳本庫（如：jQuery）和網(wǎng)絡(luò)圖片資源等。

我們經(jīng)常發(fā)現(xiàn)許多網(wǎng)站都從Google的CDN中引用相應(yīng)的Javascript庫，但很多網(wǎng)站都沒有考慮如果CDN內(nèi)容加載失敗的情況，我們并不是說Google的CDN很脆弱，只是不怕萬一只怕一萬。

在接下來的博文中，我們將想大家介紹防范CDN內(nèi)容加載的方法。

1.1.2 正文

基本方法

檢查CDN內(nèi)容是否加載成功的基本的方法，我們可以在腳本代碼后添加代碼判斷該類型或變量是否存在，如果不存證明CDN加載失敗，那么我們的程序就應(yīng)該加載本地腳本，下面我們以加載jQuery庫為例，具體實現(xiàn)如下：

<!-- Adds google cdn reference -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>

<!-- Cdn fail refers to local library -->
<script type="text/javascript">
    if (typeof jQuery == 'undefined') {
        document.write(unescape("%3Cscript src='js/jquery-2.0.0.min.js' type='text/javascript'%3E%3C/script%3E"));
    }
</script>

上面，我們引用了Google CDN的jQuery庫，接著我們在腳本代碼后添加了一個if語句來判斷jQuery庫是否加載成功，如果沒有加載成功我們動態(tài)加載本地jQuery庫。

其中，我們在document.write方法中直接使用了URL編碼，把“<”編碼為“%3C”，接著我們再使用unescape()方法把字符串還原過來。

圖1字符編碼

上圖，我們通過unescape()方法把字符串轉(zhuǎn)換回來，我們可以看到輸出是一個正常的腳本引用代碼。

現(xiàn)在，我們有一個疑問就是“為什么不使用常規(guī)字符，而是要使用字符編碼呢？”，其實這是有原因的，這意味著我們代碼將可以在XML、XHTML或HTML中正常運行，而無需把代碼包含在CDATA中（具體請參考這里）。

HTML5 Boilerplate中的解決方法

接下來，我們將介紹使用“協(xié)議省略”的引用地址和簡化本地加載代碼，在介紹之前，首先讓我們了解使用“協(xié)議省略”的引用地址的優(yōu)點。

我們知道使用安全的引用地址對于確保信息安全是無可厚非的，但過度地使用SSL緩存靜態(tài)資源例如：jQuery庫，也會導(dǎo)致加載的性能降低；出于同樣的原因瀏覽器需要對這些資源進(jìn)行加密，而且大多數(shù)瀏覽器默認(rèn)不緩存通過SSL方式獲取的文件。

更糟糕的是，即使用戶已經(jīng)有一個本地緩存副本在磁盤上，但通過HTTP請求從Google的CDN獲取jQuery文件，不能被同一請求不同協(xié)議HTTPS使用，也就是說，對于同一請求不同協(xié)議要保存兩個緩存文件。

Http請求的URL地址：

http://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js

下面是使用Https請求的URL地址：

https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js

當(dāng)我們在常規(guī)的Http頁面中通過Https方式來引用Google CDN的jQuery庫將導(dǎo)致緩存性能下降，我們應(yīng)該盡量避免在Http頁面中引用不必要的Https內(nèi)容。

在RFC3986中的第4.2節(jié)規(guī)定合法的URL省略了協(xié)議（Http或Http）還是合法的，當(dāng)一個URL的協(xié)議被省略時，瀏覽器將使用基本的文檔的協(xié)議，通過這種方式，我們可以更加靈活地指定URL地址。所以我們可以通過以下的方式引用jQuery庫。

<!-- Adds protocol-less google cdn reference -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>

上面的代碼看起來奇怪，但“協(xié)議省略”的網(wǎng)址是引用第三方內(nèi)容的最好的方式，它可以通過Http或Https引用。

當(dāng)頁面加載時，對于非加密請求腳本會通過Http方式引用并且緩存起來，以此同時對于加密請求腳本會根據(jù)“協(xié)議省略”方式使用Https引用內(nèi)容，所以使用“協(xié)議省略”的URL允許單個腳本更靈活地引用內(nèi)容。

接下來，我們繼續(xù)簡化加載本地腳本的代碼，當(dāng)jQuery成功加載到頁面中，它會創(chuàng)建一個全局的jQuery變量，我們可以通過window的jQuery屬性（window.jQuery）訪問該變量的值，如果jQuery沒有加載成功，那么window.jQuery就是未定義的。

所以，我們可以把代碼簡化成如下：

<!-- Adds protocol-less google cdn reference -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<!--<script src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-2.0.0.min.js"></script>-->
<script>window.jQuery || document.write('<script src="js/jquery-2.0.0.min.js">\x3C/script>')</script>

上面，我們使用了“||”運算符判斷window.jQuery是否為未定義類型，如果window.jQuery未定義執(zhí)行后面的代碼加載本地jQuery腳本，HTML5 Boilerplate就使用以上的方法處理CDN內(nèi)容加載失敗的情況。

Javascript加載器

有些人使用JavaScript加載器如：yepnope，它是一個能夠根據(jù)輸入條件來選擇性異步加載資源文件的js腳本，可以在頁面上僅加載用戶需要的js或css，下面我們以加載jQuery為例子介紹yepnope的使用，具體實現(xiàn)如下：

yepnope([{
    load: 'http://ajax.aspnetcdn.com/ajax/jquery/jquery-2.0.0.min.js',
    complete: function () {
        if (!window.jQuery) {
            yepnope('js/jquery-2.0.0.min.js');
        }
    }
}]);

上面，我們使用加載器yepnope把jQuery加載到頁面中，接下來，我們介紹使用RequireJS加載jQuery，具體實現(xiàn)如下：

// Uses requestJS to add cdn reference.    
requirejs.config({
    enforceDefine: true,
    paths: {
        jquery: [
            '//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js',
            //If the CDN location fails, load from this location
            'js/jquery-2.0.0.min'
        ]
    }
});
//Later
require(['jquery'], function($) {
    // Your code here.
});

我們可以RequireJS加載器中使用“協(xié)議省略”的URL地址，這樣我們可以避免前面提到的加密協(xié)議和非加密協(xié)議加密和緩存問題了。

雖然，JS加載器也可以解決CDN內(nèi)容加載失敗的問題，但僅僅為了防止CDN內(nèi)容加載失敗問題而引入yepnope或RequireJS是沒有必要的。

ASP.NET Web Form 4.5

對于每個ASP.NET Web窗體開發(fā)人員，我們需要了解在ASP.NET 4.5增加的新特性，其中就包含了處理CDN內(nèi)容加載失敗轉(zhuǎn)移加載本地內(nèi)容的特性。

首先，我們在頁面中添加ScriptManager控件，然后設(shè)置該控制的EnableCdn屬性為“True”，接著我們添加需要加載的內(nèi)容名稱，下面以加載jQuery為例：

<!-- Set up cdn -->       
<asp:ScriptManager runat="server" EnableCdn="true">
    <Scripts>
        <asp:ScriptReference Name="jquery" />
    </Scripts>
</asp:ScriptManager>

上面，我們通過ScriptManager控件指定加載jQuery庫，但這里我們有一個疑問首先是我們沒有指定加載jQuery庫的URL地址，第二在加載失敗后，沒有指定本地jQuery庫路徑。

現(xiàn)在，我們通過運行頁面代碼查看ScriptManager生成的腳步代碼，具體代碼如下：

<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.2.js" type="text/javascript"></script>
<script type="text/javascript">
    //<![CDATA[
    (window.jQuery) || document.write('<script type="text/javascript" src="Scripts/jquery-1.8.2.js"><\/script>'); //]]>
</script>

通過上面的代碼，我們發(fā)現(xiàn)ScriptManager默認(rèn)加載jQuery庫的URL是http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.2.js，而且一旦加載失敗它自動到Scripts文件中加載本地腳步。

雖然這種方式簡單而且省心，但它默認(rèn)是到微軟的CDN中加載內(nèi)容的，如果我們想使用Google的CDN呢？難道微軟打算CDN也搞壟斷嗎？還有我們想使用jQuery 2.0.0庫應(yīng)該如何加載呢？

其實，我們可以通過自定義ScriptResourceMapping方式來指定加載的CDN和jQuery庫，我們要在Global.asax 文件中添加以下代碼：

var mapping = ScriptManager.ScriptResourceMapping;
// Map jquery definition to the Google CDN
mapping.AddDefinition("jquery", new ScriptResourceDefinition
{
    Path = "~/Scripts/jquery-2.0.0.min.js",
    DebugPath = "~/Scripts/jquery-2.0.0.js",
    CdnPath = "http://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js",
    CdnDebugPath = "https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.js",
    CdnSupportsSecureConnection = true,
    LoadSuccessExpression = "window.jQuery"
});

上面，我們定義了加載Google的CDN和jQuery 2.0.0版本，接下來我們重新運行頁面代碼查看ScriptManager生成的腳步代碼是否對應(yīng)我們的設(shè)置。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.js" type="text/javascript"></script>
<script type="text/javascript">
    //<![CDATA[
    (window.jQuery) || document.write('<script type="text/javascript" src="Scripts/jquery-2.0.0.js"><\/script>'); //]]>
</script>

現(xiàn)在，我們看到使用的是Google的CDN，并且加載jQuery的版本為2.0.0的。

AspNet.ScriptManager.jQuery包

在ASP.NET4.5中，如果我們想使用jQuery 2.0.0或更新的版本，其實我們可以通過使用AspNet.ScriptManager.jQuery包來管理引用庫的更新，其中它也包括配置CDN信息的功能，如果我們要獲取最新的更新，首先我們選擇工具->擴(kuò)展工具管理器->AspNet.ScriptManager.jQuery，然后更新包就可以獲取最新的jQuery庫。

圖2 AspNet.ScriptManager.jQuery包

ASP.NET Web Optimization包

如果我們使用的是ASP.NET MVC程序，同樣我們可以通過更新ASP.NET Web Optimization包來管理CDN配置信息。

圖3 ASP.NET Web Optimization包

接下來，我們在的BundleConfig中指定我們的CdnPath的URL地址，打開App_Start\BundleConfig.cs，我們可以看到里面有一個RegisterBundles()方法，下面是RegisterBundles()方法的一部分代碼：

/// <summary>
/// Sets up the jquery libs load path.
/// </summary>
/// <param name="bundles"></param>
public static void RegisterBundles(BundleCollection bundles)
{
    bundles.UseCdn = true;
    BundleTable.EnableOptimizations = true; //force optimization while debugging

    var jquery = new ScriptBundle("~/bundles/jquery", "http://ajax.aspnetcdn.com/ajax/jquery/jquery-2.0.0.min.js").Include(
            "~/Scripts/jquery-{version}.js");
    jquery.CdnFallbackExpression = "window.jQuery";
    bundles.Add(jquery);
    //...
}

1.1.3 總結(jié)

在本文中，我們向大家介紹了一些CDN內(nèi)容引用失敗的處理機制，就處理方式來說，我覺得HTML5 Boilerplate的解決方法不但簡潔，而且不用引入第三方庫。

同時我們也介紹了使用“協(xié)議省略”的CDN的優(yōu)點，但有一點我們要注意的，如果我們在本地運行使用“協(xié)議省略”的URL可能不會得到如預(yù)期運行效果，由于我們在本地運行頁面“協(xié)議省略”使用的基礎(chǔ)協(xié)議是file，而不是http或https，所以一般來說我們在本地直接運行頁面是無法正確獲取到CDN的內(nèi)容，我們可以把頁面放到本地Web服務(wù)器中運行，如Apache或IIS中，然后運行http://localhost的地址就可以加載成功了。

參考

http://www.hanselman.com/blog/CDNsFailButYourScriptsDontHaveToFallbackFromCDNToLocalJQuery.aspx
http://encosia.com/cripple-the-google-cdns-caching-with-a-single-character/
https://developers.google.com/speed/libraries/devguide

posted @ 2013-05-31 20:43 JK_Rush 閱讀(27164) 評論(5) 收藏舉報

刷新頁面返回頂部