JQuery教學(xué)之性能優(yōu)化
jQuery是一款非常優(yōu)秀的javascript框架，當(dāng)我們使用到j(luò)Query后就再也不想回到j(luò)avascript時(shí)冗長(zhǎng)的代碼，那么jQuery的優(yōu)化就擺在了我們的面前。那么我們優(yōu)化JQuery應(yīng)該從那些方面入手呢？
1、使用最新版本的jQuery
新版本相對(duì)于舊版本會(huì)做性能上的改進(jìn)，還有就是添加新功能。
2、選擇器的使用
我們通常會(huì)使用id選擇器、class選擇器、元素選擇器、偽類(lèi)選擇器和元素選擇器。在使用時(shí)我的建議是最好使用id選擇器，其次是class選擇器>元素選擇器>Element選擇器>偽類(lèi)選擇器。
說(shuō)到選擇器時(shí)，不可必選的要插上一句，在使用選擇器查最好是從具有id的父元素開(kāi)始逐級(jí)向下查找。
3、不要過(guò)度的使用jQuery
記住一句話原生的是最快的。jQuery是write less,do more（寫(xiě)的更少，做的更多）。
4、做好緩存
當(dāng)時(shí)要重復(fù)使用一個(gè)節(jié)點(diǎn)是可以使用一個(gè)變量存放，在使用時(shí)再調(diào)用。避免重復(fù)獲取節(jié)點(diǎn)，降低效率。
var inputSelect = $("#head .head_right input");
inputSelect.find("a");
inputSelect.find("i");
5、使用鏈?zhǔn)讲僮?/P>
jQuery的一大亮點(diǎn)，就是可以使用鏈?zhǔn)讲僮鳌?/P>
$("#content").find(".div").eq(2).html("Hello World");
6、事件委托
當(dāng)需要多個(gè)同級(jí)元素執(zhí)行一種類(lèi)型的事件時(shí)，可以采用事件委托的方式。例：
<div id="content">
<div><div>
<div><div>
<div><div>
<div><div>
<div><div>
<div>
當(dāng)每個(gè)class="div"的div都具備一個(gè)click事件的時(shí)候我們可以采取事件委托，
$("#content").on("click","div",function(){
$(this).css("color","#ff5500");
});
7、正確處理循環(huán)
循環(huán)是一種較耗時(shí)的操作，如果可以使用選擇器直接選中元素，就不要使用循環(huán)去一個(gè)個(gè)的遍歷元素。
Javascript的原生方法for和while，要比jQuery的each()快。所以應(yīng)該優(yōu)先使用原生的方法。
8、減少JQuery對(duì)象的生成
生成Query對(duì)象就會(huì)生成對(duì)應(yīng)的屬性和方法，比較占用資源。所以盡量減少jQuery對(duì)象的生成。
9、變量的作用域
當(dāng)一個(gè)變量不需要 在多個(gè)函數(shù)調(diào)用時(shí)，應(yīng)該把變量放在函數(shù)內(nèi)，減少代碼執(zhí)行時(shí)查找代碼的時(shí)間。
10、將某些函數(shù)推遲到$(window).load執(zhí)行
$(document).ready確實(shí)好用，但是它可以再頁(yè)面渲染時(shí)，其他元素還沒(méi)有下載完成就執(zhí)行。
11、腳本的合并
腳本都是一一被加載的，減少腳本數(shù)量也能提高效率。
12、元素封裝
當(dāng)給一個(gè)節(jié)點(diǎn)插入一個(gè)內(nèi)容，可以先把內(nèi)容進(jìn)行封裝，再插入。
var content = "";
$("#head").html(content);
另外就是進(jìn)行js文件的壓縮。
隨著jQuery的不斷被使用，越來(lái)越多的優(yōu)化方法會(huì)被發(fā)現(xiàn)。
相關(guān)文章
jQuery基于ajax實(shí)現(xiàn)帶動(dòng)畫(huà)效果無(wú)刷新柱狀圖投票代碼
這篇文章主要介紹了jQuery基于ajax實(shí)現(xiàn)帶動(dòng)畫(huà)效果無(wú)刷新柱狀圖投票代碼,通過(guò)使用jquery動(dòng)態(tài)操作頁(yè)面元素樣式屬性實(shí)現(xiàn)柱狀圖投票效果,非常具有實(shí)用價(jià)值,需要的朋友可以參考下2015-08-08
深入理解jquery中extend的實(shí)現(xiàn)
extend()是jQuery中一個(gè)重要的函數(shù)，作用是實(shí)現(xiàn)對(duì)對(duì)象的擴(kuò)展, 它經(jīng)常用于jQuery插件的開(kāi)發(fā)，jQuery內(nèi)部也使用它來(lái)擴(kuò)展屬性方法，如noConflict方法，就是用extend方法來(lái)擴(kuò)展的。下面來(lái)一起深入的再學(xué)習(xí)下jquery中extend的實(shí)現(xiàn)吧。2016-12-12
jQuery實(shí)現(xiàn)顏色打字機(jī)的完整代碼
這篇文章主要介紹了jQuery實(shí)現(xiàn)顏色打字機(jī)的完整代碼，代碼簡(jiǎn)單易懂，非常不錯(cuò)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2020-03-03
這篇文章主要介紹了jQuery 添加元素和刪除元素的方法，文中講解非常細(xì)致，幫助大家更好的理解和學(xué)習(xí)，感興趣的朋友可以了解下2020-07-07
jquery實(shí)現(xiàn)下拉框功能效果【實(shí)例代碼】
下面小編就為大家?guī)?lái)一篇jquery實(shí)現(xiàn)下拉框功能效果【實(shí)例代碼】。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考2016-05-05
jQuery獲得IE版本不準(zhǔn)確webbrowser的解決方法
用$.browser.version經(jīng)常出現(xiàn)一些不準(zhǔn)確的狀況，最近碰到，做了一些總結(jié)，不知道是否全面2014-02-02
jQuery Validation插件remote驗(yàn)證方式的Bug解決
jQuery插件很多，其中一個(gè)重要的插件便是jQuery Validation，它的作用是對(duì)表單進(jìn)行驗(yàn)證，還上了jQuery官網(wǎng)。2010-07-07
基于Bootstrap和jQuery構(gòu)建前端分頁(yè)工具實(shí)例代碼
本文給大家介紹基于Bootstrap和jQuery構(gòu)建前端分頁(yè)工具實(shí)例代碼，包括前端分頁(yè)的優(yōu)缺點(diǎn)和解決辦法，對(duì)jquery bootstrap分頁(yè)知識(shí)感興趣的朋友一起通過(guò)本文學(xué)習(xí)吧2016-11-11
在WinForm程序開(kāi)發(fā)中，經(jīng)常用MessageBox彈出某些提示，功能雖簡(jiǎn)單但卻非常的實(shí)用！而在Web頁(yè)面中，瀏覽器也提供了Alert或Confirm等腳本語(yǔ)句用于彈出提示窗口2009-12-12
jquery判斷復(fù)選框是否選中進(jìn)行答題提示特效
這篇文章主要介紹了jquery判斷復(fù)選框是否選中進(jìn)行答題提示特效，感興趣的小伙伴們可以參考一下2015-12-12