jQuery網(wǎng)頁(yè)特效設(shè)計(jì)基礎(chǔ)教程課件 第10單元 jQuery 性能優(yōu)化與技巧

第10單元jQuery性能優(yōu)化與技巧掌握jQuery性能優(yōu)化的方法。掌握jQuery常用技巧的使用。教學(xué)目標(biāo)pedagogicalobjectives能夠熟練進(jìn)行jQuery性能優(yōu)化。能夠熟練應(yīng)用jQuery常用技巧。培養(yǎng)系統(tǒng)化思維能力，從整體出發(fā)優(yōu)化性能，掌握簡(jiǎn)化流程的技巧，提高資源配置與管理能力，形成效率與質(zhì)量并重的開發(fā)習(xí)慣。目錄導(dǎo)航10.1jQuery性能優(yōu)化10.3項(xiàng)目實(shí)戰(zhàn)：動(dòng)態(tài)搜索過(guò)濾10.2jQuery常用技巧10.1jQuery性能優(yōu)化01OPTION使用一個(gè)var關(guān)鍵字來(lái)定義變量如果需要使用多個(gè)變量，建議使用var關(guān)鍵字對(duì)其進(jìn)行定義。代碼如下：varpage=0,$loading=$('#loading'),$body=$('body');02OPTION定義jQuery變量時(shí)添加$符號(hào)在聲明或者定義變量的時(shí)候，如果定義的是jQuery變量，則添加一個(gè)$符號(hào)在變量前。代碼如下：var$loading=$('#loading');這樣定義jQuery變量的好處在于，可以有效地提示自己或者其他閱讀代碼的人，這是一個(gè)jQuery變量。10.1jQuery性能優(yōu)化03OPTION使用HTML5新的HTML5標(biāo)準(zhǔn)帶來(lái)的是更輕巧的DOM結(jié)構(gòu)，更輕巧的DOM結(jié)構(gòu)意味著使用jQuery時(shí)需要更少的遍歷以及獲得更優(yōu)良的載入性能，所以如果可以，請(qǐng)使用HTML5。04OPTION在需要的時(shí)候使用原生的JavaScript使用jQuery是一件很棒的事情，但是它也是JavaScript的一個(gè)框架，所以可以在需要的時(shí)候在jQuery代碼中使用原生的JavaScript，這樣能獲得更好的性能。10.1jQuery性能優(yōu)化05OPTION精簡(jiǎn)jQuery代碼精簡(jiǎn)前$button.click(function(){ $target.css('width','50%'); $target.css('border','1pxsolid#202020'); $target.css('color','#fff');});精簡(jiǎn)后$button.click(function(){ $target.css({'width':'50%','border':'1pxsolid#202020','color':'#fff'});});10.1jQuery性能優(yōu)化06OPTION盡量使用.on()方法如果使用版本比較新的jQuery類庫(kù)，可使用.on()方法，其他任何方法都是最終使用.on()來(lái)實(shí)現(xiàn)的。在jQuery中執(zhí)行速度最快的選擇器是ID選擇器，因?yàn)樗苯觼?lái)自JavaScript的getElementById()方法。例如，下面的HTML代碼：07OPTION總是從ID選擇器來(lái)繼承如果像這樣選擇按鈕是低效的，代碼如下：vartraffic_button=$("#content.button");用ID選擇器直接選擇按鈕效率更高，代碼如下：vartraffic_button=$("#traffic_button");10.1jQuery性能優(yōu)化08OPTION在class前面使用tagjQuery中執(zhí)行速度第二快的選擇器是tag選擇器[例如$('head')]，因?yàn)樗苯觼?lái)自原生的JavaScript方法getElementsByTagName()，所以最好使用tag來(lái)修飾class（并且不要忘記就近的id）。代碼如下：varreceiveNewsletter=$('#nslForminput.on');此外，不要用tag來(lái)修飾id。例如，下面的示例將會(huì)遍歷所有的<div>元素來(lái)查找id屬性值為content的節(jié)點(diǎn)，代碼如下：varcontent=$('div#content');//非常慢，不要使用10.1jQuery性能優(yōu)化09OPTION使用jQuery的內(nèi)部函數(shù)data()來(lái)存儲(chǔ)信息在jQuery中，使用內(nèi)部函數(shù)data()存儲(chǔ)信息性能更好。代碼如下：$('#head').data('name','value');//之后在應(yīng)用中調(diào)用$('#head').data('name');10.1jQuery性能優(yōu)化10OPTION推遲到$(window).load$(document).ready()確實(shí)很有用，它在頁(yè)面渲染時(shí)，其他元素還沒(méi)載入完成即可執(zhí)行。如果發(fā)現(xiàn)頁(yè)面一直是載入中的狀態(tài)，很有可能是$(document).ready()函數(shù)引起的?？梢酝ㄟ^(guò)將jQuery函數(shù)綁定到$(window).load事件的方法來(lái)降低頁(yè)面載入時(shí)的CPU（CentralProcessingUnit，中央處理器）使用率，該函數(shù)會(huì)在所有的HTML（包括IFrame）載入完成后執(zhí)行。代碼如下：$(window).load(function(){//頁(yè)面完全載入后才初始化的jQuery函數(shù)});多余的功能，例如拖放、視覺(jué)特效和動(dòng)畫、預(yù)載入隱藏圖像等，都適合使用這種性能優(yōu)化方法。10.1jQuery性能優(yōu)化11OPTION緩存jQuery對(duì)象不建議使用的代碼將jQuery對(duì)象緩存到一個(gè)變量中再操作的代碼10.1jQuery性能優(yōu)化12OPTION使用子查詢jQuery允許開發(fā)人員對(duì)一個(gè)已包裝的對(duì)象使用附加的選擇器操作，因?yàn)橐呀?jīng)在變量中保存了一個(gè)父元素，這樣可以大大提高對(duì)其子元素進(jìn)行操作的效率。例如，有下面的HTML代碼：接下來(lái)可以使用子查詢來(lái)獲取亮或不亮的燈，并將其緩存以備后續(xù)操作。代碼如下：10.1jQuery性能優(yōu)化13OPTION對(duì)直接的DOM操作進(jìn)行限制在jQuery中應(yīng)該對(duì)直接的DOM操作進(jìn)行限制，遇到這種情況時(shí)，可以首先在內(nèi)存中創(chuàng)建需要的內(nèi)容，然后更新DOM，因?yàn)橹苯拥腄OM操作速度很慢。例如，如果需要?jiǎng)討B(tài)地創(chuàng)建一組列表元素，一定不要使用下面的代碼：而應(yīng)該首先將一組列表元素在插入DOM之前全部創(chuàng)建好，代碼如下：10.1jQuery性能優(yōu)化13OPTION對(duì)直接的DOM操作進(jìn)行限制然后在插入DOM之前，將多個(gè)元素包裹在一個(gè)單獨(dú)的父級(jí)節(jié)點(diǎn)中，這樣執(zhí)行速度更快，代碼如下：如果在執(zhí)行完上述步驟后，還是擔(dān)心性能有問(wèn)題，那么可以嘗試下面的方法。使用jQuery的clone()方法，它會(huì)創(chuàng)建一個(gè)節(jié)點(diǎn)樹的副本，它允許以“離線”的方式進(jìn)行DOM操作，當(dāng)操作完成后再返回節(jié)點(diǎn)樹。

