jq优化
1.使用链式写法
$('div').find('h3').eq(2).html('Hello');
采用链式写法时,jQuery自动缓存每一步的结果,因此比非链式写法要快。根据测试,链式写法比(不使
用缓存的)非链式写法,大约快了25%。
2.事件的委托处理(Event Delegation)
javascript的事件模型,采用"冒泡"模式,也就是说,子元素的事件会逐级向上"冒泡",成为父元素的事件。
利用这一点,可以大大简化事件的绑定。比如,有一个表格(table元素),里面有100个格子(td元素),现在
要求在每个格子上面绑定一个点击事件(click),请问是否需要将下面的命令执行100次?
$("td").on("click", function(){ $(this).toggleClass("click"); });
回答是不需要,我们只要把这个事件绑定在table元素上面就可以了,因为td元素发生点击事件之后,
这个事件会"冒泡"到父元素table上面,从而被监听到。
因此,这个事件只需要在父元素绑定1次即可,而不需要在子元素上绑定100次,从而大大提高性能。
这就叫事件的"委托处理",也就是子元素"委托"父元素处理这个事件。
$("table").on("click", "td", function(){ $(this).toggleClass("click"); });
3.用对选择器
(1)最快的选择器:id选择器和元素标签选择器
遇到这些选择器的时候,jQuery内部会自动调用浏览器的原生方法(比如getElementById()),所以它们的执行速度快。
(2)较慢的选择器:class选择器
$('.className')的性能,取决于不同的浏览器。
Firefox、Safari、Chrome、Opera浏览器,都有原生方法getElementByClassName(),所以速度并不慢。但是,IE5-IE8都
没有部署这个方法,所以这个选择器在IE中会相当慢。
4.子元素和父元素的关系
$('.child', $parent) $parent.find('.child') $parent.children('.child') $('#parent > .child') $('#parent .child') $('.child', $('#parent'))
(1) $('.child', $parent)·
这条语句的意思是,给定一个DOM对象,然后从中选择一个子元素。jQuery会自动把这条语句转成$.parent.find('child'),
这会导致一定的性能损失。它比最快的形式慢了5%-10%。
(2) $parent.find('.child')
这条是最快的语句。.find()方法会调用浏览器的原生方法(getElementById,getElementByName,getElementByTagName
等等),所以速度较快。
(3) $parent.children('.child')
这条语句在jQuery内部,会使用$.sibling()和javascript的nextSibling()方法,一个个遍历节点。它比最快的形式大约慢50%。
(4) $('#parent > .child')
jQuery内部使用Sizzle引擎,处理各种选择器。Sizzle引擎的选择顺序是从右到左,所以这条语句是先选.child,然后再一个
个过滤出父元素#parent,这导致它比最快的形式大约慢70%。
(5) $('#parent .child')
这条语句与上一条是同样的情况。但是,上一条只选择直接的子元素,这一条可以于选择多级子元素,所以它的速度更慢,
大概比最快的形式慢了77%。
(6) $('.child', $('#parent'))
jQuery内部会将这条语句转成$('#parent').find('.child'),比最快的形式慢了23%。
所以,最佳选择是$parent.find('.child')。而且,由于$parent往往在前面的操作已经生成,jQuery会进行缓存,所以进一步加
快了执行速度。
jq优化的更多相关文章
- JQ优化性能
一.注意定义jQuery变量的时候添加var关键字这个不仅仅是jQuery,所有javascript开发过程中,都需要注意,请一定不要定义成如下:$loading = $('#loading'); / ...
- Jquery 多行拖拽图片排序 jq优化
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- jq实现点击表格无刷新修改数据,优化版
<!-------------------修改密码-------------------------- > $("#pwd").live("click&quo ...
- animatescroll.min.js ~~~~ jq滚动效果 优化target自定义方法
$(".meun>div[name='meun_nav']>a").eq(1).on("click",function(){ $("bod ...
- 应用r.js来优化你的前端
r.js是requireJS的优化(Optimizer)工具,可以实现前端文件的压缩与合并,在requireJS异步按需加载的基础上进一步提供前端优化,减小前端文件大小.减少对服务器的文件请求.要使用 ...
- webpack 使用优化指南
前言 本文不是webpack入门文章,如果对webpack还不了解,请前往题叶的Webpack入门,或者阮老师的Webpack-Demos. 为什么要使用Webpack 与react一类模块化开发的框 ...
- webpack使用优化(基本篇)
转自:https://github.com/lcxfs1991/blog/issues/2 前言 本文不是webpack入门文章,如果对webpack还不了解,请前往题叶的Webpack入门,或者阮老 ...
- jq 个性的隔行变色
效果图大致这样: 我的html格式部分这样:/*不过他们都说我的dom结构不太合理,同意.BUT,我就是不想写表格而写成的这样的,所以后面jq部分也要迁就了*/ <div class=&qu ...
- jq仿淘宝放大镜插件
html部分 //小图 <div id="photoBox"> <img src="图片路径" width="400" h ...
随机推荐
- vue事件处理器
1.监听事件 可以用 v-on 指令监听 DOM 事件来触发一些 JavaScript 代码. 示例: <div id="example-1"> <button ...
- form表单下的button按钮会自动提交表单的问题
form表单下的button按钮会自动提交表单的问题 2017年01月05日 18:02:44 蓝色水 阅读数:18012更多 个人分类: asp.net form表单下的按钮在没有指定type类 ...
- Mac/Linux如何查找应用所安装路径
Linux.Mac中查看某 个软件的安装路径(地址)有时显得非常重要.比如某个文件的快速启动项被删除,或者你要建立快速启动项,或者想删除. 添加安装文件等等,很多地方都要用到查案文件安装路径的命令. ...
- 第三百九十八节,Django+Xadmin打造上线标准的在线教育平台—生产环境部署CentOS6.5系统环境设置
第三百九十八节,Django+Xadmin打造上线标准的在线教育平台—生产环境部署CentOS6.5系统环境设置 1.Linux安装配置 注意事项: 虚拟机网卡桥接模式 不要拨VPN 如果,网络怎么都 ...
- [IR] Word Embeddings
From: https://www.youtube.com/watch?v=pw187aaz49o Ref: http://blog.csdn.net/abcjennifer/article/deta ...
- 深入理解 Java 虚拟机之学习笔记(1)
本书结构: 从宏观的角度介绍了整个Java技术体系.Java和JVM的发展历程.模块化,以及JDK的编译 讲解了JVM的自动内存管理,包括虚拟机内存区域的划分原理以及各种内存溢出异常产生的原因 分析了 ...
- linux 下 sublime配置
sublime3 import urllib.request,os; pf = 'Package Control.sublime-package'; ipp = sublime.installed_p ...
- Code Labels
Code Labels Code labels are three-letter codes with which commit messages can be prefixed. CODE Labe ...
- django高并发优化
我开始对web开发产生了兴趣,并决定自己也尝试开发一个网站.在此之前,我做过3年的java application的开发,对web开发应该算一无所知.在比较了java,php,ror,和python后 ...
- db2 backup export
备份命令: db2 backup db test to /db2data/ 监控备份进度: db2 list utilities show detail <-进度 检测备份文件的有效性: db2 ...