使用JQuery的9个误区
作者:夜飞羽 来源:mxria.com 时间:2012-05-16
JQuery是如此容易使用以至于我们有时候忘记了CSS的存在。我们在使用CSS时,几乎不去考虑性能,因为它已经是快得不值得再去做什么优化上的努力。但现实世界中,JQuery会导致令开发人员发疯的性能问题。有时你会毫无知觉地就损失那么几毫秒。我们也很容易忘记的一些功能并继续使用一些旧的(和不那么好的)的功能。以下是使用JQuery过程容易犯的9个错误,看看是不是你也曾遇到过?
1.不使用最新的版本
如今的稳定版本是1.7.2,你看看你的机器是不是最新的?可能你不会把已经做好的网站再去更新一把,毕竟这个工作量可能没人给你付费,但新的开发项目呢?千万别忘记了使用最新的版本哦,毕竟每个版本更新肯定会在功能或性能上有所提升,或者修复了几个Bug,但有时惰性让人不想再去研究新版本的变化,因此,提醒你别忘记了在新项目用新的一定比旧版本要好。
2.不使用CDN-hosted的JQuery
很多人喜欢Download到自己的服务器上,然后调用。似乎潜意识里文件放在自己手里比较有安全感。但大部分时候,除非你特别牛,自己的服务器比不过CDN服务器。如果流量小,可能没有什么影响,但如果流量一旦大了,性能方面的影响就非常突出了,这时,你完全可以考虑CDN服务器嘛,比如google的Copy,这对于网站的性能有很大的帮助!
你只需要调用时采用如下:
1
|
<script type= "text/javascript" src= "//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" ></script>
|
3.使用了CDN-hosted版本但没有备份措施
尽管我们相信Google很牛逼,不会出问题,但别忘记了你在天朝,一切皆有可能!因此,在html代码中加上本地服务器版本的容灾计划还是很有必要的,也非常简单:
1
2
3
|
<script src= "//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" ></script>
<script>window.jQuery || document.write( '<script src="js/libs/jquery-1.7.2.min.js"><\/script>' )</script>
|
4. 忘记链式写法
我们在进行一些普通操作时,如果多使用链式操作方式,可以提高性能,不用多次加载元素。例如
1
2
3
4
5
6
7
|
$(“ #mydiv”).hide();
$(“ #mydiv”).css(“padding-left”, “50px”);
JQuery会获取元素2次
$(“ #mydiv”).hide().css(“padding-left”, “50px”);
|
一次搞定,有时候链式写法带来的性能改善是相当可观的哦
5.忘记缓存
这是跟性能相关的重要提示:别忘记缓存!如果页面中调用了某个元素至少2次,你就应该考虑缓存了。通过一个变量就可以在JQuery中缓存选择器。当第二次使用该选择器时,只需引用该变量即可。这样做的好处就是JQuery不用再次遍历搜索整个DOM树去寻找你选择的元素。例如
1
2
3
4
|
var $myMxria = $(“ #mydiv”).hide();
$myMxria.show();
|
6.干嘛不使用原始的JS?
用惯了$,大家就基本忽略document.getElementById了,但不得不说,滥用$也是不对的,为什么呢?如果只是纯粹的属性修改,使用原始的javascript性能更好,完全没有使用JQuery对象。例如下面的例子中,浏览器还是会将JQuery对象转化为DOM节点进行操作。
1
|
$mydiv[0].setAttribute( 'class' , 'awesome' );
|
7.未作检查的滥用插件
如今,JQuery流行起来也带来无数插件,精彩的、雷人的各种插件很多。我们很喜欢追随潮流,用些时髦玩意儿。但事实上,很多插件需要我们认真评估,看看到底是不是适合你的项目,或者说你真的需要吗?有没有考虑以下因素呢?
- 文件大小:超过10k的大小就得反复考虑一下哦
- 性能评估:图个方便不在乎性能?真的吗?
- 跨浏览器支持: 看看你的客户在用什么浏览器,别忘记了古老的IE6可是依然风采依旧哦
- 移动支持: 确认插件是可以在Mobile环境下运作正常的
8 不用JQuery
不用不行吗?干嘛一定要用呢?很多时候我们可能根本没有想过这个问题,首先想到的可能是用Jquey好像很容易实现啊!这个误区真的很普遍,你有一把快刀砍到底的习惯吗?
9 使用JQuery干服务器端的活
JQuery太好了,太强大了,似乎一切都可以在前端搞定!于是,我们又会进入一个误区:类似有效性检查和数据验证的活,忽略了在服务端的重要性。很多业务逻辑能在前端处理的就一古脑在前端处理,过犹不及的悲剧就此发生!千万要记住,前端浏览器里啥事都可能发生!!!禁用JS、某个不兼容问题、伪造数据、攻击行为,这些都不是开发者能100%掌控到的,所以,服务端的活千万别因为JQuery的强大而放松警惕!
以上供参考,看看你有无走进误区?
分享到:
相关推荐
jQuery打印插件jqprint,jquery.jqprint-0.3.js 下载,内包含使用示例,下载解压可直接在浏览器打开使用。 jQuery打印插件jqprint,jquery.jqprint-0.3.js 下载,内包含使用示例,下载解压可直接在浏览器打开使用。 ...
练习2:使用jQuery美化英雄联盟简介页.zip,练习2:使用jQuery美化英雄联盟简介页.zip,练习2:使用jQuery美化英雄联盟简介页.zip
Jquery九宫格效果,支持全部浏览器,效果还是不错啦,(*^__^*) 嘻嘻……
北大青鸟使用jQuery快速高效制作网页交互特效 第九章上机+课后+上课实例代码
使用jQuery插件FancyBox轻松实现弹窗视频,使用jQuery插件FancyBox轻松实现弹窗视频
使用jQueryEasyUI提升客户体验,从零基础到高级,资源长期有效
Ajax jquery的使用 Ajax jquery的使用 Ajax jquery的使用 Ajax jquery的使用 Ajax jquery的使用
jQuery是一个流行的JavaScript库,可用于在网页上进行各种操作,包括表单验证。 1、将基于Jquery的表单验证的调查问卷分为四个部分:FrontPage.html、write.html、end.html、style.css。 1、硬件要求:计算机一台 2...
jquery的几种使用方法,可以更好的设计网页
资源名称:Jquery easyui 使用说明内容简介:Jquery easyui 使用说明 中文PDF版主要讲述的是Jquery easyui 使用说明;感兴趣的朋友可以过来看看。jQuery EasyUI是一组基于jQuery的UI插件集合体,而jQuery EasyUI的...
使用jquery实现分页功能(局部刷新)
使用jQuery实现的效果,主要是调用js实现一些特效,有兴趣可以学习。。
[锋利的jQuery] 15天学会jquery jQuery使用手册 三本电子书教会你如何使用jQuery
使用jQuery.form插件,实现完美的表单异步提交
使用jQuery制作web拼图游戏使用jQuery制作web拼图游戏
jquery API 使用手册 jquery API 使用手册 jquery API 使用手册
一天搞定jQuery(二)——使用jQuery表格的隔行换色
使用jQuery简化Ajax开发,大大的提高了Ajax的开发效率。
从零开始学习jQuery (四) 使用jQuery 操作元素的属性与样式 从零开始学习jQuery (五) 事件与事件对象 从零开始学习jQuery (六) jQuery 中的Ajax 从零开始学习jQuery (七) jQuery 动画-让页面动起来! 从零开始学习...
java使用jquery登录例子 简单,容易上手 java使用jquery登录例子 简单,容易上手