DOMDocumentFragments的性能要明顯優(yōu)于直接的DOM操作的性能。10.1jQuery性能優(yōu)化14OPTIONDOM操作請(qǐng)務(wù)必記住緩存在jQuery代碼開發(fā)中，常常需要操作DOM。DOM操作是非常消耗資源的一個(gè)過(guò)程，而很多人往往都喜歡這樣使用jQuery：$('#loading').html('完畢');$('#loading').fadeOut();以上代碼沒(méi)有任何問(wèn)題，但是這里需要注意，每次定義并且調(diào)用$('#loading')時(shí)，實(shí)際都創(chuàng)建了一個(gè)新的變量，這樣會(huì)很浪費(fèi)資源。因此，如果需要重用$('#loading')，一定要將其定義在一個(gè)變量中，這樣可以有效地緩存變量?jī)?nèi)容。代碼如下：var$loading=$('#loading');$loading.html('完畢');$loading.fadeOut();10.1jQuery性能優(yōu)化15OPTION直接給DOM元素添加<style>標(biāo)記要給少數(shù)DOM元素添加樣式，最好的方法就是使用jQuery的css()函數(shù)；然而，如果要給很多DOM元素添加樣式，直接給DOM元素添加<style>標(biāo)記會(huì)更有效，這樣可以避免在代碼中使用硬編碼。代碼如下：$('<styletype="text/css">div.class{color:red;}</style>').appendTo('head');16OPTION使用EventDelegation使用EventDelegation，僅需要在父級(jí)節(jié)點(diǎn)上綁定事件，然后查看哪個(gè)子節(jié)點(diǎn)（目標(biāo)節(jié)點(diǎn)）觸發(fā)了事件。代碼如下：$("table").delegate("td","hover",function(){$(this).toggleClass("hover");});10.1jQuery性能優(yōu)化17OPTION壓縮成一個(gè)主JavaScript文件如果已經(jīng)確定了哪些文件是應(yīng)該被下載的，那么應(yīng)該將它們壓縮成一個(gè)主JavaScript文件。使用一些開源的工具可以自動(dòng)完成這個(gè)任務(wù)，如使用Minify（和后端代碼集成）使用JSCompressor、YUICompressor、DeanEdwardsJSpacker等在線工具。目錄導(dǎo)航10.1jQuery性能優(yōu)化10.3項(xiàng)目實(shí)戰(zhàn)：動(dòng)態(tài)搜索過(guò)濾10.2jQuery常用技巧10.2jQuery常用技巧01OPTION驗(yàn)證元素是否在jQuery對(duì)象集合中02OPTION獲取jQuery集合的某一項(xiàng)03OPTION禁止右鍵單擊10.2jQuery常用技巧04OPTION隱藏搜索文本框文字05OPTION在新窗口中打開鏈接10.2jQuery常用技巧06OPTION檢測(cè)瀏覽器類型在jQuery1.9之前，檢測(cè)瀏覽器類型使用如下方法：10.2jQuery常用技巧06OPTION檢測(cè)瀏覽器類型jQuery1.9之后，$.browser已被剔除，因此需要使用其他方式來(lái)檢測(cè)瀏覽器類型。具體代碼如下：上述代碼中等號(hào)后面的表達(dá)式返回的是true或false，可以直接用來(lái)替換原來(lái)的$.browser等。檢測(cè)瀏覽器類型是否為IE6：if("undefined"==typeof(document.body.style.maxHeight)){}檢測(cè)瀏覽器類型是否為IE6～I(xiàn)E8:if(!$.support.leadingWhitespace){}10.2jQuery常用技巧07OPTIONjQuery延時(shí)加載功能08OPTION預(yù)加載圖片10.2jQuery常用技巧09OPTION動(dòng)態(tài)控制頁(yè)面字號(hào)大小10.2jQuery常用技巧10OPTION操作元素的樣式11OPTION頁(yè)面樣式切換10.2jQuery常用技巧12OPTION獲得鼠標(biāo)指針坐標(biāo)值13OPTION驗(yàn)證元素是否為空14OPTION統(tǒng)計(jì)元素個(gè)數(shù)10.2jQuery常用技巧15OPTION替換指定的元素16OPTION移除單詞功能17OPTION使整個(gè)<div>元素可單擊10.2jQuery常用技巧18OPTION復(fù)制對(duì)象10.2jQuery常用技巧19OPTION使元素居屏幕中間位置10.2jQuery常用技巧20OPTION方法的連寫21OPTION集合處理功能10.2jQuery常用技巧22OPTION同一函數(shù)實(shí)現(xiàn)set和get10.2jQuery常用技巧23OPTION禁用jQuery（動(dòng)畫）效果24OPTION與其他JavaScript類庫(kù)沖突的解決方案目錄導(dǎo)航10.1jQuery性能優(yōu)化10.3項(xiàng)目實(shí)戰(zhàn)：動(dòng)態(tài)搜索過(guò)濾10.2jQuery常用技巧10.3項(xiàng)目實(shí)戰(zhàn)：動(dòng)態(tài)搜索過(guò)濾創(chuàng)建一個(gè)名為index.html的文件，在該文件的<head>標(biāo)記中應(yīng)使用下面的語(yǔ)句引入jQuery庫(kù)。01在index.html文件中添加一個(gè)輸入框和下拉列表。關(guān)鍵代碼如下：02<inputtype="text"id="searchInput"placehold