Re: [問題] 使用Google Libraries API 讀取所需的j …

看板Web_Design作者TonyQ (沉默是金。)時間15年前 (2010/10/03 03:39)推噓2(2推 0噓 3→)

留言5則, 3人參與討論串1/1

※ 引述《no1kk (心中在下雨)》之銘言： : 使用 Google Libraries API 讀取所需要的 javascript 檔案 : 會比在 head include 進來還要更消耗網頁效能嗎? : 假設 : <html> : <head> : <script type="text/javascript" : src="" rel="nofollow">http://www.google.com/jsapi?key=INSERT-YOUR-KEY"></script> : <script type="text/javascript"> : google.load("dojo", "1.5"); : google.load("ext-core", "3.1.0"); : google.load("jquery", "1.4.2"); : google.load("jqueryui", "1.8.5"); : google.load("mootools", "1.2.4"); : google.load("prototype", "1.6.1.0"); : google.load("scriptaculous", "1.8.3"); : google.load("swfobject", "2.2"); : google.load("yui", "2.8.1"); : google.load("webfont", "1.0.11"); : </script> : </head> : <body> : </body> : </html> : 比較以下 : <html> : <head> : <script type="text/javascript" src="/js/dojo.js"></script> : <script type="text/javascript" src="/js/ext-core.js"></script> : <script type="text/javascript" src="/js/jquery.js"></script> : <script type="text/javascript" src="/js/jqueryui.js"></script> : <script type="text/javascript" src="/js/mootools.js"></script> : <script type="text/javascript" src="/js/prototype.js"></script> : <script type="text/javascript" src="/js/scriptaculous.js"></script> : <script type="text/javascript" src="/js/swfobject.js"></script> : <script type="text/javascript" src="/js/yui.js"></script> : <script type="text/javascript" src="/js/webfont.js"></script> : </head> : <body> : </body> : </html> : 因為有同事說，使用 google.load 的效能會比較差 : 但是以物件導向的想法來看 : google.load 似乎會比較適合，每個功能可以自己去取用所需要的js : 不知道各位認為怎樣的方式較佳呢? 這其實要看你的開發環境，如果你單純就只想拉一個jQuery 或 jQuery ui，或xxx lib來用，那當然是直接拉 js 比較快。另外雖然你應該知道，不過你沒明確寫出來，所以我還是提一下， google lib 並不只有提供 google.load 的作法，也有提供各 lib js 的 cdn 服務。比方說 jQuery http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js 其他 lib 網址詳情參考 http://code.google.com/intl/zh-TW/apis/libraries/devguide.html 另外不管是 google.load 或直接拉 google cdn 的js，都有一個隱性的好處是 browser 對同一個 domain 的連線數有上限，拉到 google domain 代表著你的網站其他的資源的存取又多一點空間。 ----------------------------------------------------- 再拉回來我們主題，你的這個問題，基本上應該先討論有沒有可能把script 放到 </body>前載入。因為這對效能的影響比較大。你必須載入一堆 script 檔，然後 browser 才會接著去作內容的呈現，但絕大多數時候先載入的js檔完全沒有要先優先畫面處理的理由。 ----------------------------------------------------- 再拉回來一點 google.load 跟直接拉 js的比較。基本上 google.load 先天會比較弱勢，是因為他必須浪費一個連線數去拉 google js api ，還要在浪費一個 script tag 去作載入的動作，我想這應該是你同事認為用他會變慢得理由。在這點上我持跟你同事同樣的立場，但有一個例外。如果你無法在一開始就決定你那個頁面究竟會用到哪些 lib，會需要動態視需要調用不同的 lib 的載入，這時候用 js api 會比較好。（但是以 google js 提供的 api 幾乎都是有一定規模的，同一個頁面中要出現兩種是還好，就像jQuery+jQueryui ，但要出現到三種以上，我很難想像，還不如一開始先拉好。）基本上我沒有碰過這個例外，這只是從邏輯上推論出來的。另外物件導向的重點並不在這裡，不要因為他看起來有點 oo 的感覺就覺得似乎應該這樣... 特別是在 js 的世界，因為 performance 才是重點。 js 可以從他原型的 prototype language 中玩出一些很活的東西，要玩像 OO 的東西也不是什麼問題，甚至很多事情它可以做的很好。（像這精美的 jQuery context 就是個很棒的例子）但在你討論的這個問題上，我不覺得有提到物件導向的理由與意義。感覺你提到他的目的是想以js 函式調用 script ，那可以看看 using.js 。 http://0rz.tw/ixxOF -- 網頁上拉近距離的幫手實現 GMail豐富應用的功臣數也數不清的友善使用者體驗這就是ｊａｖａｓｃｒｉｐｔ歡迎同好到 AJAX 板一同討論。 -- ※ 發信站: 批踢踢實業坊(ptt.cc) ◆ From: 111.82.21.118