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

如果打開(kāi)控制臺,能看見(jiàn) Google CDN 確實(shí)正在阻塞網(wǎng)頁(yè)加載。如果等待足夠長(cháng)的時(shí)間,瀏覽器最終會(huì )放棄加載,并呈現一個(gè)殘缺的網(wǎng)頁(yè),這并不好。下面從網(wǎng)頁(yè)開(kāi)發(fā)者、瀏覽器用戶(hù)的角度給出一些解決方案。
對于網(wǎng)頁(yè)開(kāi)發(fā)者:選用其它 CDN 庫
網(wǎng)頁(yè)開(kāi)發(fā)者必須考慮到這個(gè)問(wèn)題,因此在設計網(wǎng)站時(shí)就應該考慮棄用 Google CDN 庫。如果訪(fǎng)者大多來(lái)自國內,可以考慮使用百度 CDN、新浪 CDN 庫,它們都包含了非常常用的 JS 庫文件。如果有面向國際的訪(fǎng)客,則可以考慮使用微軟的 ASP.NET CDN。
例如以下是使用微軟 CDN 加載 jQuery 的一個(gè)范例:
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.2.min.js" type="text/javascript"></script>
如果要使用 Google Fonts,則可以使用 360 提供的代理 CDN。這樣一來(lái),即時(shí)要使用 Google Fonts 網(wǎng)頁(yè)字體,網(wǎng)頁(yè)的速度也不會(huì )受到干擾和阻塞。
修改 hosts
對于用戶(hù),我們無(wú)法直接令瀏覽的網(wǎng)頁(yè)棄用其正在使用的 Google CDN,從而出現無(wú)法加載的情況,那應該怎么辦呢?解決方案之一就是修改 hosts。通過(guò)修改 hosts,強迫 CDN 域名指向指定的 IP,得以成功從 Google 加載這些文件。
值的一提的是,有一部分 Google CDN,例如 fonts.googleapis.com、fonts.gstatic.com,它們可以被解析到首都的 IP 地址,因此如果在 DNS 解析失效的情況下,通過(guò) hosts 將這些域名直接指向首都的 IP 是最好、最快速的。
當然,如果 Google 改變心意,首都的服務(wù)器拒絕提供這些域名的緩存服務(wù)的話(huà),就沒(méi)有辦法了。至于為什么 Google 不索性把所有的 CDN 都解析到首都,也沒(méi)人清楚。

修改 hosts 并不一定是好方法,因為速度可能會(huì )比較緩慢,另 hosts 可能失效。
使用 Chrome 擴展主動(dòng)替換為國內 CDN
國內的一些服務(wù)器通過(guò)鏡像或同步拷貝等一些方法能保留一份與 Google CDN 同樣的文件專(zhuān)供國內用戶(hù)加載。我們可以使用一款名叫 Replace Google CDN 的 Chrome 擴展插件,來(lái)主動(dòng)替換瀏覽的網(wǎng)頁(yè)里的 Google CDN 為國內的替代服務(wù)器。
這款插件作者為 @justjavac,Github 項目地址為github.com/justjavac/ReplaceGoogleCDN,擴展地址為https://chrome.google.com/webstore/detail/replace-google-cdn/kpampjmfiopfpkkepbllemkibefkiice。當然你可能需要先使用一些技巧來(lái)打開(kāi)這個(gè)應用商店才能安裝。
擴展插件支持替換 Google CDN 為中國科技大學(xué)提供的 CDN,支持ajax/fonts.googleapis.com、themes.googleusercontent.com 的替換,并且支持 HTTPS。在這里要感謝他們。

安裝好這款插件后,瀏覽任何帶有 Google CDN 的網(wǎng)頁(yè)時(shí)都會(huì )被跳轉到這個(gè)節點(diǎn),這樣就不會(huì )出現阻塞的情況了。
聯(lián)系客服