首頁  >  文章  >  web前端  >  JQuery教學之性能優化_jquery

JQuery教學之性能優化_jquery

WBOY
WBOY原創
2016-05-16 16:48:191025瀏覽

jQuery是一款非常優秀的javascript框架,當我們使用到jQuery後就再也不想回到javascript時冗長的程式碼,那麼jQuery的優化就擺在了我們的面前。那我們優化JQuery應該從那些面向入手呢?

        1、使用最新版本的jQuery

        新版本相對於舊版會做效能上的改進,還有就是增加新功能。

        2、選擇器的使用

        我們通常會使用id選擇器、class選擇器、元素選擇器、偽類選擇器和元素選擇器。使用時我的建議是最好使用id選擇器,其次是class選擇器>元素選擇器>Element選擇器>偽類選擇器。

        說到選擇器時,不可必選的要插上一句,在使用選擇器查最好是從具有id的父元素開始逐級向下查找。

        3、不要過度的使用jQuery

        記住一句話原生的是最快的。 jQuery是write less,do more(寫的更少,做的更多)。

        4、準備快取

        當時要重複使用一個節點是可以使用一個變數來存放,並在使用時再呼叫。避免重複取得節點,降低效率。

複製程式碼 程式碼如下:

var inputSelect = $(#head . );
inputSelect.find("a");
inputSelect.find("i");

        5、使用鍊式操作

        jQuery的一大亮點,就是可使用鍊式操作。

複製程式碼 程式碼如下:

$("#content").find(". div").eq(2).html("Hello World");

        6、事件委託

        當需要多個同級元素執行一種類型的事件時,可採用事件委託的方式。例:

複製程式碼 程式碼如下:








   
   

   

   

   


複製程式碼

程式碼如下:$("#content").on("click").on("click").on("click").on("click").on("click").on("click")。 ","div",function(){        $(this).css("color","#ff5500");  });

        7.正確處理循環

         循環是較耗時的操作,若可使用選擇器直接選取元素,就不要使用循環而去一個個的遍歷元素。

        Javascript的原生方法for和while,且要比jQuery的each()快。所以應該優先使用原生的方法。

        8、減少JQuery物件的產生

        產生Query物件就會產生對應的屬性與方法,比較佔用資源。所以盡量減少jQuery物件的生成。

        9.變項的作用域

        當變數不需要 在多個函數呼叫時,應該將變數放在函數內,並減少程式碼執行時尋找程式碼的時間。

        10、將某些函數延後至$(window).load執行

        $(document).ready確實好用,但是它可以再頁渲染時,其他元素還沒有下載完成就執行。

        11、腳本的合併

        腳本都是一一的,減少腳本數量也能提升效率。

        12、元素封裝

        當一個節點插入一個內容,可以先將內容進行封裝,然後再插入。

複製程式碼 程式碼如下:

var content = "";

var content = "";$

$

$

$

$$$$$$ #head").html(content);         另外就是進行js檔案的壓縮。         隨著jQuery的不斷被使用,越來越多的最佳化方法會被發現。
陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn