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的前端數(shù)據(jù)通用驗(yàn)證庫(kù)
做了這么長(zhǎng)時(shí)間的開(kāi)發(fā),一直因?yàn)轵?yàn)證的問(wèn)題相當(dāng)?shù)目鄲?,不斷的?xiě)很多重復(fù)的代碼,對(duì)想偷懶的我來(lái)說(shuō)是相當(dāng)痛苦的。2011-08-08
淺析jquery如何判斷滾動(dòng)條滾到頁(yè)面底部并執(zhí)行事件
jquery如何判斷滾動(dòng)條滾到頁(yè)面底部并執(zhí)行事件?下面小編就為大家?guī)?lái)一篇jquery判斷滾動(dòng)條滾到頁(yè)面底部并執(zhí)行事件方法。希望對(duì)大家有所幫助,一起跟隨小編過(guò)來(lái)看看吧2016-04-04
jQuery將所有被選中的checkbox某個(gè)屬性值連接成字符串的方法
這篇文章主要介紹了jQuery將所有被選中的checkbox某個(gè)屬性值連接成字符串的方法,可實(shí)現(xiàn)將選中屬性值連接成字符串的功能,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-01-01
jQuery實(shí)現(xiàn)的導(dǎo)航下拉菜單效果示例
這篇文章主要介紹了jQuery實(shí)現(xiàn)的導(dǎo)航下拉菜單效果,涉及jQuery事件響應(yīng)及元素動(dòng)態(tài)操作相關(guān)技巧,非常簡(jiǎn)便實(shí)用,需要的朋友可以參考下2016-09-09
jQuery Ajax async=>false異步改為同步時(shí),解決導(dǎo)致瀏覽器假死的問(wèn)題
今天小編就為大家分享一篇jQuery Ajax async=>false異步改為同步時(shí),解決導(dǎo)致瀏覽器假死的問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,一起跟隨小編過(guò)來(lái)看看吧2019-07-07
JQuery DIV 動(dòng)態(tài)隱藏和顯示的方法
這篇文章主要介紹了JQuery DIV 動(dòng)態(tài)隱藏和顯示的方法的相關(guān)資料,非常不錯(cuò),具有參考借鑒價(jià)值,需要的朋友可以參考下2016-06-06
jQuery鼠標(biāo)經(jīng)過(guò)方形圖片切換成圓邊效果代碼分享
這篇文章主要介紹了jQuery鼠標(biāo)經(jīng)過(guò)方形圖片切換成圓邊特效,圖片可以自行替換,推薦給大家,有需要的小伙伴可以參考下。2015-08-08
使用jquery組件qrcode生成二維碼及應(yīng)用指南
這篇文章主要介紹了使用jquery組件qrcode生成二維碼及應(yīng)用指南,非常全面實(shí)用,需要的朋友可以參考下2015-02-02
jQuery不間斷滾動(dòng)效果(模擬百度新聞支持文字/圖片/垂直滾動(dòng))
jQuery模擬百度新聞不間斷滾動(dòng)效果并且支持文字、圖片水平垂直滾動(dòng)等等,感興趣的朋友可以了解下,或許本文所提供的案例對(duì)你學(xué)習(xí)jquery特效有所幫助,好了話不多說(shuō),切入正題2013-02-02

