很多时候,我们经常听见有人说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/querySelectorAllclassListgetElementsByClassName,createDocumentFragment.

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

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

【前端性能】必须要掌握的原生JS实现JQuery的更多相关文章

  1. 原生js和jquery实现图片轮播特效

    本文给大家分享的是使用原生JS和JQ两种方法分别实现相同的图片轮播特效,十分的实用,也非常方便大家对比学习原生js和jQuery,有需要的小伙伴可以参考下. 1)首先是页面的结构部分对于我这种左右切换 ...

  2. 原生js和jquery实现图片轮播特效(转)

    本文给大家分享的是使用原生JS和JQ两种方法分别实现相同的图片轮播特效,十分的实用,也非常方便大家对比学习原生js和jQuery,有需要的小伙伴可以参考下. 1)首先是页面的结构部分对于我这种左右切换 ...

  3. 原生JS和JQuery的区别

    1.原生js和jQuery的入口函数加载模式不同 原生js等页面dom加载完成并且图片等资源也加载完成之后才会执行: jQuery则是等页面dom加载完成执行,不会等图片等资源也加载完成: (也就是说 ...

  4. Web前端性能优化教程07:精简JS 移除重复脚本

    本文是Web前端性能优化系列文章中的第七篇,主要讲述内容:精简Javascript代码,以及移出重复脚本.完整教程可查看:  一.精简javascript 基础知识 精简:从javascript代码中 ...

  5. AJAX请求和跨域请求详解(原生JS、Jquery)

    一.概述 AJAX 是一种在无需重新加载整个网页的情况下,能够更新部分网页的技术. AJAX = 异步 JavaScript 和 XML,是一种用于创建快速动态网页的技术.通过在后台与服务器进行少量数 ...

  6. 原生JS与jQuery文档加载完毕的写法

    HTML是有执行顺序的,默认是自上而下执行.所以当我们的js代码在html代码下边的时候,可以正常执行,而当我们的js代码在html代码上边的时候,可以就无法正常执行了,这时,我们需要在文档加载完毕的 ...

  7. 原生JS实现jquery的链式编程。

    这是我根据之前遇到的一个面试题,题目:用原生JS实现$("#ct").on("click",fn).attr("id"). 然后看了篇jqu ...

  8. 原生js与jquery操作iframe

    1  原生js获取iframe的window对象 //方法1 document.getElementById('iframeId').contentWindow; //方法2 window.frame ...

  9. 用原生js模仿jquery

    阅读声明:本文档仅供学习,由于个人能力有限,文档中有错漏的地方还请指出,大家共同学习. 目前在学习怎么样写jquery,模仿阶段,有兴趣的同学可以和我一起学习,共同交流,在学习的路上希望有你做伴. 在 ...

随机推荐

  1. 我的vimrc

    set nocompatible set langmenu=en_USlet $LANG= 'en_US' source $VIMRUNTIME/vimrc_example.vim source $V ...

  2. SQL Server连接SQL Server、SQL Server连接ORACLE 链接服务器

    夸数据库访问有很多种方式,其中部分用作接口访问,这里要介绍的是MSSQL访问另一台MSSQL,MSSQL访问ORACLE,其它暂不介绍. 1.MSSQL访问另一台MSSQL: a.展开服务器对象--& ...

  3. IIS7.5中神秘的ApplicationPoolIdentity

    IIS7.5中(仅win7,win2008 SP2,win2008 R2支持),应用程序池的运行帐号,除了指定为LocalService,LocalSystem,NetWorkService这三种基本 ...

  4. Git最佳实践

    1.git init 2.git add. 3.git add README.md 4.git commit -m "init" 5.git remote add origin h ...

  5. hiho一下 第九十五周 数论四&#183;扩展欧几里德

    题目 : 数论四·扩展欧几里德 时间限制:10000ms 单点时限:1000ms 内存限制:256MB 描述 小Hi和小Ho周末在公园溜达.公园有一堆围成环形的石板,小Hi和小Ho分别站在不同的石板上 ...

  6. HDU4859 海岸线(最小割)

    题目大概就是说一个n*m的地图,地图上每一块是陆地或浅海域或深海域,可以填充若干个浅海域使其变为陆地,问能得到的最长的陆地海岸线是多少. 也是很有意思的一道题. 一开始想歪了,想着,不考虑海岸线重合的 ...

  7. java 调用grads 自动批量生成图片

    将 -lbcx 命令 后面的4个参数(gs文件名.参数1.参数2.参数3) 放在单引号里面就可以执行了.

  8. JavaScript中的window.close在FireFox和Chrome上不能正常动作的解决方法

    JS中关闭窗口的方法window.close()在IE上能够正常动作,而在FireFox和Chrome上无法动作. (当时,在Chrome35.0上的时候还是可以的,Chrome36.0上就无法动作了 ...

  9. nginx支持url的PATHINFO

    fastcgi_split_path_info ^(.+?\.php)(/.*)$; set $path_info $fastcgi_path_info; fastcgi_param PATH_INF ...

  10. Android开发中,有哪些让你觉得相见恨晚的方法、类或接口?

    ThumbnailUtils.extractThumbnail(bitmap, width, height); 压缩图片到指定大小的方法,以前都是一次次的createbitmap,然后用matrix去 ...