jQuery 开发者应该注意的9个错误


Posted in Javascript onMay 03, 2012

jQuery is so easy to use that sometimes we just forget that it's not CSS. While using CSS, we don't have to give much thought to performance, because it's so fast that it's not worth the effort to optimize it. But when it comes to the real world, jQuery can drive developers crazy with performance issues. Sometimes you lose precious milliseconds without even noticing it. Also, it's so easy to forget about some functions and we keep using the old (and not-so-good) ones.

Let's take a look at a few of the most-common-and-easiest-to-fix mistakes while using jQuery in your projects.

1. You aren't using the latest jQuery version
Each version update means higher performance and several bug fixes. The current stable release is 1.7.2, and I'm pretty sure you know about plenty of sites developed using 1.6 and below. Ok, ok, you can't just update every old site for every jQuery update (unless your client is paying you to do so) but you should at least start using it for your new projects. So, forget about this local copy and just grab the latest release every time you start a new project.

2. You aren't using a CDN-hosted copy of jQuery
How many unique visitors you`ve got last month? I bet the number is still under 1 billion, right?
So you'd better use Google's copy of jQuery instead of yours. If your user still has the cached file of Google's website (or from many other sites that uses its CDN) his browser will just get the cached version, improving a lot your website's performance. You can use it by copying & pasting this HTML:

<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>

3. You aren't using a fallback for CDN version
I know I said Google is awesome and stuff, but they can fail. So, every time you rely upon external sources, make sure you have a local fallback. I've seen this snippet in the HTML5 boilerplate source code and just found it amazing. You should use it too:

<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. You aren't chaining stuff
While doing common operations, you don't need to call the element every time you want to manipulate it. If you're doing several manipulations in a row, use chaining, so jQuery won't need to get the element twice.

Instead of this:

$(“#mydiv”).hide();
$(“#mydiv”).css(“padding-left”, “50px”);

Use this:

$(“#mydiv”).hide().css(“padding-left”, “50px”);

5. You aren't caching stuff
This is one of the most important performance tips. If you'll call an element at least twice, you should cache it. Caching is just saving the jQuery selector in a variable, so when you need to call it again you'll just reference the variable and jQuery won't need to search the whole DOM tree again to find your element.

/* you can use it this way because almost every jQuery function returns
the element, so $mydiv will be equal to $(“#mydiv”); also it's good to
use the $mydiv so you know it's a jQuery caching var */

var $mydiv = $(“#mydiv”).hide();
[.. lot of cool stuff going on here …]
$mydiv.show();

6. You aren't using pure js
Specially for attributes modification, we have several built in methods to get stuff done with pure javascript. You can even “convert” jQuery objects back to DOM nodes to use them with simpler methods, like this:

$mydiv[0].setAttribute('class', 'awesome'); //you can convert jQuery objects to DOM nodes using $jqObj[0]

7. You aren't checking plugins before including in your site
You know, jQuery is not the hardest thing in the world to code. But good JS (and jQuery), that is pretty hard. The bad news is that while you aren't a good programmer, you'll have to rely on trial and error to find out what is good and what isn't. A few points you must be aware of while including a plugin in your project:

File Size (the easiest to check!) ? if a tooltip plugin is bigger than jQuery source, something is really wrong;
Performance ? You can try it with firebug and others. They give you easy to understand charts to you'll know when something is out of place;
Cross-browsing ? Test, at least on IE7, but Chrome, Firefox, Safari and Opera are good ones to try also
Mobile ? Don't forget that everything is getting mobile. See if the plugin works, or at least doesn't crash your mobile browser
8. You aren't open to remove jQuery
Sometimes it's just better to remove it and use simple ol' CSS. Actually if you want, for instance, an opacity hover, or transition can be done with CSS along with good browser support. And there's no way jQuery can beat plain CSS.

9. You are using jQuery for server side tasks
I know that masking and validating are good, but don't rely just on jQuery for those. You need to recheck everything on the server side. That is especially important if you are thinking about using AJAX. Also, make sure everything will work with JS disabled.

So, it's your turn!

Do you have anything you think should be on this list? Share your thoughts!

About the Author

Javascript 相关文章推荐
jQuery中文入门指南,翻译加实例,jQuery的起点教程
Feb 09 Javascript
深入理解JavaScript定时机制
Oct 29 Javascript
jquery在Chrome下获取图片的长宽问题解决
Mar 20 Javascript
js控制表单不能输入空格的小例子
Nov 20 Javascript
页面刷新时记住滚动条的位置jquery代码
Jun 17 Javascript
用JavaScript判断CSS浏览器类型前缀的两种方法
Oct 08 Javascript
js实现图片缓慢放大缩小效果
Aug 02 Javascript
seajs学习之模块的依赖加载及模块API的导出
Oct 20 Javascript
vue.js 1.x与2.0中js实时监听input值的变化
Mar 15 Javascript
jquery append与appendTo方法比较
May 24 jQuery
JavaScript高级函数应用之分时函数实例分析
Aug 03 Javascript
vue监听浏览器原生返回按钮,进行路由转跳操作
Sep 09 Javascript
jQuery Ajax请求状态管理器打包
May 03 #Javascript
学习从实践开始之jQuery插件开发 菜单插件开发
May 03 #Javascript
Firefox中beforeunload事件的实现缺陷浅析
May 03 #Javascript
统计jQuery中各字符串出现次数的工具
May 03 #Javascript
JQuery插件Style定制化方法的分析与比较
May 03 #Javascript
拉动滚动条加载数据的jquery代码
May 03 #Javascript
基于jquery的固定表头和列头的代码
May 03 #Javascript
You might like
把1316这个数表示成两个数的和,其中一个为13的倍数,另一个是11的倍数,求这两个数。
2011/06/24 PHP
eaglephp使用微信api接口开发微信框架
2014/01/09 PHP
PHP定义字符串的四种方式详解
2018/02/06 PHP
postman的安装与使用方法(模拟Get和Post请求)
2018/08/06 PHP
PHP简单实现图片格式转换(jpg转png,gif转png等)
2019/10/30 PHP
jQuery获取iframe的document对象的方法
2014/10/10 Javascript
浅谈JavaScript函数节流
2014/12/09 Javascript
cocos2dx骨骼动画Armature源码剖析(三)
2015/09/08 Javascript
详解Javascript中的Object对象
2016/02/28 Javascript
详解jQuery中的deferred对象的使用(一)
2016/05/27 Javascript
node-http-proxy修改响应结果实例代码
2016/06/06 Javascript
原生js仿jquery一些常用方法(必看篇)
2016/09/20 Javascript
Angular2环境搭建具体操作步骤(推荐)
2017/08/04 Javascript
通过示例彻底搞懂js闭包
2017/08/10 Javascript
基于node下的http小爬虫的示例代码
2018/01/11 Javascript
浅谈vue项目重构技术要点和总结
2018/01/23 Javascript
js实现整体缩放页面适配移动端
2020/03/31 Javascript
探索node之事件循环的实现
2020/10/30 Javascript
解决python3 Pycharm上连接数据库时报错的问题
2018/12/03 Python
CSS3动画animation实现云彩向左滚动
2014/05/09 HTML / CSS
CSS3哪些新特性值得称赞
2016/03/02 HTML / CSS
阿迪达斯越南官网:adidas越南
2020/07/19 全球购物
linux比较文件内容的命令是什么
2015/09/23 面试题
大学生入党自我鉴定
2013/10/31 职场文书
法律专业实习鉴定
2013/12/22 职场文书
企业精细化管理实施方案
2014/03/23 职场文书
初一学生期末评语
2014/04/24 职场文书
党的群众路线学习材料
2014/05/16 职场文书
2015年元旦演讲稿
2014/09/12 职场文书
审计局班子四风对照检查材料思想汇报
2014/10/07 职场文书
财政局党的群众路线教育实践活动剖析材料
2014/10/13 职场文书
幼儿教师个人总结
2015/02/05 职场文书
2015年信访工作总结
2015/04/07 职场文书
2015年学校精神文明工作总结
2015/05/27 职场文书
OpenCV-Python实现轮廓的特征值
2021/06/09 Python
Mysql中@和@@符号的详细使用指南
2022/06/05 MySQL