1. 程式人生 > >使用JS提高效能--選擇器篇

使用JS提高效能--選擇器篇

前言:jquery選擇器提供了簡潔方便的查詢dom元素的API,經過jquery封裝過的dom元素是一個代理物件,包含dom本身,長度等等,可以列印jquery選擇器檢視。一個jquery選擇器代理了諸多。所以在dom查詢的速度上是慢於原生js選擇器的。

  1. document.getElementById(sle);也許就是最快的id選擇器了。
  2. document.getElementsByClassName(cla);慢於第一種;
  3. document.getElementsByName(na);
  4. document.getElementsByTagName(tag);

對於dom操作的話,則建議使用 innerHTML,innerText,等來操作。這樣有利於提高效能,對於千條資料以上效果明顯。對於前端來說,dom操作是極其耗費效能的,這一點是共識,當然,如果資料量較小,則推薦使用簡單易用的jquery選擇器。

  1. $("#sel")
  2. $(".sel")
  3. $("tag")
以上jquery選擇器最快的是id選擇器,但是有一點id選擇器過多也不好,滿螢幕的$對於程式碼審查等過程是極其痛苦的,如果讓審美要求很高的人來審查的話。 在html5中,js也提供了幾個較為簡單易用的選擇器,例如:
  1. document.querySelector();//引數可以是id class,tag等等
  2. document.querySelectorAll();引數可以是class,tag等等
他們的效能也是速速的。所以考慮一下,使用更快的原生選擇器與API來操作dom提高效能。