【前端性能】必须掌握的原生JS实现JQuery
时间：2023-03-19 17:14:56
科技观察
很多时候，我们经常听到有人说jquery有多快。当各种库满天飞的时候，不得不说的是，它能和原生JS一样快吗？是的，很明显原生JS更快，因为JQuery等库必须要兼容各种浏览器和低版本等很多东西，考虑通用性必然导致性能损失。当然，我并不是提倡纯粹用原生JS写代码。记得淘宝宇博曾经说过的话，“框架可以让我们走得更快，但只有了解原生JS才能走得更远”。一些感受（fei）和思考（hua）：1.原来js就像是全真教的武功。从基础开始一步一步（先练气后控剑）。长期以来，与jquery差距很大。后来才知道jquery不过是另一种武功而已，看一遍就可以了。而当学员达到一定境界后，就可以自创武学。但初期起效非常缓慢，属于前期慢后期快，增长潜力大。2、jQuery就像是华山派的剑宗，直接取了实战部分（剑），即用即用。实用部分是快（剑），原理的原始部分是辅助（气）。jquery生效比较快，属于前期比较快，后期比较慢。没有气的支持，成长会越来越慢，只注重伤敌（结果），不在乎剑气。效果极快，就是前期快，后期慢。后面不去研究原理，根本就没有成长。废话不多说，下面的代码示例是一些流行常用的JQuery函数的原生JS实现。Selector方便的找到我们想要的DOM元素是JQuery的核心功能，JQuery选择器的强大就不用多说了。通过将查询字符串传递给CSS选择器，它将检索DOM元素中的所有匹配项。然而，在大多数情况下，我们可以使用相同数量的代码使用vanillaJS轻松实现它。1.获取页面上所有的div/*jQuery*/$("div")/*nativeequivalent*/document.getElementsByTagName("div")2.获取一组具有相同类名的元素/*jQuery*/$(".my-class")/*nativeequivalent*/document.querySelectorAll(".my-class")/*FASTERnativeequivalent*/document.getElementsByClassName("my-class")3.一些更复杂的选择器/*jQuery*/$(".my-classli:first-child")/*原生等效项*/document.querySelectorAll(".my-classli:first-child")/*jQuery*/$(".my-class").get(0)/*nativeequivalent*/document.querySelector(".my-class")DOM操作JQuery的另一个常用功能是操作DOM元素，例如插入或删除元素。当然，如果使用原生的JS来实现这些功能，代码量肯定会增加，但是我们也可以将这些功能封装成函数。下面是一些常用DOM操作的原生JS实现。1.插入HTML元素/*jQuery*/$(document.body).append("
");/*CRAPPYnativeequivalent*/document.body.innerHTML+="
";/*MUCHBETTERnativeequivalent*/varfrag=document.createDocumentFragment();varmyDiv=document.createElement("div");myDiv.id="myDiv";varim=document.createElement("img");im.src="im.gif";myDiv.appendChild(im);frag.appendChild(myDiv);文档。身体。附加子（片段）；CSS操作可以很方便的实现JQuery中的css操作，添加属性，删除属性，或者检测某个类是否存在。那么你觉得使用原生的JS实现会不会很麻烦呢？其实不是，因为有classList。下面是一些JQuerycss操作的原生JS实现。//getreferencetoDOMelementvarel=document.querySelector(".main-content");//----Addingaclass------/*jQuery*/$(el).addClass("someClass");/*原生等效*/el.classList.add("someClass");//----删除类-----/*jQuery*/$(el).removeClass("someClass");/*原生等效*/el.类列表。remove("someClass");//----Doesithaveclass---/*jQuery*/if($(el).hasClass("someClass"))/*原生等效*/if(el.classList.contains("someClass"))当我们简单地一个一个地设置CSS属性而不是将它们全部传递给JQuery的Css函数时，性能会快很多。此外，实际上没有添加额外的代码。//getreferencetoaDOMelementvarel=document.querySelector(".main-content");//----设置多个CSS属性----/*jQuery*/$(el).css({background:"#FF0000","box-shadow":"1px1px5px5pxred",width:"100px",height:"100px",display:"block"});/*原生等效*/el.style.background="#FF0000";el.style.width="100px";el.style.height="100px";el.style.display="方块";el.style.boxShadow="1px1px5px5pxred";show和hideshow()和hide()应该也是JQuery中很常用的方法，原生JS实现同样容易。//getreferencetoaDOMelementvarel=document.querySelector(".main-content");//----显示()或隐藏()----/*jQuery*/$(el).show();$(el).hide();/*nativeequivalent*/el.style.display='';el.style.display='none';事件绑定//getreferencetoaDOMelementvarel=document.querySelector(".main-content");//----EventListeneroff----/*jQuery*/$(el).off(eventName,eventHandler);/*本机等效项*/el.removeEventListener(eventName,eventHandler);//----EventListeneron----/*jQuery*/$(el).on(eventName,eventHandler);/*nativeequivalent*/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
