JQuery性能优化的几点建议


Posted in Javascript onMay 14, 2014

针对jquery性能优化这个主题,想必大家都有所了解。下面是我搜集点一点资料关于jquery性能优化,大家可以参考参考。

一、选择器性能优化建议

 1. 总是从#id选择器来继承:这是jQuery选择器的一条黄金法则。jQuery选择一个元素最快的方法就是用ID来选择了;

 2. 在class前面使用tag:jQuery中第二快的选择器就是tag选择器(如$(‘head')),因为它和直接来自于原生的Javascript方法getElementByTagName()。所以最好总是用tag来修饰class(并且不要忘了就近的ID);

 3. 使用子查询:将父对象缓存起来以备将来的使用;

 4. 采用find(),而不使用上下文查找;

 5. 利用强大的链式操作:采用jQuery的链式操作比缓存选择器更有效;

二、优化DOM操作建议

 1.缓存jQuery对象: 将你经常用的元素缓存起来;

 2. 当要进行DOM插入时,将所有元素封装成一个元素:

这里的基本思想是在内存中建立你确实想要的东西,然后更新DOM。这并不是一个jQuery最佳实践,但必须进行有效的JavaScript操作 。直接的DOM操作速度很慢

直接的DOM操作很慢。尽可能少的去更改HTML结构。

 3.使用直接函数,而不要使用与与之等同的函数:为了获得更好的性能,你应该使用直接函数如$.ajax(),而不要使用$.get(),$.getJSON(),$.post(),因为后面的几个将会调用$.ajax()。

 4. 缓存jQuery结果,以备后来使用:

你经常会获得一个javasript应用对象——你可以用App.来保存你经常选择的对象,以备将来使用;

三、关于优化事件性能的建议

 1.推迟到$(window).load:

有时候采用$(window).load()比$(document).ready()更快,因为后者不等所有的DOM元素都下载完之前执行。你应该在使用它之前测试它。

 2.使用Event Delegation:

当你在一个容器中有许多节点,你想对所有的节点都绑定一个事件,delegation很适合这样的应用场景。使用Delegation,我们仅需要在父级绑定事件,然后查看哪个子节点(目标节点)触发了事件。当你有一个很多数据的table的时候,你想对td节点设置事件,这就变得很方便。先获得 table,然后为所有的td节点设置delegation事件

四、其他常用jQuery性能优化建议

1. 使用最新版本的jQuery

最新的版本往往是最好的。更换了版本后,不要忘记测试你的代码。有时候也不是完全向后兼容的。

2. 使用HMTL5

新的HTML5标准带来的是更轻巧的DOM结构。更轻巧的结构意味着使用jQuery需要更少的遍历,以及更优良的载入性能。所以如果可能的话请使用HTML5。

3. 如果给15个以上的元素加样式时,直接给DOM元素添加style标签

要给少数的元素加样式,最好的方法就是使用jQuey的css()函数。然而更15个以上的较多的元素添加样式时,直接给DOM添加style 标签更有效些。这个方法可以避免在代码中使用硬编码(hard code)。

    4. 避免载入多余的代码

将Javascript代码放在不同的文件中是个好的方法,仅在需要的时候载入它们。这样你不会载入不必要的代码和选择器。也便于管理代码。

5. 压缩成一个主JS文件,将下载次数保持到最少

当你已经确定了哪些文件是应该被载入的,那么将它们打包成一个文件。用一些开源的工具可以自动帮你完成,如使用Minify(和你的后端代码集成)或者使用JSCompressor,YUI Compressor 或 Dean Edwards JS packer等在线工具可以为你压缩文件。我最喜欢的是JSCompressor。

6. 需要的时候使用原生的Javasript

使用jQuery是个很棒的事情,但是不要忘了它也是Javascript的一个框架。所以你可以在jQuery代码有必要的时候也使用原生的Javascript函数,这样能获得更好的性能。

7. 从Google载入jQuery框架

当你的应用正式上线的时候,请从Google CDN载入jQuery,因为用户可以从最近的地方获取代码。这样你可以减少服务器请求,而用户如果浏览其他网站,而它也使用Google CDN的jQuery时,浏览器就会立即从缓存中调出jQuery代码。

Javascript 相关文章推荐
javascript 语法基础 想学习js的朋友可以看看
Dec 16 Javascript
jQuery文本框(input textare)事件绑定方法教程
Apr 24 Javascript
Javascript获取CSS伪元素属性的实现代码
Sep 28 Javascript
JavaScript charCodeAt方法入门实例(用于取得指定位置字符的Unicode编码)
Oct 17 Javascript
Jquery 实现grid绑定模板
Jan 28 Javascript
JavaScript中split() 使用方法汇总
Apr 17 Javascript
jquery实现未经美化的简洁TAB菜单效果
Aug 28 Javascript
js匿名函数作为函数参数详解
Jun 01 Javascript
最常见的左侧分类菜单栏jQuery实现代码
Nov 28 Javascript
vue-resource 拦截器(interceptor)的使用详解
Jul 04 Javascript
详解Vuex中mapState的具体用法
Sep 28 Javascript
javascript自定义日期比较函数用法示例
Jul 22 Javascript
js 通过html()及text()方法获取并设置p标签的显示值
May 14 #Javascript
JQuery教学之性能优化
May 14 #Javascript
鼠标左键单击冲突的问题解决方法(防止冒泡)
May 14 #Javascript
javascript 中that的含义示例介绍
May 14 #Javascript
table insertRow、deleteRow定义和用法总结
May 14 #Javascript
jQuery 中国省市两级联动选择附图
May 14 #Javascript
全面兼容的javascript时间格式化函数(比较实用)
May 14 #Javascript
You might like
php合并数组array_merge函数运算符加号与的区别
2008/10/31 PHP
PHP parse_url 一个好用的函数
2009/10/03 PHP
PHP扩展编写点滴 技巧收集
2010/03/09 PHP
Linux服务器下PHPMailer发送邮件失败的问题解决
2017/03/04 PHP
jQuery+jqmodal弹出窗口实现代码分明
2010/06/14 Javascript
jquery事件机制扩展插件 jquery鼠标右键事件
2011/12/21 Javascript
如何使用Javascript正则表达式来格式化XML内容
2013/07/04 Javascript
JS实现简单的顶部定时关闭层效果
2014/06/15 Javascript
jQuery源码解读之hasClass()方法分析
2015/02/20 Javascript
分享有关jQuery中animate、slide、fade等动画的连续触发、滞后反复执行的bug
2016/01/10 Javascript
jQuery模拟360浏览器切屏效果幻灯片(附demo源码下载)
2016/01/29 Javascript
ionic 上拉菜单(ActionSheet)实例代码
2016/06/06 Javascript
AngularJS 入门教程之事件处理器详解
2016/08/19 Javascript
vue.js初学入门教程(1)
2016/11/03 Javascript
利用JQuery阻止事件冒泡
2016/12/01 Javascript
微信小程序 登录的简单实现
2017/04/19 Javascript
浅谈react-router HashRouter和BrowserRouter的使用
2017/12/29 Javascript
jQuery插件Validation表单验证详解
2018/05/26 jQuery
微信小程序实现带参数的分享功能(两种方法)
2019/05/17 Javascript
微信js-sdk 录音功能的示例代码
2019/11/01 Javascript
three.js利用射线Raycaster进行碰撞检测
2020/03/12 Javascript
解决vue项目axios每次请求session不一致的问题
2020/10/24 Javascript
Python urls.py的三种配置写法实例详解
2017/04/28 Python
Python中Selenium模拟JQuery滑动解锁实例
2017/07/26 Python
Python list与NumPy array 区分详解
2019/11/06 Python
python pillow库的基础使用教程
2021/01/13 Python
css3的过滤效果简单实例
2016/08/03 HTML / CSS
Bally巴利中国官网:经典瑞士鞋履、手袋及配饰奢侈品牌
2018/10/09 全球购物
思想政治自我鉴定
2013/10/06 职场文书
酒店经理职责
2014/01/30 职场文书
ktv周年庆活动方案
2014/08/18 职场文书
关于十八大的演讲稿
2014/09/15 职场文书
2014年党员学习“三严三实”思想汇报
2014/09/15 职场文书
2014年卫生保健工作总结
2014/12/08 职场文书
办公室行政主管岗位职责
2015/04/09 职场文书
2015年学校综合治理工作总结
2015/07/20 职场文书