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 indexOf函数使用说明
Jul 03 Javascript
兼容FireFox 的 js 日历 支持时间的获取
Mar 04 Javascript
javascript 可以拖动的DIV(二)
Jun 26 Javascript
js 获取时间间隔实现代码
May 12 Javascript
jquery向上向下取整适合分页查询
Sep 06 Javascript
jquery实现Li滚动时滚动条自动添加样式的方法
Aug 10 Javascript
Vue 2.0入门基础知识之内部指令详解
Oct 15 Javascript
浅谈JS 数字和字符串之间相互转化的纠纷
Oct 20 Javascript
ES6学习笔记之map、set与数组、对象的对比
Mar 01 Javascript
layui select动态添加option的实例
Mar 07 Javascript
Node.js+Express+Mysql 实现增删改查
Apr 03 Javascript
微信小程序基于canvas渐变实现的彩虹效果示例
May 03 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
火车头采集器3.0采集图文教程
2007/03/17 PHP
PHP抓屏函数实现屏幕快照代码分享
2014/01/02 PHP
php遍历文件夹和文件列表示例分享
2014/03/11 PHP
PHP编译安装时常见错误解决办法
2015/05/28 PHP
php利用smtp类实现电子邮件发送
2015/10/30 PHP
[原创]PHP字符串中插入子字符串方法总结
2016/05/06 PHP
PHP MVC框架skymvc支持多文件上传
2016/05/26 PHP
强大的jquery插件jqeuryUI做网页对话框效果!简单
2011/04/14 Javascript
获取body标签的两种方法
2011/10/13 Javascript
JS在TextArea光标位置插入文字并实现移动光标到文字末尾
2013/06/21 Javascript
Javascript 按位与运算符 (&)使用介绍
2014/02/04 Javascript
jQuery Migrate 1.1.0 Released 注意事项
2014/06/14 Javascript
详解Vue 事件修饰符capture 的使用
2017/12/29 Javascript
vue-swiper的使用教程
2018/08/30 Javascript
详解Vue项目部署遇到的问题及解决方案
2019/01/11 Javascript
详解使用Nuxt.js快速搭建服务端渲染(SSR)应用
2019/03/13 Javascript
javascript实现小型区块链功能
2019/04/03 Javascript
对python打乱数据集中X,y标签对的方法详解
2018/12/14 Python
Django Celery异步任务队列的实现
2019/07/24 Python
Python如何把Spark数据写入ElasticSearch
2020/04/18 Python
python脚本第一行如何写
2020/08/30 Python
Python实现Word文档转换Markdown的示例
2020/12/22 Python
python 实现逻辑回归
2020/12/30 Python
教师岗位职责范本
2013/12/29 职场文书
学校元旦晚会方案
2014/02/19 职场文书
网络编辑岗位职责
2014/03/18 职场文书
求职信格式要求
2014/05/23 职场文书
小学生运动会通讯稿
2014/09/23 职场文书
党支部先进事迹材料
2014/12/24 职场文书
大学校园招聘会感想
2015/08/10 职场文书
2015年度工程师评职称工作总结
2015/10/14 职场文书
幼儿园托班开学寄语(2016秋季)
2015/12/03 职场文书
如何让vue长列表快速加载
2021/03/29 Vue.js
详解RedisTemplate下Redis分布式锁引发的系列问题
2021/04/27 Redis
Mysql中调试存储过程最简单的方法
2021/06/30 MySQL
Mac电脑OS系统下安装Nginx的详细教程
2022/04/14 Servers