googleapis為大家提供了jquery庫文件、fonts字體文件的直接引用,由于google使用cdn技術(shù),在很多地方都有節(jié)點高速緩存這些文件,這就提高了文件的加載速度,另一方面,也減少了網(wǎng)站的資源消耗,節(jié)省了服務(wù)器帶寬,所以大家都喜歡這樣的文件引用方式。
不多,對于國內(nèi)網(wǎng)站來說,引用googleapis的文件,無疑是一種災(zāi)害。
引用googleapis的文件大大拖慢網(wǎng)頁速度
為了說明這個問題,我做了兩個demo網(wǎng)頁,網(wǎng)頁里都調(diào)用jquery文件,其中一個引用googleapis的文件,另一個使用站內(nèi)文件。
網(wǎng)頁加載時間使用js計算。
結(jié)果顯示是,引用googleapis的文件在20秒內(nèi)未能加載成功而被瀏覽器放棄加載,而另一個引用站內(nèi)的文件則是秒開了。
圖一:demo-jquery引用googleapis的文件
圖二:demo-jquery引用站內(nèi)文件
引用googleapis的文件加載失敗
從上兩圖可以看到,圖一顯示“文件加載失敗”,而圖二顯示“文件加載成功”。測試方法是在網(wǎng)頁后面執(zhí)行一段jquery代碼,看成功與否,如下:
<div id="div3" ><font color=red>文件加載失敗</font></div>
<script type=text/javascript>
setTimeout(function(){
$("#div3").html("<font color=red>文件加載成功</font>");
},5000);
</script>
結(jié)果,在IE瀏覽器里,可以看到狀態(tài)欄出現(xiàn)警告圖標(biāo),點開看到錯誤提示是:缺少對象。
圖三:引用googleapis的文件加載失敗
解決辦法
解決的辦法就是把引用googleapis的文件下載到站內(nèi)文件夾里,然后通過站內(nèi)引用。
這樣雖然犧牲了點服務(wù)器資源和帶寬,但總比20秒都加載不了好,再者,如果網(wǎng)站仍然引用googleapis的jquery文件,那么網(wǎng)站的jquery程序?qū)o法執(zhí)行,如果引用googleapis的fonts字體庫文件,那么網(wǎng)頁里設(shè)置的字體可能會不起作用。
因此,去掉googleapis的文件引用就成了必然的事。
經(jīng)驗:少用google的東西
對于google的東西,對于國內(nèi)網(wǎng)站來說,能少用則少用,不用最好,否則將嚴(yán)重影響網(wǎng)頁的加載,如之前分析過的Google AdSense廣告嚴(yán)重影響網(wǎng)頁加載速度。對于adsense廣告,建議換成百度或其他聯(lián)盟,至少,你應(yīng)該不能讓adsense廣告成為網(wǎng)站的主要廣告而大量使用。