当前位置:首页 > 日记 > 正文

jQuery性能优化技术分析

jQuery性能优化技术分析
本文详细分析了jQuery性能优化技术,供大家参考,具体分析如下:

首先,使用jQuery类库的最新版本

与以前版本相比,新版本的jQuery将进行bug修复和一些优化。但是,需要注意的是,在更改版本后,不要忘记测试代码,毕竟有时它并不是完全向后兼容的。

两。使用合适的选择器

jQuery选择器对最坏情况的最佳性能如下:

ID选择器,如$(' # ID,上下文)

标签选择器,如$('p',上下文)

类选择器,如$(类、上下文)

属性选择符,例如$({属性、上下文)

伪类选择器,如$('隐藏',上下文)

补充和注意事项:

将上下文上下文指定给选择器,它可以减少位置元素的范围

避免ID,ID重复错误代码:var el = $(美元的#列表# item1的)

避免标签或类改性剂的ID,错误代码:var el = $(美元'ul # item1的)

如果你使用属性选择器来指定标签选择器属于,它可以加快访问速度,正确的代码:var el = $(${标题=链接)

三。缓存对象

这里的表现是坏的:
$(#家),Css(…);
$(#家)。Bind(听到咔哒声,功能)({ });
$(#家),AddClass(…);
说明:jQuery将在创建每个选择器的过程中发现DOM,耗时和性能。

更好的方法:
VaR(# HomeLink =美元美元的家,上下文);
homelink.css美元(…);
homelink.bind美元(听到咔哒声,功能)({ });
homelink.addclass美元(…);
注意:不要让相同的选择器多次出现在代码中。

四,循环中的DOM操作

使用jQuery可以轻松地添加、删除或修改DOM节点,但在某些循环中,例如为()、()或$(),下面有一个示例。
var list = $(美元的#列表);
对于(var i = 0;i < 100;i + +){
list.append美元('+我+的);
}
说明:添加李节点100次,此操作的性能不低,所以更好的方法是在插入DOM树之前创建所有要添加的节点,然后立即将它们添加到DOM树中:
var list = $(美元的#列表),
片段=;
对于(var i = 0;i < 100;i + +){
片段++;
}
list.append美元(片段);
五。使用jQuery对象数组

使用jQuery选择器获得结果是一个jQuery对象,在性能方面,建议使用一个简单的while循环,而不是$(),这使代码更快。

还要注意,检查长度是检查jQuery对象是否存在的一种方法。
var list = $(美元的#列表);
如果($ list){总是真的
做某事
}
如果($列表。长度)以元素返回true
做某事
}
六。事件代理

每一个Javascript事件,如点击,鼠标悬停,冒泡到父节点。这将是有用的当我们需要调用同一个函数的多个元素。






第一条为$(var $ # item1的),
2 = $(美元的# 2),
$(# Item3 Item3 =美元);


item1.click美元(函数(){…});
item2.click美元(函数(){…});
item3.click美元(函数(){…});

说明:这样,如果有100里,100个事件必然要绑定,显然,不科学,损失很多。

更好的方法是绑定事件到李父母UL,然后获取当前元素的点击通过event.target。
var list = $(美元的#列表);
list.click美元(功能(e){)
VaR(e.target currentItem美元=美元); / / e.target捕获当前触发事件目标元素

});
七。把你的代码转换成jQuery插件

如果您每次花时间编写类似的jQuery代码,可以将类似代码的一部分考虑为插件,它可以使代码更好地重用,并且可以帮助您有效地组织代码。

八。使用Javascript数组连接()来连接字符串

使用联接()方法有助于在处理长字符串时优化性能。
var arr = { };
对于(var i = 0;i < 100;i + +){
ARR {我} =+我+;
}
list.html美元(arr.join('));
九。合理利用HTML5的数据属性

HTML5的数据属性可以帮助我们插入数据,尤其是前端和后端之间的数据交换。jQuery的数据()方法利用HTML5的属性,来自移动数据。




VaR(#美元美元公司= '信息');
无功infoindex = infolink.data美元('info-index);
变量类型= $ infolink.data('linkinfo);
十。尽可能使用本机Javascript方法。

如:
$(这)。Css(色彩:'蓝色');
优化:
this.style.color = '蓝色';
如:
$('');
优化:
$(document.createelement('p'));
十一。压缩Javascript

使用压缩工具压缩Javascript文件。

当一个项目发布时,应该使用压缩版本的Javascript文件。

希望本文能对大家的jQuery程序设计有所帮助。

相关文章

创意橙子和苹果的PS复合图

创意橙子和苹果的PS复合图

复合,创意,橙子,电脑软件,PS,本教程是介绍橙子和苹果创意合成PS的使用图片,教程综合效果很好,很特别,也不是很难,推荐,感兴趣的朋友可以跟着教程学习或者开发自己的思路,设计一种创造性的综合方法。 本教程是介绍一个朋友谁使用PS结合创意橙子和…

QQ如何超退订QQ技巧

QQ如何超退订QQ技巧

退订,技巧,电脑软件,QQ,何超,超级QQ是一种高贵的身份,拥有超级QQ的用户享有很多特权,但他们每月都要绑定一部手机,很多用户一开始就对超级QQ感兴趣,但是一旦打开了,他们会觉得超级QQ不有趣,也不贵,所以他们想退订。以下萧边将分享超级QQ的退订方法…

在CorelDRAW12颜色偏差求解

在CorelDRAW12颜色偏差求解

偏差,颜色,电脑软件,本教程的解决方案是引入了Coreldraw12朋友图片的颜色,我相信很多朋友都有这样的问题,当使用CDR,所以今天为大家讲解一下,遇到同样的问题,但不知道如何解决的朋友可以参考哦 今天早上打开CorelDRAW12作图时,画面的色彩变化,很亮…

PHP实现的简单日志写入功能

PHP实现的简单日志写入功能

日志,简单,功能,电脑软件,PHP,本文演示了PHP实现的简单日志写入功能,供大家参考,具体实现方法如下: 功能日志($ logthis){ file_put_contents('logfile。日志,日期(当前H:我:)。logthis美元。 file_append,lock_ex |); } 对于新的行/使用窗口,只需在Linux…

ps字体小技巧详解

ps字体小技巧详解

字体,小技巧,详解,电脑软件,ps,以下萧边给你带来了一个意识层次的PS字体。这是一个很好的教程。非常适合初学者学习和推荐。喜欢的朋友可以一起学习教程,希望能帮到你。 ps字体小技巧详解 结果如下 具体步骤如下: 步骤1:打开ps并创建一个合适…

插入一个表格PPT基本教程,可以在Pow

插入一个表格PPT基本教程,可以在Pow

操作,排序,教程,表格,电脑软件,通常,PowerPoint幻灯片中插入的表格不能操作和排序,但是通过简单的修改,这个功能可以很容易地实现。 单击插入菜单中的powerpoint;命令,打开插入对象对话框;;微软Word,单击文件;按钮出现在文字编辑框的幻灯片,也出现在…

javascript复选框选择最终解决方案

javascript复选框选择最终解决方案

复选框,解决方案,选择,电脑软件,javascript,在发展过程中,我们经常使用复选框来选择,一般情况下,如在一些数据绑定控件GridView 在中继器的情况下,复选框控件放置在中继器的标头和项目中。 ('chkall onclick=核实,这); ' ('chkall onclick=核…

感伤谈个性签名签名

感伤谈个性签名签名

感伤,个性签名,电脑软件,当你悲伤的时候,你可以在悲伤的时候听情歌,悲伤的话语,用悲伤的心情表达你的心声。让我们一起看一看。总有一件事你喜欢。 1。希望你和我能遇到一个不需要维护的友谊。 2。最深的绝望来自最深爱的人。 三.我以为我足够…

美丽的元宵节的金色图案立体字PS图

美丽的元宵节的金色图案立体字PS图

图象处理,软件设计,立体字,元宵节,图案,文字由图案、表面特征和立体表面三部分组成,图案和表面的设计基本上是相似的,并与多层的图层重叠。 The text is composed of three parts: the pattern, the surface character and the stereoscopic…

关于QQ令牌QQ常见问题的常见问题

关于QQ令牌QQ常见问题的常见问题

常见问题,令牌,电脑软件,QQ,1,QQ令牌一代的使用寿命是多久 答:QQ令牌一代的寿命取决于电池的寿命。由于电池是一次性的,使用寿命约为21个月,即,通常在货架寿命激活的QQ令牌可以使用大约21个月。 2。在什么情况下需要绑定QQ令牌 答:当QQ令牌损坏…

有趣,有趣,有趣,个性签名和个性签名

有趣,有趣,有趣,个性签名和个性签名

有趣,个性签名,电脑软件,刷牙用高露洁让你从海绵宝宝有一个微笑。 我不是来自废墟,我只是喜欢躲在角落里看着你。 你不玩视频的速度,挑战安哥拉黑色技术。 贝壳的愿望是制造一个屎球。 现在我们要做一个考证。 不敢去爱每一个女人,爱的很深,看…

如何创建一个宏Word2003Word2003教

如何创建一个宏Word2003Word2003教

教程,创建一个,电脑软件,宏记录器可以记录一系列的操作来创建宏(宏:一个或一组操作,可用于自动执行任务。Visual Basic应用程序编程语言可以用来记录宏。)它也可以用在Visual Basic编辑器(Visual Basic编辑器):为写应用程序的代码和处理新的Visual…