Web 技术研究所

我一直坚信着,Web 将会成为未来应用程序的主流

需要高效代码时别用jQuery

  “人没有牺牲就什么都得不到,为了得到什么东西,就需要付出同等的代价。”这是来自钢炼里的一句名言。在做开发的时候jQuery的引入确实会给我们带来许多便利,但是这些便利不会平白无故就出现了,必须付出同等的代价才行。所以在效率上,JQ就自然不及原生JS。这个道理很简单,但是这个“不及”具体是多少呢?我们要知道具体差距的数量级才行。下面就测试个最简单的动作,根据ID获取元素。我使用的是jQuery v1.8.3。 <script src="jquery.js"></script>
<div id="panel"></div>
<script>
var i,r1,r2,t;
t=new Date;
for(i=0;i<1E5;i++)$("#panel")
r1=new Date-t;
t=new Date;
for(i=0;i<1E5;i++)document.getElementById("panel");
r2=new Date-t;
document.write("JQ:"+r1+"<br/>JS:"+r2);
</script>

  差距还是非常大的,特别是在Chrome和Firefox上JQ的效率远不如原生JS。虽然在JQ内部实现从ID获取元素的动作也是通过getElementById来完成的,但是JQ把DOM节点封装了,这个动作消耗了很多时间。不过JQ封装了以后的DOM操作起来很方便这是无可厚非的。既然方便了,那么方便了以后的效率呢?我们测试一下用JQ对象操作DOM的一个样式的效率。 var i,r1,r2,o1,o2,t;
o1=$("#panel");
o2=document.getElementById("panel");
t=new Date;
for(i=0;i<1E5;i++)o1.css("color","red");
r1=new Date-t;
t=new Date;
for(i=0;i<1E5;i++)o2.style.color="red";
r2=new Date-t;
document.write("JQ:"+r1+"<br/>JS:"+r2);

  效率上的差距依然很大,这是因为JQ内部考虑了太多情况,JQ太智能化了。这就和现实世界一样,现实中智商高的人解决问题的速度未必会快,因为它们往往考虑的很多。就算让爱因斯坦去做高考的理综卷,分数也不会比一个书呆子高中生高。框架这种东西不能不用,也不能依赖。不用框架就是自虐行为,因为绝大多数的代码都是不需要高效的。如果获取元素、绑定事件、等,这些常用的动作每次都要自己去写一遍代码,那程序员一定会疯掉。所以使用框架是必须的。但是也不能依赖它,如果一个程序所有功能都通过框架提供的方法来实现那效率可想而知。所以要自己学会判断,在需要高效的代码中脱离框架编写。
网名:
34.203.213.*
电子邮箱:
仅用于接收通知
提交 悄悄的告诉你,Ctrl+Enter 可以提交哦
神奇海螺
[查看全部主题]
各类Web技术问题讨论区
发起新主题
本模块采用即时聊天邮件通知的模式
让钛合金F5成为历史吧!
次碳酸钴的技术博客,文章原创,转载请保留原文链接 ^_^