一、優(yōu)化選擇器執(zhí)行速度

1. 優(yōu)先使用ID選擇器和標(biāo)記選擇器

• 使用選擇器時(shí)應(yīng)該首選ID選擇器($("#id"))，其次是標(biāo)記選擇器（$("div")），最后再選用class、屬性等選擇器。
• 避免重復(fù)使用ID號(hào)修飾ID號(hào)，例如$("#div1 #div2")。也避免使用tag，class等修飾ID號(hào)，例如$(".title #id")。
• 使用屬性選擇器時(shí)，盡量使用標(biāo)記進(jìn)行修飾。例如$(div[title='aa'])。

2. 使用jQuery對(duì)象緩存

• 如果多次操作同一個(gè)DOM元素，可以將其存在全局變量中，避免重復(fù)調(diào)用選擇器。
• 緩存JQuery的變量命名規(guī)則盡量以$開頭。
• 如果同一個(gè)DOM對(duì)象進(jìn)行多個(gè)操作，盡量使用鏈?zhǔn)綄懛ā?/li>

3. 給選擇器一個(gè)上下文

格式：$(expression,[context])，expression是選擇器表達(dá)式，context是選擇器查找的范圍。這樣會(huì)比在全局查找效率高一些。

實(shí)例：

<script type="text/javascript">$( function() {window.$objPub = { //在全局范圍中，定義一個(gè)windows對(duì)象$objTmp0: $( "#div0", ".MyCls0" ),$objTmp1: $( "#div1")}TestFun();})function TestFun() { //自定義顯示div內(nèi)容的函數(shù)$objPub.$objTmp0.html( "Tmp0").css("width" ,"100px");$objPub.$objTmp1.html( "Tmp1");}</script >

二、處理選擇器不規(guī)范元素

1. 選擇器屬性中包含特殊符號(hào)：特殊字符前添加轉(zhuǎn)義字符\\。

2. 選擇器中空格符：包含空格時(shí)表示祖先元素和后代元素的關(guān)系；不包含空格時(shí)表示一個(gè)選擇器中兩種篩選條件的合并。

<script type="text/javascript">$( function() {var $objTmp0 = $(".MyCls :hidden" );//含有空格符，.MyCls子元素中的隱藏元素var $objTmp1 = $(".MyCls:hidden" );//沒有空格符，.MyCls類名并且隱藏的元素var $objTest = $("#div\\[test\\]" );//選擇器特殊符號(hào) })</script >

三、解決jQuery庫與其他庫$沖突問題

使用jQuery.noConflict()轉(zhuǎn)讓$使用權(quán)，然后只能使用jQuery變量訪問jQuery對(duì)象。

1.jQuery庫先于其他庫導(dǎo)入

無需使用jQuery.noConflict()方法。只要使用jQuery方法時(shí)不要使用$符號(hào)而是使用jQuery符號(hào)就可以了。

2.jQuery庫后于其他庫導(dǎo)入

需要先使用jQury.noConflict()，然后使用jQuery符號(hào)操作jQuery中的對(duì)象。如果仍然想使用簡潔符號(hào)，有兩種方法

①自定義其他符號(hào)用作快捷方式：

var j=jQuery.noConflict();j( function() {j( "#Button1").click(function () {獲取對(duì)象var $objTmp = j("#txtName" );顯示內(nèi)容j( "#divTmp").html("J_" + $objTmp.val());})})

②在jQuery方法內(nèi)部繼續(xù)使用$符號(hào)。

jQuery.noConflict();jQuery( function($) {$( "#Button1").click(function () {//獲取對(duì)象var $objTmp = $("#txtName" );//顯示內(nèi)容$( "#divTmp").html("J_" + $objTmp.val());})})

四、其他優(yōu)化

• 盡量減少對(duì)DOM元素直接操作的次數(shù)。

<script type="text/javascript">$( function() {//定義數(shù)組var arrList = ["list0" , "list1", "list2", "list3" , "list4", "list5"];var strList = "" ; //初始化字符$.each(arrList, function(index) {//遍歷后累加數(shù)組元素strList += ( "<li>" + arrList[index] + "</li>" );})//一次性完成DOM元素的增加$( "#ulFrame").append(strList);})</script >

• 使用子查詢優(yōu)化選擇器性能。

五、區(qū)分DOM對(duì)象和jQuery對(duì)象

1.DOM對(duì)象和jQuery對(duì)象定義的區(qū)別

• DOM對(duì)象：通過傳統(tǒng)js方法獲取的DOM元素對(duì)象；
• jQuery對(duì)象：通過jQuery方法包裝原始的DOM對(duì)象后生成的新對(duì)象。

2.DOM對(duì)象和jQuery對(duì)象的轉(zhuǎn)換

如果想使DOM對(duì)象和jQuery對(duì)象之間的方法相互調(diào)用，需要先將對(duì)象進(jìn)行類型轉(zhuǎn)換。

• DOM轉(zhuǎn)jQuery：DOM對(duì)象通過$()方法進(jìn)行包裝就可以轉(zhuǎn)換為jQuery對(duì)象。
• jQuery轉(zhuǎn)DOM：通過get(index)或者[index]方法，可以將jQuery對(duì)象轉(zhuǎn)換為DOM對(duì)象。

<script type="text/javascript">$( function() {//***** DOM對(duì)象轉(zhuǎn)成jQuery對(duì)象 *****////DOM對(duì)象var objDom0 = document.getElementById("div0");//轉(zhuǎn)成jQuery對(duì)象var $obj0 = $(objDom0);//調(diào)用jQuery中的方法設(shè)置其中的內(nèi)容$obj0.html( "DOM對(duì)象轉(zhuǎn)成jQuery對(duì)象后設(shè)置的內(nèi)容" );//***** jQuery對(duì)象轉(zhuǎn)成DOM對(duì)象 *****////jQuery對(duì)象var $obj1 = $("#div1" );//轉(zhuǎn)成DOM對(duì)象var objDom1 = $obj1[0];//或者$obj1.get(0);//調(diào)用JavaScript中的對(duì)象方法設(shè)置內(nèi)容objDom1.innerHTML = "jQuery對(duì)象轉(zhuǎn)成DOM對(duì)象后設(shè)置的內(nèi)容" ;})</script >

轉(zhuǎn)載于:https://www.cnblogs.com/janes/p/3541455.html

總結(jié)

以上是生活随笔為你收集整理的读jquery 权威指南[7]-性能优化与最佳实践的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。