是的，明顯原生JS要更快，因?yàn)橹T如JQuery這樣的庫(kù)必須要兼容各種瀏覽器和低版本和許多其他的東西，考慮通用性必然會(huì)導(dǎo)致性能的損耗。

[[133590]]

當(dāng)然，我不是提倡寫代碼純用原生JS實(shí)現(xiàn)，我記得淘寶玉伯曾經(jīng)說(shuō)的一句話“框架能夠讓我們走的更快，但只有了解原生的JS才能讓我們走的更遠(yuǎn)”。

一些感（fei）想（hua）：

1、原生的js，好比全真教的武功，一步步從基礎(chǔ)開(kāi)始（先練氣再御劍），很長(zhǎng)一段時(shí)間內(nèi)和jquery有很大差距，掌握以后發(fā)現(xiàn)jquery只不過(guò)是另外一種武功，看一遍既會(huì)。且當(dāng)學(xué)原生到一定程度之后，可以自創(chuàng)武功。但原生見(jiàn)效很慢，屬于前期慢后期快，成長(zhǎng)性高。
2、jquery，好比華山派的劍宗，直接取實(shí)用的部分（劍），拿來(lái)即用，實(shí)用快速為主（劍），原理部分的原生為輔（氣）。jquery見(jiàn)效較快，屬于前期較快后期較慢，沒(méi)有氣的支持，成長(zhǎng)會(huì)越來(lái)越慢
3、網(wǎng)上找代碼，好比趙敏找六大門派高手偷絕學(xué)，直接對(duì)癥下藥，需要什么拿什么用什么，只注重傷敵（結(jié)果），無(wú)所謂劍與氣。見(jiàn)效奇快，屬于前期快，后期慢。如果事后不研究原理，完全不會(huì)有成長(zhǎng)

廢話不多說(shuō)，下面的代碼示例是一些流行的常用的JQuery功能的原生JS實(shí)現(xiàn)。

選擇器

便捷的找到我們想要的DOM元素是JQuery的核心功能，JQuery選擇器的強(qiáng)大無(wú)需贅言。通過(guò)傳遞一個(gè)查詢字符串給CSS選擇器，它將會(huì)在DOM元素中檢索所有的匹配。

然而在大多數(shù)的情況下，我們可以使用相同的代碼量用原生JS輕易實(shí)現(xiàn)。

1.獲取頁(yè)面所有的div

/* jQuery */ 
  $("div") 
   
  /* native equivalent */ 
  document.getElementsByTagName("div") 

2.獲取某類名相同的一群元素

/* jQuery */  
  $(".my-class") 
  
  /* native equivalent */ 
  document.querySelectorAll(".my-class") 
  
  /* FASTER native equivalent */ 
  document.getElementsByClassName("my-class") 

3.更復(fù)雜的一些選擇器

/* jQuery */ 
  $(".my-class li:first-child") 
  
  /* native equivalent */ 
  document.querySelectorAll(".my-class li:first-child") 

/* jQuery */ 
  $(".my-class").get(0) 
  
  /* native equivalent */ 
  document.querySelector(".my-class") 

DOM操作

JQuery另一大頻繁被使用到的功能就是操作DOM元素，諸如插入或刪除一個(gè)元素。當(dāng)然，如果使用原生JS實(shí)現(xiàn)這些功能，代碼量肯定是會(huì)有所增加的，不過(guò)我們也可以將這些功能封裝成函數(shù)，下面是一些常用的DOM操作的原生JS實(shí)現(xiàn)。

1.插入HTML元素

/* jQuery */ 
  $(document.body).append("<div id='myDiv'><img src='im.gif'/></div>"); 
  
  /* CRAPPY native equivalent */ 
  document.body.innerHTML += "<div id='myDiv'><img src='im.gif'/></div>"; 
  
  /* MUCH BETTER native equivalent */ 
  var frag = document.createDocumentFragment(); 
  
  var myDiv = document.createElement("div"); 
  myDiv.id = "myDiv"; 
  
  var im = document.createElement("img"); 
  im.src = "im.gif"; 
  
  myDiv.appendChild(im); 
  frag.appendChild(myDiv); 
  
  document.body.appendChild(frag); 

