首頁 > web前端 > js教程 > Jquery效能優化詳解_jquery

Jquery效能優化詳解_jquery

WBOY
發布: 2016-05-16 16:48:02
原創
1170 人瀏覽過

尋找覓食,覓食尋尋終於找到了一些關於jquery性能優化的文章,小編果斷收藏當然不能忘了加上自己的一些總結及理解。

首先,先前文章中的jquery鍊式操作就是jquery效能最佳化方式中的一種,具體實現及優勢在這裡就不重複了哈。其次,jquery的最佳化與web優化中的某些方法是一樣的。

a.壓縮js。使用程式碼壓縮技術,減少檔案體積。 (使用jsmin、YUI Compressor等)。

b. 事件預設是向上冒泡的,發生在子節點中的事件,可以由父節點來處理。把事件註冊上提到父節點上,這 樣就不需要為每個子節點註冊事件監聽.

c.利用緩存,當要多次使用某個jquery物件時,可以將jquery物件緩存到變數裡。

複製程式碼 程式碼如下:

var nodeTd = $("table td"); 🎜>var $cj = $("#cj");
$cj.on("click",function(){

    $cj.css("color","blue");})

jquery結果緩存,如果需要將jquery結果物件在程式中的其他地方使用,或者function會多次執行,那麼就可以將其存放到一變數中。

d.盡量從id選擇器來繼承。因為id的唯一性,id選擇是jquery選擇一個元素最快的方法了。

複製程式碼 程式碼如下:
$("#firstd").slDown(500) ;
$("#firstd img").slideUp(500);//利用id選擇器繼承來選擇多個元素

e.使用子查詢

複製程式碼 程式碼如下:
  zhuye.on("swiperight","#li ",function(){
            $(this).find(".delete").hide();
        };//swiperight-08/

f.採用find(),兒不使用上下文查找,.find()函數更快速些,在上面的e中已有使用。
g.採用jquery的內部函數data()來儲存狀態(這種效能最佳化方法在百度時第一次見到,例子也暫直接引用他的吧)。

複製程式碼 程式碼如下:$('#head').data('name ', 'value');
// 之後在你的應用程式中呼叫:
$('#head').data('name');



h.最後,使用新版本的 jQuery及簡化jquery程式碼。

複製程式碼 程式碼如下:$(document).ready(>
$(document).ready(function (){});
$(function (){
});


相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板