DIV CSS 佈局教程網

Jquery性能優化詳解
編輯:JQuery特效代碼     

尋尋覓覓,覓覓尋尋終於找到了一些關於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").slideDown(500);
$("#firstd img").slideUp(500);//利用id選擇器繼承來選擇多個元素

e.使用子查詢

. 代碼如下:
  zhuye.on("swiperight","#data li",function(){
            $(this).find(".delete").hide();
        });//swiperight——看jquery-mobile  api內容內容

f.采用find(),兒不使用上下文查找,.find()函數更快速些,在上面的e中已有使用。

g.采用jquery的內部函數data()來存儲狀態(這種性能優化方法在百度時第一次見到,例子也暫直接引用他的吧)。

. 代碼如下:
$('#head').data('name', 'value');
// 之後在你的應用中調用:
$('#head').data('name');

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

. 代碼如下:
$(document).ready(function (){
});
$(function (){
});

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved