提升效率的JQUERY(转)
摘要
本文部分整理了JQuery性能提升的一些方法,内容综合自artzstudio,viralpatel,htmlgoodies等网站,希望对大家有所帮助。这些规则虽然简单,但如果不遵循就会影响程序执行效率,增加浏览器的负担。
1 优先使用ID选择器和以ID开头的选择器
//ID选择器性能最佳 $("#myDiv") //以ID开头,提高效率 $("#myDiv .red")
2 类选择之前加元素选择提高效率
//元素(tag)选择器效率仅次于ID选择器,优于类(class)选择器 $("#myList li.active")
3 缓存JQuery对象
//错误,做了两次选择 $("#myList li").css('border','3px'); $("#myList li").css('color','red'); //缓存对象,提高效率 var $li = $("#myList li") $li.css('border','3px'); $li.css('color','red');
4 利用链式命令,减少代码量
//链式命令,减少代码量 $("#myList li").css('border','3px').css('color','red');
5 使用子查询
//一次全局查找加两次子查询优于两次全局查找 var $list = $("#myList"); var $actives = $list.find('li.active'); var $in_actives = $list.find('li.in_active');
6 减少DOM的操作次数(DOM操作很慢)
//操作一次DOM,而不要操作100次 var lis = ""; for (var i=0, i<100; i++) {lis += '<li>' + i + '</li>'; } $('#myList').html(lis);
7 许多节点调用相同的函数时,利用事件委托
//效率较低 $('#myList li').bind('click', function(){ }); //效率较高 $('#myList').bind('click', function(e){if ($(e.target).nodeName === 'LI') {} });
8 把不重要的功能(如拖放,效果等)放在$(window).load执行
//不要把所有都放在$(document).ready中 $(window).load(function(){// 在页面所有对象加载完执行 });
9 较长的字符串拼接不要使用concat(),要使用join()
//join()比concat()效率更好 var list_items = []; for (var i=0; i<=10; i++) { list_items[i] = '<li>Item '+i+'</li>'; } $('#myList').html(list_items.join(''));
10 使用for循环,不要使用$.each循环
//js原生方法效率更好 var js_array = new Array (); for (var i=0; i<10000; i++) {js_array[i] = i; }
11使用元素前,先检查其是否存在
//检查id为myDiv的元素是否存在 if($("#myDiv").length) { }
12 函数总是返回false
$('#myDiv').click (function () {return false; });
13 使用html5的data属性
//<div id="myDiv" data-value="111"></div> $("#myDiv").data("value");
14 使用最新的版本及CDN
15 压缩你的JS代码
16 保持代码规范整洁
转载于:https://www.cnblogs.com/acuier/p/6851785.html
提升效率的JQUERY(转)相关推荐
- SpringBoot 【IDEA热部署+浏览器禁用缓存】迅速提升效率
SpringBoot微服务写页面,每次都需要重启才生效,使用[IDEA热部署+浏览器禁用缓存]迅速提升效率: 参考 https://blog.csdn.net/qq_27416233/article/ ...
- paip.提升效率--调试--日志系统日志参数含义---python
paip.提升效率--调试--日志系统日志参数含义---python #同时向控制台和文件输出日志 #日志参数含义 import logging log_format = '%(filename)s ...
- 爱奇艺谢丹铭:用AI让创作者提升效率,让消费者简单快乐丨MEET2021
编辑部 整理自 MEET 2021 量子位 报道 | 公众号 QbitAI AI技术,究竟能在哪些行业实现规模化应用? 这是视频行业面对AI浪潮,交出的一份答卷: 素材智能检索.老电影修复.音色克隆. ...
- Atitit 提升效率 界面gui方面的前后端分离与cbb体系建设 规范与推荐标准
Atitit 提升效率 界面gui方面的前后端分离与cbb体系建设 规范与推荐标准 1. 界面gui方面的前后端分离重大意义1 2. 业务逻辑也适当的迁移js化1 3. 常用分离方法2 3.1. 页面 ...
- php双层foreach,php 双层foreach 如何提升效率
https://segmentfault.com/q/1010000011609822 两个数组都是近万条元素 切都是二维数组 请问如何优化提高效率 php版本 5.3 foreach ($array ...
- 几个有用的word小技巧,保准提升效率~
这几天改报告改到头秃.年底了,实验室各种项目在结项,作为一名研一新生,理所应当地承担起了体力活的工作.主要负责项目报告的研究背景调研.报告汇总.格式调整等. 格式调整,看起来非常简单的一项工作,却是最 ...
- paip.提升效率---提升绑定层次--form绑定取代field绑定
paip.提升效率---提升绑定层次--form绑定取代field绑定 =================== 编辑form中,常常需要,绑定一个对象到个form.. 传统上要绑定field开始. ...
- javascript option 菜单图标_苹果电脑上神奇的Option键 巧用option键提升效率
Option键 是苹果电脑一个非常有用的键option键主要的用途,是绕过一些你不想要的对话框.巧用option键可以提升效率,喜欢的朋友收藏起来吧! Option键神奇功能 拖拽粘贴 Mac电脑上拖 ...
- 提升效率的几个小绝招
提升效率的几个小绝招 掌握以下小绝招 提升开发效率 自动编译与运行 alt shift x 右下脚会弹出 再点一下j 即可 自动代码缩进 alt+shift+f 自动生成main入口代码 快捷注释 c ...
最新文章
- 5G+AI:影响未来的新趋势
- 一天搞定HTML----a标签02
- 用Python找出数组中出现次数超过一半的数
- CentOS编译安装PHP 7.0
- iOS __block 与 __weak
- CentOS6配置部署Zabbix监控
- [css] 说说你对媒体查询的理解
- 几种限流器(RateLimiter)原理与实现
- 在Data Lake Analytics中使用视图 1
- JS组件系列——Bootstrap Table 表格行拖拽
- saltstack 任务管理和集群(三)
- 用Microsoft Enterprise library DAAB模块的困惑
- 去年买彩票中了400多万
- android emulator虚拟设备之qemu pipe分析(三)
- 动态修改UINavigationBar的背景色
- mysql数据迁移性能_百万级MySQL的数据量,该如何快速的完成数据迁移?
- 英语foteball足球foteball单词
- Win10+Vmvare+Ubuntu16.04lts的主机为英伟达TX2重装Ubuntu18.04操作系统
- 重复文件快速查找工具(duplicate file finder plus中文版) v14.0
- Zephyr参考文档