作者TonyQ (沉默是金。)
看板Web_Design
標題Re: [問題] 使用Google Libraries API 讀取所需的j …
時間Sun Oct 3 03:39:41 2010
※ 引述《no1kk (心中在下雨)》之銘言：
: 使用 Google Libraries API 讀取所需要的 javascript 檔案
: 會比在 head include 進來還要更消耗網頁效能嗎?
: 假設
: <html>
: <head>
: <script type="text/javascript"
: src="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
→ grence:同時間對一個 domain的連線數有上線.request也許會造成誤解 10/03 18:52
很棒的建議，修改好了。:D
※ 編輯: TonyQ 來自: 111.82.21.118 (10/03 23:15)
推 no1kk:感謝你的詳細回應!! 有些事情我並沒有想得很清楚 10/05 14:30
→ no1kk:我應該要先搞清楚自己想要的是什麼，再去考慮方法!! 10/05 14:31
→ TonyQ:yep 開發通常都是需求、任務導向的東西。:) 10/05 14:33
推 no1kk:在這裡可以學到很多東西!! 10/05 14:33
修錯字～
※ 編輯: TonyQ 來自: 220.133.44.37 (10/05 14:39)