Jquery性能優(yōu)化詳解
尋尋覓覓,覓覓尋尋終于找到了一些關于jquery性能優(yōu)化的文章,小編果斷收藏當然不能忘了加上自己的一些總結(jié)及理解。
首先,之前文章中的jquery鏈式操作就是jquery性能優(yōu)化方式中的一種,具體實現(xiàn)及優(yōu)勢在這里就不重復了哈。其次,jquery的優(yōu)化與web優(yōu)化中的某些方法是一樣的。
a.壓縮js。使用代碼壓縮技術,減小文件體積。(使用jsmin、YUI Compressor等)。
b. 事件默認是向上冒泡的,發(fā)生在子節(jié)點中的事件,可以由父節(jié)點來處理。把事件注冊上提到父節(jié)點上,這 樣就不需要為每個子節(jié)點注冊事件監(jiān)聽.
c.利用緩存,當要多次使用某個jquery對象時,可以將jquery對象緩存到變量里。
var nodeTd = $("table td");
var $cj = $("#cj");
$cj.on("click",function(){
$cj.css("color","blue");})
jquery結(jié)果緩存,如果需要將jquery結(jié)果對象在程序中的其他地方使用,或者function會多次執(zhí)行,那么就可以將其存放到一變量中。
d.盡量從id選擇器來繼承。因為id的唯一性,id選擇是jquery選擇一個元素最快的方法了。
$("#firstd").slideDown(500);
$("#firstd img").slideUp(500);//利用id選擇器繼承來選擇多個元素
e.使用子查詢
zhuye.on("swiperight","#data li",function(){
$(this).find(".delete").hide();
});//swiperight——看jquery-mobile api內(nèi)容內(nèi)容
f.采用find(),兒不使用上下文查找,.find()函數(shù)更快速些,在上面的e中已有使用。
g.采用jquery的內(nèi)部函數(shù)data()來存儲狀態(tài)(這種性能優(yōu)化方法在百度時第一次見到,例子也暫直接引用他的吧)。
$('#head').data('name', 'value');
// 之后在你的應用中調(diào)用:
$('#head').data('name');
h.最后,使用新版本的 jQuery及簡化jquery代碼。
$(document).ready(function (){
});
$(function (){
});
相關文章
JQuery與Ajax調(diào)用新浪API獲取短網(wǎng)址的代碼
這篇文章主要介紹了調(diào)用新浪API獲取短網(wǎng)址的方法有很多,本例為大家介紹下使用JQuery與Ajax來實現(xiàn),需要的朋友可以參考下2014-02-02全面解析jQuery中的$(window)與$(document)的用法區(qū)別
這篇文章主要介紹了jQuery中的$(window)與$(document)的用法區(qū)別,具體內(nèi)容大家可查看下文的詳細講解,感興趣的小伙伴們可以參考一下。2017-08-08