【前端性能】必須要掌握的原生JS實作JQuery

很多時候，我們經常聽見有人說jquery有多快多快。在這個各種類庫滿天飛的時候，不得不說的是，能有原生JS快嗎？

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

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

一些感（fei）想（hua）：

原生的js，好比全真教的武功，一步步從基礎開始（先練氣再禦劍），很長一段時間内和jquery有很大差距，掌握以後發現jquery隻不過是另外一種武功，看一遍既會。且當學原生到一定程度之後，可以自創武功。但原生見效很慢，屬于前期慢後期快，成長性高。

jquery，好比華山派的劍宗，直接取實用的部分（劍），拿來即用，實用快速為主（劍），原理部分的原生為輔（氣）。jquery見效較快，屬于前期較快後期較慢，沒有氣的支援，成長會越來越慢

網上找代碼，好比趙敏找六大門派高手偷絕學，直接對症下藥，需要什麼拿什麼用什麼，隻注重傷敵（結果），無所謂劍與氣。見效奇快，屬于前期快，後期慢。如果事後不研究原理，完全不會有成長

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

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

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

JQuery另一大頻繁被使用到的功能就是操作DOM元素，諸如插入或删除一個元素。當然，如果使用原生JS實作這些功能，代碼量肯定是會有所增加的，不過我們也可以将這些功能封裝成函數，下面是一些常用的DOM操作的原生JS實作。

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

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

show()與hide()應該也是JQuery中十分常用的方法，原生JS實作同樣輕松。

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

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

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