<font id="zqva1"></font>
<rt id="zqva1"></rt>
  • <tt id="zqva1"></tt>
    <cite id="zqva1"></cite>

    <cite id="zqva1"><noscript id="zqva1"></noscript></cite>
      <rp id="zqva1"><meter id="zqva1"></meter></rp>

        <cite id="zqva1"></cite>
          <b id="zqva1"></b>
          <rp id="zqva1"></rp>
          <cite id="zqva1"></cite>

          <rt id="zqva1"></rt>

        1. <rp id="zqva1"></rp>

          jQuery 效率提升建議

          時間:?2017-11-14閱讀:?926標簽:?效率作者:?大蟲

          jQuery簡潔通用的方法集把編碼者從繁重的工作中解脫出來,也拉低了進入javascript的門檻,初學者對瀏覽器兼容性一無所知的情況下,幾行代碼就可以寫出超炫的特效。網上有一篇文章轉載比較泛濫,已經不知道原文作者了,里面針對jQuery效率提升建議非常科學,現在重新組織里面的內容并轉載。



          1.使用最新版本的jQuery

          jQuery的版本更新很快,你應該總是使用最新的版本。因為新版本會改進性能,還有很多新功能。 下面就來看看,不同版本的jQuery性能差異有多大。這里是三條最常見的jQuery選擇語句:

          $('.elem')
          $('.elem', context)
          context.find('.elem')

          我們用1.4.2、1.4.4、1.6.2三個版本的jQuery測試,看看瀏覽器在1秒內能夠執行多少次。結果如下:

          圖片描述

          可以看到,1.6.2版本的運行次數,遠遠超過兩個老版本。尤其是第一條語句,性能有數倍的提高。其他語句的測試,比如.attr(“value”)和.val(),也是新版本的jQuery表現好于老版本。


          2.正確使用選擇器

          在jquery中,你可以用多種選擇器,選擇同一個網頁元素。每種選擇器的性能是不一樣的,你應該了解它們的性能差異。

          最快的選擇器:id選擇器和元素標簽選擇器

          舉例來說,下面的語句性能最佳:
          $('#id')
          $('form')
          $('input')
          遇到這些選擇器的時候,jQuery內部會自動調用瀏覽器的原生方法(比如getElementById()),所以它們的執行速度快。

          較慢的選擇器:class選擇器
          $('.className')的性能,取決于不同的瀏覽器。Firefox、Safari、Chrome、Opera瀏覽器,都有原生方法getElementByClassName(),所以速度并不慢。但是,IE5-IE8都沒有部署這個方法,所以這個選擇器在IE中會相當慢,jQuery歷次更新對IE8之前的版本來說是沒有用處的。最慢的選擇器:偽類選擇器和屬性選擇器

          先來看例子。找出網頁中所有的隱藏元素,就要用到偽類選擇器:
          $(':hidden')

          屬性選擇器的例子則是:
          $('[attribute=value]')

          這兩種語句是最慢的,因為瀏覽器沒有針對它們的原生方法。但是,一些瀏覽器的新版本,增加了querySelector()和querySelectorAll()方法,因此會使這類選擇器的性能有大幅提高。

          最后是不同選擇器的性能比較圖。

          圖片描述

          可以看到,ID選擇器遙遙領先,然后是標簽選擇器,第三是Class選擇器,其他選擇器都非常慢。


          3.理解子元素和父元素的關系

          下面六個選擇器,都是從父元素中選擇子元素。你知道哪個速度最快,哪個速度最慢嗎?

          $('.child', $parent)
          $parent.find('.child')
          $parent.children('.child')
          $('#parent > .child')
          $('#parent .child')
          $('.child', $('#parent'))

          我們一句句來看。

          $('.child', $parent)
          這條語句的意思是,給定一個DOM對象,然后從中選擇一個子元素。jQuery會自動把這條語句轉成$.parent.find('child'),這會導致一定的性能損失。它比最快的形式慢了5%-10%。$parent.find('.child')
          這條是最快的語句。.find()方法會調用瀏覽器的原生方法(getElementById,getElementByName,getElementByTagName等等),所以速度較快。$parent.children('.child')
          這條語句在jQuery內部,會使用$.sibling()和javascript的nextSibling()方法,一個個遍歷節點。它比最快的形式大約慢50%。$('#parent > .child')
          jQuery內部使用Sizzle引擎,處理各種選擇器。Sizzle引擎的選擇順序是從右到左,所以這條語句是先選.child,然后再一個個過濾出父元素#parent,這導致它比最快的形式大約慢70%。$('#parent .child')
          這條語句與上一條是同樣的情況。但是,上一條只選擇直接的子元素,這一條可以于選擇多級子元素,所以它的速度更慢,大概比最快的形式慢了77%。$('.child', $('#parent'))
          jQuery內部會將這條語句轉成$('#parent').find('.child'),比最快的形式慢了23%。所以,最佳選擇是$parent.find('.child')。而且,由于$parent往往在前面的操作已經生成,jQuery會進行緩存,所以進一步加快了執行速度。


          4.不要過度使用jQuery

          jQuery速度再快,也無法與原生的javascript方法相比。所以有原生方法可以使用的場合,盡量避免使用jQuery。
          請看下面的例子,為a元素綁定一個處理點擊事件的函數:

          $('a').click(function(){
              alert($(this).attr('id'));
          });

          這段代碼的意思是,點擊a元素后,彈出該元素的id屬性。為了獲取這個屬性,必須連續兩次調用jQuery,第一次是$(this),第二次是attr('id')。
          事實上,這種處理完全不必要。更正確的寫法是,直接采用javascript原生方法調用this.id,根據測試,this.id的速度比$(this).attr('id')快了20多倍。


          5.做好緩存

          選中某一個網頁元素,是開銷很大的步驟。所以,使用選擇器的次數應該越少越好,并且盡可能緩存選中的結果,便于以后反復使用。 比如,下面這樣的寫法就是糟糕的寫法:

          jQuery('#top').find('p.classA');
          jQuery('#top').find('p.classB');

          更好的寫法是:

          var cached = jQuery('#top');
          cached.find('p.classA');
          cached.find('p.classB');

          根據測試,緩存比不緩存,快了2-3倍。


          6.使用鏈式寫法

          jQuery的一大特點,就是允許使用鏈式寫法。

          $('div').find('h3').eq(2).html('Hello');
          采用鏈式寫法時,jQuery自動緩存每一步的結果,因此比非鏈式寫法要快。根據測試,鏈式寫法比(不使用緩存的)非鏈式寫法,大約快了25%。


          7.事件的委托處理(EventDelegation)

          javascript的事件模型,采用”冒泡”模式,也就是說,子元素的事件會逐級向上”冒泡”,成為父元素的事件。
          利用這一點,可以大大簡化事件的綁定。比如,有一個表格(table元素),里面有100個格子(td元素),現在要求在每個格子上面綁定一個點擊事件(click),請問是否需要將下面的命令執行100次?

          $("td").bind("click", function(){
              $(this).toggleClass("click");
          });

          回答是不需要,我們只要把這個事件綁定在table元素上面就可以了,因為td元素發生點擊事件之后,這個事件會”冒泡”到父元素table上面,從而被監聽到。
          因此,這個事件只需要在父元素綁定1次即可,而不需要在子元素上綁定100次,從而大大提高性能。這就叫事件的”委托處理”,也就是子元素”委托”父元素處理這個事件。
          具體的寫法有兩種。第一種是采用.delegate()方法:

          $("table").delegate("td","click", function(){
              $(this).toggleClass("click");
          });

          第二種是采用.live()方法:

          $("table").each(function(){
              $("td", this).live("click",function(){
                  $(this).toggleClass("click");
              });
          });

          這兩種寫法基本等價。唯一的區別在于,.delegate()是當事件冒泡到指定的父元素時觸發,.live()則是當事件冒泡到文檔的根元素后觸發,因此.delegate()比.live()稍快一點。此外,這兩種方法相比傳統的.bind()方法還有一個好處,那就是對動態插入的元素也有效,.bind()只對已經存在的DOM元素有效,對動態插入的元素無效。
          根據測試,委托處理比不委托處理,快了幾十倍。在委托處理的情況下,.delegate()又比.live()大約快26%。


          8.少改動DOM結構

          改動DOM結構開銷很大,因此不要頻繁使用.append()、.insertBefore()和.insetAfter()這樣的方法。
          如果要插入多個元素,就先把它們合并,然后再一次性插入。根據測試,合并插入比不合并插入,快了將近10倍。如果你要對一個DOM元素進行大量處理,應該先用.detach()方法,把這個元素從DOM中取出來,處理完畢以后,再重新插回文檔。根據測試,使用.detach()方法比不使用時,快了60%。

          如果你要在DOM元素上儲存數據,不要寫成下面這樣:

          var elem = $('#elem');
          elem.data(key,value);

          而要寫成

          var elem = $('#elem');
          $.data(elem,key,value);

          根據測試, 后一種寫法要比前一種寫法,快了將近10倍。因為elem.data()方法是定義在jQuery函數的prototype對象上面的, 而$.data()方法是定義jQuery函數上面的,調用的時候不從復雜的jQuery對象上調用,所以速度快得多。(此處可以參閱下面第10點。)


          9.正確處理循環

          循環總是一種比較耗時的操作,如果可以使用復雜的選擇器直接選中元素,就不要使用循環,去一個個辨認元素。
          javascript原生循環方法for和while,要比jQuery的.each()方法快,應該優先使用原生方法。


          10.盡量少生成jQuery對象

          每當你使用一次選擇器(比如$('#id')),就會生成一個jQuery對象。jQuery對象是一個很龐大的對象,帶有很多屬性和方法,會占用不少資源。所以,盡量少生成jQuery對象。
          舉例來說,許多jQuery方法都有兩個版本,一個是供jQuery對象使用的版本,另一個是供jQuery函數使用的版本。下面兩個例子,都是取出一個元素的文本,使用的都是text()方法。你既可以使用針對jQuery對象的版本:

          var $text = $("#text");
          var $ts = $text.text();

          也可以使用針對jQuery函數的版本:

          var $text = $("#text");
          var $ts = $.text($text);

          由于后一種針對jquery函數的版本不通過jQuery對象操作,所以相對開銷較小,速度比較快。


          11.小結

          jQuery對象方法和自身函數運行速度我進行了一下對比,分別測試了文章中提到的text和data,text測試結果不是很明顯,$.text比對象方法text略占上風。對象data由于會對dom變更,速度會遠慢于jQuery函數data。


          來源:https://segmentfault.com/a/1190000011893165


          站長推薦

          1.阿里云: 本站目前使用的是阿里云主機,安全/可靠/穩定。點擊領取2000元代金券、了解最新阿里云產品的各種優惠活動點擊進入

          2.騰訊云: 提供云服務器、云數據庫、云存儲、視頻與CDN、域名等服務。騰訊云各類產品的最新活動,優惠券領取點擊進入

          3.廣告聯盟: 整理了目前主流的廣告聯盟平臺,如果你有流量,可以作為參考選擇適合你的平臺點擊進入

          鏈接: http://www.modern-decoration.com.cn/article/detial/103

          55個提高你 CSS 開發效率的必備片段

          這篇文章會記錄我們平時常用到的 CSS 片段,使用這些 CSS 可以幫助我們解決許多實際項目問題中遇到的,墻裂建議點贊收藏再看,方便日后查找;浮動給我們的代碼帶來的麻煩,想必不需要多說,我們會用很多方式來避免這種麻煩

          如何提升javascript的效率?

          為了提供新鮮、別致的用戶體驗,很多網站都會使用 JavaScript來改善設計、驗證表單、檢查瀏覽器,以及Ajax請求,cookie操作等等,實現無刷新動態效果 。但是,要將大量內容在瀏覽器呈現,如果處理不好,網站性能將會急劇下降

          Vue Template 修飾符和簡寫,讓開發效率有所提高

          vue 是一個易于使用的Web應用程序框架,可用于開發交互式前端應用程序。在本文中,我們將介紹指令的修飾符和一些有用的模板簡寫指令。事件修飾符例如,v-on指令的.prevent修飾符將在設置為該值的事件處理函數上自動運行

          用Node.js編寫內存效率高的應用程序

          軟件應用程序在計算機的主存儲器中運行,我們稱之為隨機存取存儲器(RAM)。JavaScript,尤其是 NodeJS (服務端 JS)允許我們為終端用戶編寫從小型到大型的軟件項目

          提高開發效率的 9 個工具

          互聯網真是個神奇的地方,它不僅教你如何寫代碼,還提供了很多有用的工具,在開發的各個階段幫你節約寶貴時間。本文將列出 9 個有用的在線工具,對任何開發人員而言,它們都會是得力助手(排名不分先后)

          從JavaScript的運行原理談解析效率優化【譯】

          編寫高效率的 JavaScript ,其中一個關鍵就是要理解它的工作原理。編寫高效代碼的方法數不勝數,例如,你可以編寫對編譯器友好的 JavaScript 代碼,從而避免將一行簡單代碼的運行速度拖慢 7 倍。

          低效率開發人員的4種壞習慣

          我們都有不好的習慣,地球上沒有一個人是完美的。作為開發人員,不良習慣會嚴重影響您的效率,也會影響您周圍的人。Jack Canfield說:“習慣將決定您的未來”。想要成長為一名開發人員,就必須改掉不良習慣。

          推薦幾款能提升代碼效率的筆記應用

          編程容易產生挫折,即使作為一種業余愛好也可能是這樣。建立一個網頁,手機APP或桌面應用都是個很大的工程,好的記筆記技能是讓這個工程井然有序的關鍵,也是克服壓力、絕望和倦怠的好方法

          有哪些可以提升編程效率的技巧和方法?

          傳說程序員打字速度要快,很多人仍然會以這樣一個標準來片面判斷技術水平.拜托,你是一個程序員,不是一個打字員,打字快可以代表一些,但也并不代表什么.互聯網行業還在糾結打字速度的,不是外行,就是一個沒有獨立思考的人.

          提高開發效率的 Vue 技巧

          vue 提供了組件功能,組件又可以分為全局組件和非全局組件。區別是全局組件你可以直接在 .vue 文件中直接使用自定義的 html 即可。非全局組件必須在 Vue 的對象中定義 components 引入這個組件

          fly63.com版權所有,內容以共享、參考、研究為目的,不存在任何商業目的。其版權屬原作者所有,如有侵權,請與小編聯系!情況屬實本人將予以刪除!

          文章投稿關于web前端網站點搜索站長推薦網站地圖站長QQ:522607023

          小程序專欄: 土味情話心理測試腦筋急轉彎幽默笑話段子句子語錄成語大全

          国产精品高清视频免费 - 视频 - 在线观看 - 影视资讯 - 唯爱网