JQuery 的优先级
1.使用最新的jQuery版本
2.用对选择器.
2.1 jquery最快的选择器是ID选择器:来源于js的getElementById()方法
注释:需要选择多个元素,必然涉及到Dom遍历和循环,为了提交性能,建议从最近的ID开始继承
例如:<div id="div"><ul id="ul"><li class="on">1</li><li class="off">2</li></ul></div> var ul=$("#ul")
2.2 第二快的选择器是tag(标签)选择器,它是来自原生getElementsByTagName()方法
如上例子:var light=$("#ul input.on")
2.3 较慢的选择器 class 选择器
$('.className')的性能,取决于不同的浏览器 moz webkit safari o 浏览器都有原生方法:getElementByClassName()所以速度并不慢
但是IE5-IE8都没有会相当慢
2.4 最慢的选择器:伪类选择器和属性选择器:原因:因为没有针对他们的原生方法,但是一些新的浏览器版本有:queryselector()和
queryselectorAll()放来提高性能
伪类选择器:$(':hidden')
属性选择器:$('attribute=value') attribute:属性名:id、name、class... value 值 例如:id='ss'
3.理解子元素和父元素的关系
var list=$("#list");
【1.$('.child', $parent)2.$parent.find('.child')3.$parent.children('.child')4.$('#parent > .child')5.$('#parent .child')6.
$('.child', $('#parent'))】
语句: $('.child', $parent)
解释:这条语句的意思是,给定一个DOM对象,然后从中选择一个子元素。jQuery会自动把这条语句转成$.parent.find('child'),这会导致一定
的性能损失。它比最快的形式慢了5%-10%。
转化:$('.child',$('.ss').parent)=$('.child', $parent)[.child与.ss是同级]
$('.child', $parent)=$('.child', list)
语句:$parent.find('.child')
解释:这条是最快的语句。.find()方法会调用浏览器的原生方法(getElementById,getElementByName,getElementByTagName等等),所以速
度较快。
转化: $parent.find('.child')= $(list).find('.test');
语句:$parent.children('.child')
解释:这条语句在jQuery内部,会使用$.sibling()和javascript的nextSibling()方法,一个个遍历节点。它比最快的形式大约慢50%。
转化: $parent.children('.child') =$test = $(list).children('.test');
语句:$('#parent > .child')
解释:jQuery内部使用Sizzle引擎,处理各种选择器。Sizzle引擎的选择顺序是从右到左,所以这条语句是先选.child,然后再一个个过滤出父
元素#parent,这导致它比最快的形式大约慢70%。
转化:$('#parent > .child')=var $test = $('#list > .test');
语句:$('#parent .child')
解释:这条语句与上一条是同样的情况。但是,(上一条只选择直接的子元素,这一条可以于选择多级子元素),所以它的速度更慢,大概比最
快的 形式慢了77%。
转化:var $test = $('#list .test');
语句:$('.child', $('#parent'))
解释;jQuery内部会将这条语句转成$('#parent').find('.child'),比最快的形式慢了23%。
转化:var $test = $('#list').find('.test');
总结:除了优先级后,很重要的一个原因是是否 缓存了。
同时,多级和chidren的使用也会有导致很大的影响
4.不要过度的使用jQuery
最简单的语句 js至少比$(快10多倍)
5.做好缓存(很重要)
var cached=jQuery('#top')
根据测试,缓存比不缓存快了2-3倍
5.1.将jQuery对象缓存起来:永远不要让相同的选择器在你的代码里出现多次
错误的写法:
例如:$("#traffic_light input.on").bind("click", function(){ ... });
$("#traffic_light input.on").css("border", "1px dashed yellow");
正确的写法:
例如:var $active_light = $("#traffic_light input.on");
$active_light.bind("click", function(){ ... });
$active_light.css("border", "1px dashed yellow");
更高效的写法,链式写法
$active_light.bind("click", function(){ ... }).css("border", "1px dashed yellow")
如果打算在其他函数中使用Jquery对象,则必须把它们缓存到全局环境中
例如:window.$my={window.$my = { head : $("head"), traffic_light : $("#traffic_light"), traffic_button :
$("#traffic_button") }; function do_something(){ }
当在函数内部时,可以继续将查询存入到全局对象中去$my.cool_results = $("#some_ul li");
将全局函数作为一个普通的jq对象去使用
$my.other_results.css("border-color", "red");
6.使用链式写法
$('div').find('h3').eq(2).html('Hello');
采用链式写法时,jQuery自动缓存每一步的结果,因此比非链式写法要快。根据测试,链式写法比(不使用缓存的)非链式写法,大约快了25%。
7.事件的委托处理(冒泡)
初级:每个每个格子绑定一个点击事件
$("td").on("click", function(){
alert(“司法所地方”)
});
初级优化:原理:这个事件只需要在父元素绑定1次即可,而不需要在子元素上绑定100次,从而大大提高性能。这就叫事件的”委托处理”,也就
是子元素”委托”父元素处理这个事件
$(“table”).delegate(“td”, “click”, function(){
alert("斯蒂芬森飞洒")
});
更好的写法,则是把事件绑定在document对象上面。
$(document).on("click", "td", function(){ $(this).toggleClass("click"); });document=指定的id或class
8.少改动DOM结构
(1)改动DOM结构开销很大,因此不要频繁使用.append()、.insertBefore()和.insetAfter()这样的方法。
如果要插入多个元素,就先把它们合并,然后再一次性插入。根据测试,合并插入比不合并插入,快了将近10倍。
(2)如果你要对一个DOM元素进行大量处理,应该先用.detach()方法,把这个元素从DOM中取出来,处理完毕以后,再重新插回文档。根据测试,
使用.detach()方法比不使用时,快了60%。
(3)如果你要在DOM元素上储存数据,不要写成下面这样:
var elem = $(‘#elem');
elem.data(key,value);
9.正确处理循环
循环总是一种比较耗时的操作,如果可以使用复杂的选择器直接选中元素,就不要使用循环,去一个个辨认元素。
javascript原生循环方法for和while,要比jQuery的.each()方法快,应该优先使用原生方法。
网站:http://www.jb51.net/article/25530.htm
http://caibaojian.com/jquery-performance-optimization.html
http://www.2cto.com/kf/201308/238441.html
JQuery 的优先级的更多相关文章
- CSS优先级问题以及jQuery中的.eq()遍历方法和:eq()选择器的差别
在写一个TAB选项卡的时候遇到几个有意思的问题,记录下来 先把代码贴出来 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transition ...
- CSS优先级
一.CSS代码出现的几个位置 多重样式(Multiple Styles):如果外部样式.内部样式和内联样式同时应用于同一个元素,就是使多重样式的情况. 一般情况下,优先级如下:(外部样式)Extern ...
- Python 【第八章】:JavaScript 、Dom、jQuery
JavaScript 放置位置 body内部最下面,这样可以避免javascript链接失效时,长时间加载不到页面html内容 变量: var a =123 局部变量 a = 123 全局变量 作用域 ...
- (function($){...}) (jQuery)
这里实际上是匿名函数 function(arg){...}这就定义了一个匿名函数,参数为arg 而调用函数 时,是在函数后面写上括号和实参的,由于操作符的优先级,函数本身也需要用括号,即:(funct ...
- jQuery 中 jQuery(function(){})与(function(){})(jQuery) 的区别
$(document).ready(function(){ // 在这里写你的代码... }); 在DOM加载完成时运行的代码 可以简写成 jQuery(function(){ // 在这里写你的代码 ...
- jquery样式篇
1.jquery: 1.1简介 jquery是一个轻量级的javascript库.版本号分1.x版本和2.x版本,2.x版本不再支持IE6 7 8,而更好的支 持移动端开发. 每一个版本分为开发版和压 ...
- jquery事件核心源码分析
我们从绑定事件开始,一步步往下看: 以jquery.1.8.3为例,平时通过jquery绑定事件最常用的是on方法,大概分为下面3种类型: $(target).on('click',function( ...
- Jquery中的(function($){...})(jQuery)
当你第一眼看到“(function($){...})(jQuery)”的时候,你有什么感觉?呵呵呵,我当时还是止不住的从心底里骂了一句——操,这他妈什么劳什子.时过境迁,对于现在无比倚重Jquery的 ...
- 解密jQuery事件核心 - 委托设计(二)
第一篇 http://www.cnblogs.com/aaronjs/p/3444874.html 从上章就能得出几个信息: 事件信息都存储在数据缓存中 对于没有特殊事件特有监听方法和普通事件都用ad ...
随机推荐
- MQTT基础概念介绍
https://blog.csdn.net/pipinet123/article/details/60866901 源博客地址:http://blog.csdn.net/pipinet123 MQTT ...
- (E2E_L2)GOMfcTemplate在vs2017上的运行并融合Dnn模块
GOMfcTemplate一直运行在VS2012上运行的,并且开发出来了多个产品.在技术不断发展的过程中,出现了一些新的矛盾:1.由于需要使用DNN模块,而这个模块到了4.0以上的OpenCV才支持的 ...
- Postgresql常用函数整理
一.字符串函数 1.函数:string || string(string || non-string) 说明:字符串(或与非字符串)连接 示例: 2.函数:char_length(string) 说明 ...
- Python3基础 bool True为1 False为0
Python : 3.7.3 OS : Ubuntu 18.04.2 LTS IDE : pycharm-community-2019.1.3 ...
- 5-1 嵌套while循环应用
package com.imooc; public class forDemo { public static void main(String[] args) { ;//外重循环的循环变量: ;// ...
- sklearn使用高斯核SVM显示支持向量
import graphviz import mglearn from mpl_toolkits.mplot3d import Axes3D from sklearn.datasets import ...
- 教孩子学编程 Python
教孩子学编程 Python 目录 第1 章 Python 基础:认识环境 111 认识Python 312 用Python 编写程序 513 运行Python 程序 514 本章小结 615 编程 ...
- asp.net Forms身份验证详解
在做网站的时候,都会用到用户登录的功能.对于一些敏感的资源,我们只希望被授权的用户才能够访问,这让然需要用户的身份验证.对于初学者,通常将用户登录信息存放在Session中,笔者在刚接触到asp.ne ...
- 看烦了VS2012的黑白调调了吗?换
VS2012的默认深色主题的确让整个IDE看起来很有气场,而且深色的主题保护眼睛,还是蛮不错的.但是看久了也会烦啊.虽然说重要的不是IDE看起来怎么样,而是写出来的代码质量怎么样,但一个好的环境也是会 ...
- 图解 perspective && perspective-origin && transform3d && transform-origin
perspective && perspective-origin perspective是物体相对于画布的视距距离 perspective-origin是物体在画布位置的中心视点 t ...