很多時候，我們經常聽見有人說jquery有多快多快。在這個各種類庫滿天飛的時候，不得不說的是，能有原生JS快嗎？
是的，明顯原生JS要更快，因為諸如JQuery這樣的庫必須要兼容各種瀏覽器和低版本和許多其他的東西，考慮通用性必然會導致性能的損耗。
當然，我不是提倡寫代碼純用原生JS實現，我記得淘寶玉伯曾經說的一句話“框架能夠讓我們走的更快，但只有了解原生的JS才能讓我們走的更遠”。
一些感（fei）想（hua）：
-
原生的js，好比全真教的武功，一步步從基礎開始（先練氣再御劍），很長一段時間內和jquery有很大差距，掌握以后發現jquery只不過是另外一種武功，看一遍既會。且當學原生到一定程度之后，可以自創武功。但原生見效很慢，屬於前期慢后期快，成長性高。
-
jquery，好比華山派的劍宗，直接取實用的部分（劍），拿來即用，實用快速為主（劍），原理部分的原生為輔（氣）。jquery見效較快，屬於前期較快后期較慢，沒有氣的支持，成長會越來越慢
-
網上找代碼，好比趙敏找六大門派高手偷絕學，直接對症下葯，需要什么拿什么用什么，只注重傷敵（結果），無所謂劍與氣。見效奇快，屬於前期快，后期慢。如果事后不研究原理，完全不會有成長
廢話不多說，下面的代碼示例是一些流行的常用的JQuery功能的原生JS實現。
jQuery 選擇器的原生實現
便捷的找到我們想要的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")
jQuery 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);
jQuery 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";
jQuery 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';
jQuery 事件綁定的原生實現
// 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次）的時候，每一絲性能的優化帶來的提升都是寶貴的。
原創文章，文筆有限，才疏學淺，文中若有不正之處，萬望告知。