國內(nèi)網(wǎng)非常多的網(wǎng)站都使用免費(fèi)的 Google CDN 服務(wù)來加載某些 js、字體樣式庫以提升網(wǎng)頁瀏覽體驗(yàn)，例如 jQuery、Google Fonts。但是目前 Google 的大多數(shù)網(wǎng)站在大陸無法正常訪問，因此這些本身是加快網(wǎng)頁載入的庫反而成為了阻塞網(wǎng)站加載的原因。這種情況國內(nèi)的網(wǎng)站并不多，但是國外的網(wǎng)站卻非常多地使用這些庫。一般地，當(dāng) Google CDN 庫稱為網(wǎng)頁加載的限制因素時(shí)，瀏覽器狀態(tài)條會(huì)顯示狀態(tài)為 “正在等待 ajax.googleapis.com 的響應(yīng)...” 或 “正在連接...” 等字樣。

如果打開控制臺(tái)，能看見 Google CDN 確實(shí)正在阻塞網(wǎng)頁加載。如果等待足夠長的時(shí)間，瀏覽器最終會(huì)放棄加載，并呈現(xiàn)一個(gè)殘缺的網(wǎng)頁，這并不好。下面從網(wǎng)頁開發(fā)者、瀏覽器用戶的角度給出一些解決方案。
對(duì)于網(wǎng)頁開發(fā)者：選用其它 CDN 庫

網(wǎng)頁開發(fā)者必須考慮到這個(gè)問題，因此在設(shè)計(jì)網(wǎng)站時(shí)就應(yīng)該考慮棄用 Google CDN 庫。如果訪者大多來自國內(nèi)，可以考慮使用百度 CDN、新浪 CDN 庫，它們都包含了非常常用的 JS 庫文件。如果有面向國際的訪客，則可以考慮使用微軟的 ASP.NET CDN。

例如以下是使用微軟 CDN 加載 jQuery 的一個(gè)范例：

如果要使用 Google Fonts，則可以使用 360 提供的代理 CDN。這樣一來，即時(shí)要使用 Google Fonts 網(wǎng)頁字體，網(wǎng)頁的速度也不會(huì)受到干擾和阻塞。

修改 hosts

對(duì)于用戶，我們無法直接令瀏覽的網(wǎng)頁棄用其正在使用的 Google CDN，從而出現(xiàn)無法加載的情況，那應(yīng)該怎么辦呢？解決方案之一就是修改 hosts。通過修改 hosts，強(qiáng)迫 CDN 域名指向指定的 IP，得以成功從 Google 加載這些文件。

值的一提的是，有一部分 Google CDN，例如 fonts.googleapis.com、fonts.gstatic.com，它們可以被解析到首都的 IP 地址，因此如果在 DNS 解析失效的情況下，通過 hosts 將這些域名直接指向首都的 IP 是最好、最快速的。

當(dāng)然，如果 Google 改變心意，首都的服務(wù)器拒絕提供這些域名的緩存服務(wù)的話，就沒有辦法了。至于為什么 Google 不索性把所有的 CDN 都解析到首都，也沒人清楚。

修改 hosts 并不一定是好方法，因?yàn)樗俣瓤赡軙?huì)比較緩慢，另 hosts 可能失效。

使用 Chrome 擴(kuò)展主動(dòng)替換為國內(nèi) CDN

國內(nèi)的一些服務(wù)器通過鏡像或同步拷貝等一些方法能保留一份與 Google CDN 同樣的文件專供國內(nèi)用戶加載。我們可以使用一款名叫 Replace Google CDN 的 Chrome 擴(kuò)展插件，來主動(dòng)替換瀏覽的網(wǎng)頁里的 Google CDN 為國內(nèi)的替代服務(wù)器。

這款插件作者為 @justjavac，Github 項(xiàng)目地址為 github.com/justjavac/ReplaceGoogleCDN，擴(kuò)展地址為 https://chrome.google.com/webstore/detail/replace-google-cdn/kpampjmfiopfpkkepbllemkibefkiice。當(dāng)然你可能需要先使用一些技巧來打開這個(gè)應(yīng)用商店才能安裝。

擴(kuò)展插件支持替換 Google CDN 為中國科技大學(xué)提供的 CDN，支持 ajax/fonts.googleapis.com、themes.googleusercontent.com 的替換，并且支持 HTTPS。在這里要感謝他們。

安裝好這款插件后，瀏覽任何帶有 Google CDN 的網(wǎng)頁時(shí)都會(huì)被跳轉(zhuǎn)到這個(gè)節(jié)點(diǎn)，這樣就不會(huì)出現(xiàn)阻塞的情況了。

最新評(píng)論