jQuery是一款非常優秀的JavaScript框架,關于它的更多介紹請點這里。今天小編整理了些提高jQuery效率的小技巧發給大家,希望對各位朋友有所幫助。
1. 從Google Code加載jQuery
Google Code上已經托管了多種JavaScript類庫,從Google Code上加載jQuery比直接從你的服務器加載更有優勢。它節省了你服務器上的帶寬,能夠很快的從Google的內容分布網絡(CDN)上加載JS類庫。更重要的是,如果用戶訪問那些發布在Google Code上的站點后它會被緩存下來。
這樣做很有意義。有多少站點使用了沒有被緩存的相同jQuery副本,而這些很容易做到:
<script src="<SPAN><A href="http://www.google.com/jsapi">http://www.google.com/jsapi</A>"></script>
<script type="text/javascript">
// Load jQuery
google.load("jquery", "1.2.6");
google.setOnLoadCallback(function() {
// Your code goes here.
});
</script>
<script src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
// Load jQuery
google.load("jquery", "1.2.6");
google.setOnLoadCallback(function() {
// Your code goes here.
});
</script>
或者,你能夠直接引用JS:
script src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js" type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js" type="text/javascript"></script>
這里有詳細的用法說明
2. 使用備忘單
不僅僅是jQuery,很多編程語言也有類似的備忘單,在一張A4的紙上就可以很容易看到每個函數的用法。幸運的是已經有好心的家伙把jQuery的備忘單做得很完善了:
http://www.gscottolson.com/weblog/2008/01/11/jquery-cheat-sheet/
http://colorcharge.com/jquery/
【譯注】
jQuery 1.3 Cheat Sheet
3. 整合所有的腳本并縮減它們
不錯,這是JavaScript的一個常見技巧??墒且粋€使用了jQuery的大項目可能使用了很多相關的jQuery插件(本站就使用了easing,localScroll,lightbox,preload),因此它通常是適用的。瀏覽器不能同時加載JS腳本(大多數情況下),這意味著如果你同一時間加載很多腳本的話,將減緩頁面的加載速度。因此,如果每個頁面都要加載這些腳本,你應該考慮在發布之前將這些腳本整合成一個稍大的JS腳本。一些jQuery插件已經最小化了,但是你應該打包你的JS腳本和那些沒有縮減過的腳本,這僅需要幾秒的時間就可以完成。
就個人而言,我推薦Packer by Dean Edwards
4. 使用Firebug出色的控制臺日志工具
如果你還沒有安裝Firebug,那么你真的應該把它裝上。除了許多其它有用的特性(比如允許你檢查http傳輸情況、發現你的CSS問題),它也有極好的日志命令,允許你很容易調試JS腳本。
這里有Firebug所有特性的詳細說明。
我最喜歡的特性有”console.info“,通過它你可以把信息和變量值輸出到控制臺上,而不必使用alert;”console.time”則允許你在一組代碼上設置定時器,從而計算出JS腳本運行所花費的時間。這一切都很容易做到:
console.time('create list');
for (i = 0; i < 1000; i++) {
var myList = $('.myList');
myList.append('This is list item ' + i);
}
console.timeEnd('create list');