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 ...
随机推荐
- iOS开发中的小技巧 - 多张图合成一张
iOS多张图片合成一张 本文来源于http://www.cnblogs.com/yang-guang-girl/p/5197099.html,感谢博主 代码 #import "RootVie ...
- 多线程开发之三 GCD
NSThread.NSOperation.GCD 总结: 无论使用哪种方法进行多线程开发,每个线程启动后并不一定立即执行相应的操作,具体什么时候由系统调度(CPU 空闲时就会执行) 更新 UI 应该在 ...
- 大杂烩 -- 简析TCP的三次握手与四次分手
基础大杂烩 -- 目录 -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- - ...
- trace-cmd使用方法
使用trace-cmd有的时候没有来得及使用ctrl+c, 导致出现多个trace.dat.cpu*, 可以使用下面的办法来手动合并trace.dat If a crash happened on a ...
- scala中隐式转换之隐式类
/** * Created by root * Description :隐式类: * 1.其所带的构造参数有且只能有一个:并且构造器的参数是转换之前的对象 * 2.隐式类必须被定义在类,伴生对象和包 ...
- git合并分支上指定的commit
merge 能够胜任平常大部分的合并需求.但也会遇到某些特殊的情况,例如正在开发一个新的功能,线上说有一个紧急的bug要修复.bug修好了但并不像把仍在开发的新功能代码也提交到线上去.这时候也许想要一 ...
- iOS 判断两个日期之间的间隔
本文转载至 http://www.cnblogs.com/Ewenblog/p/3891791.html 两个时间段,判断之间的相差,做一些时间范围限制使用 NSDateFormatter * d ...
- Linux 下配置 Git 操作免登录 ssh 公钥
cd ~/.ssh ssh-keygen -t rsa -b 4096 -C "your_email@example.com" 然后回车三连击- 可以看到当前目录下多出两个文件 i ...
- Android Studio设置代理,解决检查更新gradle信息的问题
Android Studio是基于JetBrains公司的IDEA开发的,Android Studio里的项目都是由Gradle构建的,Gradle集合了Ant和Maven的优点,又解决了他们的缺点, ...
- Android 更改按钮样式 Button Styles
extends:http://stackoverflow.com/questions/26346727/android-material-design-button-styles I will a ...