开发者社区> 行者武松> 正文

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

简介:
+关注继续查看
很多时候,我们经常听见有人说jquery有多快多快。在这个各种类库满天飞的时候,不得不说的是,能有原生JS快吗?

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

【前端性能】必须要掌握的原生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='im.gif'/></div>"); 
  3.   
  4.   /* CRAPPY native equivalent */ 
  5.   document.body.innerHTML += "<div id='myDiv'><img src='im.gif'/></div>"
  6.   
  7.   /* MUCH BETTER native equivalent */ 
  8.   var frag = document.createDocumentFragment(); 
  9.   
  10.   var myDiv = document.createElement("div"); 
  11.   myDiv.id = "myDiv"
  12.   
  13.   var im = document.createElement("img"); 
  14.   im.src = "im.gif"
  15.   
  16.   myDiv.appendChild(im); 
  17.   frag.appendChild(myDiv); 
  18.   
  19.   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次)的时候,每一丝性能的优化带来的提升都是宝贵的。

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


作者:ChokCoco

来源:51CTO

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
阿里云服务器如何登录?阿里云服务器的三种登录方法
购买阿里云ECS云服务器后如何登录?场景不同,大概有三种登录方式:
9438 0
Web Vitals :Google 如何定义性能指标及帮助开发者调优前端性能 ?
来自 Google 的Palances Liao 将在第十五届 D2 前端技术论坛带来 《以全球 Web 角度谈前端性能的更新与趋势》主题演讲,与大家分享关于 Core Web Vitals 的最新指标及每个指标的更新。
1550 0
前端性能和加载体验优化实践(附:PWA、离线包、内存优化、预渲染)
页面为何会卡?等待时间长?看起来卡?特别是对于首屏资源加载中的白屏时间,用户等待的时间就越长,用户感知到页面的速度就越慢。麻省理工学院的 Richard Larson 在讲话中指出,“人类将被动等待高估了 36%”。这意味着用户感觉到的等待时间比开发工具记录的长得多。
273 0
利用Chrome开发者工具分析C4C Opportunity搜索的前端性能
利用Chrome开发者工具分析C4C Opportunity搜索的前端性能
30 0
前端性能优化的另一种方式——HTTP2.0
最近在读一本书叫《web性能权威指南》谷歌公司高性能团队核心成员的权威之作。 一直听说HTTP2.0,对此也仅仅是耳闻,没有具体研读过,这次正好有两个篇章,分别讲HTTP1.1和HTTP2.0。
10 0
阿里云服务器怎么设置密码?怎么停机?怎么重启服务器?
如果在创建实例时没有设置密码,或者密码丢失,您可以在控制台上重新设置实例的登录密码。本文仅描述如何在 ECS 管理控制台上修改实例登录密码。
20106 0
8 条关于 Web 前端性能的优化建议
一般网站优化都是优化后台,如接口的响应时间、SQL优化、后台代码性能优化、服务器优化等。高并发情况下,对前端web优化也是非常重要的。
27 0
+关注
行者武松
杀人者,打虎武松也。
17142
文章
2569
问答
文章排行榜
最热
最新
相关电子书
更多
JS零基础入门教程(上册)
立即下载
性能优化方法论
立即下载
手把手学习日志服务SLS,云启实验室实战指南
立即下载