是的，明顯原生JS要更快，因為諸如JQuery這樣的庫必須要兼容各種瀏覽器和低版本和許多其他的東西，考慮通用性必然會導致性能的損耗。

[[133590]]

當然，我不是提倡寫代碼純用原生JS實現，我記得淘寶玉伯曾經說的一句話“框架能夠讓我們走的更快，但只有了解原生的JS才能讓我們走的更遠”。

一些感（fei）想（hua）：

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

廢話不多說，下面的代碼示例是一些流行的常用的JQuery功能的原生JS實現。

選擇器

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

然而在大多數的情況下，我們可以使用相同的代碼量用原生JS輕易實現。

1.獲取頁面所有的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.更復雜的一些選擇器

/* 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元素，諸如插入或刪除一個元素。當然，如果使用原生JS實現這些功能，代碼量肯定是會有所增加的，不過我們也可以將這些功能封裝成函數，下面是一些常用的DOM操作的原生JS實現。

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中可以輕松實現對css的操作，增加屬性、刪除屬性或是檢測是否存在某個類。那么你是否覺得使用原生JS實現會很麻煩呢？其實不然，因為有classList。下面是一些關于JQuery css操作的JS原生實現。

// 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")) 

當我們簡單地逐個設置Css的屬性，而并非將它們全部傳遞給JQuery的Css函數時，性能明顯會快很多。而且，真的不會添加什么額外的代碼。

// 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()應該也是JQuery中十分常用的方法，原生JS實現同樣輕松。

// 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); 

　　文中出現了諸如querySelector、classList等方法，確實需要考慮兼容問題，關于它們的兼容性，請猛戳這里：querySelector/querySelectorAll, classList, getElementsByClassName,createDocumentFragment.

　　***不得不說的是JQuery的確是一個了不起的庫。但是如果我們可以同樣輕松的使用原生JS實現JQuery，何樂而不為呢？也許我有點吹毛求疵，這一點性能優化可能是可有可無，只不過最近在開發H5游戲，你會發現當你的游戲無法順暢地跑60幀（60FPS，每秒刷新60次）的時候，每一絲性能的優化帶來的提升都是寶貴的。

　　原創文章，文筆有限，才疏學淺，文中若有不正之處，萬望告知。

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