CSS操作

在JQuery中可以輕松實(shí)現(xiàn)對(duì)css的操作，增加屬性、刪除屬性或是檢測(cè)是否存在某個(gè)類。那么你是否覺(jué)得使用原生JS實(shí)現(xiàn)會(huì)很麻煩呢？其實(shí)不然，因?yàn)橛衏lassList。下面是一些關(guān)于JQuery css操作的JS原生實(shí)現(xiàn)。

// get reference to DOM element 
  var el = document.querySelector(".main-content"); 
  
  //----Adding a class------ 
  
  /* jQuery */ 
  $(el).addClass("someClass"); 
  
  /* native equivalent */ 
  el.classList.add("someClass"); 
  
  //----Removing a class----- 
  
  /* jQuery */ 
  $(el).removeClass("someClass"); 
  
  /* native equivalent */ 
  el.classList.remove("someClass"); 
  
  //----Does it have class--- 
  
  /* jQuery */ 
  if($(el).hasClass("someClass")) 
  
  /* native equivalent */ 
  if(el.classList.contains("someClass")) 

當(dāng)我們簡(jiǎn)單地逐個(gè)設(shè)置Css的屬性，而并非將它們?nèi)總鬟f給JQuery的Css函數(shù)時(shí)，性能明顯會(huì)快很多。而且，真的不會(huì)添加什么額外的代碼。

// get reference to a DOM element 
  var el = document.querySelector(".main-content"); 
 
  //----Setting multiple CSS properties---- 
  
  /* jQuery */ 
  $(el).css({ 
    background: "#FF0000", 
    "box-shadow": "1px 1px 5px 5px red", 
    width: "100px", 
    height: "100px", 
    display: "block" 
  }); 
  
  /* native equivalent */ 
  el.style.background = "#FF0000"; 
  el.style.width = "100px"; 
  el.style.height = "100px"; 
  el.style.display = "block"; 
  el.style.boxShadow = "1px 1px 5px 5px red"; 

show與hide

show()與hide()應(yīng)該也是JQuery中十分常用的方法，原生JS實(shí)現(xiàn)同樣輕松。

// get reference to a DOM element 
  var el = document.querySelector(".main-content"); 
 
  //----show() or hide()---- 
  
  /* jQuery */ 
  $(el).show(); 
  $(el).hide(); 
  
  /* native equivalent */ 
  el.style.display = ''; 
  el.style.display = 'none'; 

事件綁定

// get reference to a DOM element 
  var el = document.querySelector(".main-content"); 
 
  //----Event Listener off---- 
  
  /* jQuery */ 
  $(el).off(eventName, eventHandler); 
  
  /* native equivalent */ 
  el.removeEventListener(eventName, eventHandler); 
 
 
  //----Event Listener  on---- 
  
  /* jQuery */ 
  $(el).on(eventName, eventHandler); 
  
  /* native equivalent */ 
  el.addEventListener(eventName, eventHandler); 

　　文中出現(xiàn)了諸如querySelector、classList等方法，確實(shí)需要考慮兼容問(wèn)題，關(guān)于它們的兼容性，請(qǐng)猛戳這里：querySelector/querySelectorAll, classList, getElementsByClassName,createDocumentFragment.

　　***不得不說(shuō)的是JQuery的確是一個(gè)了不起的庫(kù)。但是如果我們可以同樣輕松的使用原生JS實(shí)現(xiàn)JQuery，何樂(lè)而不為呢？也許我有點(diǎn)吹毛求疵，這一點(diǎn)性能優(yōu)化可能是可有可無(wú)，只不過(guò)最近在開(kāi)發(fā)H5游戲，你會(huì)發(fā)現(xiàn)當(dāng)你的游戲無(wú)法順暢地跑60幀（60FPS，每秒刷新60次）的時(shí)候，每一絲性能的優(yōu)化帶來(lái)的提升都是寶貴的。

　　原創(chuàng)文章，文筆有限，才疏學(xué)淺，文中若有不正之處，萬(wàn)望告知。

原文鏈接：http://www.cnblogs.com/coco1s/p/4484238.html