首页 > 代码库 > 水电费

水电费

2024-08-17 14:31:27   220人阅读

【前端性能】必须要掌握的原生JS实现JQuery

很多时候，我们经常听见有人说jquery有多快多快。在这个各种类库满天飞的时候，不得不说的是，能有原生JS快吗？

作者：ChokCoco来源：博客园|2015-05-07 15:13
 收藏
  分享

 

 

很多时候，我们经常听见有人说jquery有多快多快。在这个各种类库满天飞的时候，不得不说的是，能有原生JS快吗？

是的，明显原生JS要更快，因为诸如JQuery这样的库必须要兼容各种浏览器和低版本和许多其他的东西，考虑通用性必然会导致性能的损耗。

技术分享

当然，我不是提倡写代码纯用原生JS实现，我记得淘宝玉伯曾经说的一句话“框架能够让我们走的更快，但只有了解原生的JS才能让我们走的更远”。

一些感（fei）想（hua）：

1、原生的js，好比全真教的武功，一步步从基础开始（先练气再御剑），很长一段时间内和jquery有很大差距，掌握以后发现jquery只不过是另外一种武功，看一遍既会。且当学原生到一定程度之后，可以自创武功。但原生见效很慢，属于前期慢后期快，成长性高。
2、jquery，好比华山派的剑宗，直接取实用的部分（剑），拿来即用，实用快速为主（剑），原理部分的原生为辅（气）。jquery见效较快，属于前期较快后期较慢，没有气的支持，成长会越来越慢
3、网上找代码，好比赵敏找六大门派高手偷绝学，直接对症下药，需要什么拿什么用什么，只注重伤敌（结果），无所谓剑与气。见效奇快，属于前期快，后期慢。如果事后不研究原理，完全不会有成长

废话不多说，下面的代码示例是一些流行的常用的JQuery功能的原生JS实现。

选择器

便捷的找到我们想要的DOM元素是JQuery的核心功能，JQuery选择器的强大无需赘言。通过传递一个查询字符串给CSS选择器，它将会在DOM元素中检索所有的匹配。

然而在大多数的情况下，我们可以使用相同的代码量用原生JS轻易实现。

1.获取页面所有的div

  1. /* jQuery */ 
  2.   $("div") 
  3.    
  4.   /* native equivalent */ 
  5.   document.getElementsByTagName("div") 

2.获取某类名相同的一群元素

  1. /* jQuery */  
  2.   $(".my-class") 
  3.   
  4.   /* native equivalent */ 
  5.   document.querySelectorAll(".my-class") 
  6.   
  7.   /* FASTER native equivalent */ 
  8.   document.getElementsByClassName("my-class") 

3.更复杂的一些选择器

  1. /* jQuery */ 
  2.   $(".my-class li:first-child") 
  3.   
  4.   /* native equivalent */ 
  5.   document.querySelectorAll(".my-class li:first-child") 
  1. /* jQuery */ 
  2.   $(".my-class").get(0) 
  3.   
  4.   /* native equivalent */ 
  5.   document.querySelector(".my-class") 


DOM操作

JQuery另一大频繁被使用到的功能就是操作DOM元素，诸如插入或删除一个元素。当然，如果使用原生JS实现这些功能，代码量肯定是会有所增加的，不过我们也可以将这些功能封装成函数，下面是一些常用的DOM操作的原生JS实现。

1.插入HTML元素

  1. /* jQuery */ 
  2.   $(document.body).append("<div id=‘myDiv‘><img src=http://www.mamicode.com/‘im.gif‘/>
"); 
  •   
  •   /* CRAPPY native equivalent */ 
  •   document.body.innerHTML += "<div id=‘myDiv‘><img src=http://www.mamicode.com/‘im.gif‘/>
    • "; 
  •   
  •   /* 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原生实现。

    1. // get reference to DOM element 
    2.   var el = document.querySelector(".main-content"); 
    3.   
    4.   //----Adding a class------ 
    5.   
    6.   /* jQuery */ 
    7.   $(el).addClass("someClass"); 
    8.   
    9.   /* native equivalent */ 
    10.   el.classList.add("someClass"); 
    11.   
    12.   //----Removing a class----- 
    13.   
    14.   /* jQuery */ 
    15.   $(el).removeClass("someClass"); 
    16.   
    17.   /* native equivalent */ 
    18.   el.classList.remove("someClass"); 
    19.   
    20.   //----Does it have class--- 
    21.   
    22.   /* jQuery */ 
    23.   if($(el).hasClass("someClass")) 
    24.   
    25.   /* native equivalent */ 
    26.   if(el.classList.contains("someClass")) 

    当我们简单地逐个设置Css的属性，而并非将它们全部传递给JQuery的Css函数时，性能明显会快很多。而且，真的不会添加什么额外的代码。

    1. // get reference to a DOM element 
    2.   var el = document.querySelector(".main-content"); 
    3.  
    4.   //----Setting multiple CSS properties---- 
    5.   
    6.   /* jQuery */ 
    7.   $(el).css({ 
    8.     background: "#FF0000", 
    9.     "box-shadow": "1px 1px 5px 5px red", 
    10.     width: "100px", 
    11.     height: "100px", 
    12.     display: "block" 
    13.   }); 
    14.   
    15.   /* native equivalent */ 
    16.   el.style.background = "#FF0000"; 
    17.   el.style.width = "100px"; 
    18.   el.style.height = "100px"; 
    19.   el.style.display = "block"; 
    20.   el.style.boxShadow = "1px 1px 5px 5px red"; 

    show与hide

    show()与hide()应该也是JQuery中十分常用的方法，原生JS实现同样轻松。

    1. // get reference to a DOM element 
    2.   var el = document.querySelector(".main-content"); 
    3.  
    4.   //----show() or hide()---- 
    5.   
    6.   /* jQuery */ 
    7.   $(el).show(); 
    8.   $(el).hide(); 
    9.   
    10.   /* native equivalent */ 
    11.   el.style.display = ‘‘; 
    12.   el.style.display = ‘none‘; 

    事件绑定

    1. // get reference to a DOM element 
    2.   var el = document.querySelector(".main-content"); 
    3.  
    4.   //----Event Listener off---- 
    5.   
    6.   /* jQuery */ 
    7.   $(el).off(eventName, eventHandler); 
    8.   
    9.   /* native equivalent */ 
    10.   el.removeEventListener(eventName, eventHandler); 
    11.  
    12.  
    13.   //----Event Listener  on---- 
    14.   
    15.   /* jQuery */ 
    16.   $(el).on(eventName, eventHandler); 
    17.   
    18.   /* native equivalent */ 
    19.   el.addEventListener(eventName, eventHandler); 

    文中出现了诸如querySelector、classList等方法，确实需要考虑兼容问题，关于它们的兼容性，请猛戳这里：querySelector/querySelectorAll, classList, getElementsByClassName,createDocumentFragment.

    最后不得不说的是JQuery的确是一个了不起的库。但是如果我们可以同样轻松的使用原生JS实现JQuery，何乐而不为呢？也许我有点吹毛求疵，这一点性能优化可能是可有可无，只不过最近在开发H5游戏，你会发现当你的游戏无法顺畅地跑60帧（60FPS，每秒刷新60次）的时候，每一丝性能的优化带来的提升都是宝贵的。

    原创文章，文笔有限，才疏学浅，文中若有不正之处，万望告知。

    水电费


    联系
    我们