jquery 功能优化

1.总是从ID选择器开始继承。
在jQuery中最快的选择器是ID选择器,因为它直接来自于javascript的getelementById()方法。
例如:
<div id="warp">
<div id="content">

<ul>

<li>1</li>

<li>2</li>

<li>3</li>
</ul>
<input type="button" class="input_btn" id="submit" value="submit" />

</div>
</div>
如果使用 $("#content .input_btn")则会很大的影响jQuery的性能,最快的效率是使用$("#submit")。如果涉及到DOM遍历循环时,未来提供性能,建议使用最近的ID选择器。如$(#content li)。

2.在class前使用tag(标签名)
在jQuery中第二快的选择器是标签名。和ID选择器一样它来自于javascript的getElementsByTagName_r()方法。
使用方法如:$("div");
使用标签名选择器需要注意几点:
1).标签名或不不用跟随ID,如$("div #content")。
2).不用在ID后面使用ID,如$("#demo #line")。

3.将jQuery对象缓存起来
就是要告诉我们,要将jQuery对象使用变量缓存起来。如下代码:
$("#content .btn p").css(.........
$("#content .btn p").css(.........
$("#content .btn p").show().........
这样是不好的编写,正确编写如下:
var $demo=$("#content .btn p");
$demo.css(......
$demo.css(......
$demo.show().....
永远不要让相同的选择器出现在同一段代码中

4.直接对DOM操作进行限制
这里的基本思想是在内存中建立你所需要的东西,然后更新DOM。
如循环添加DOM节点:
for(var i=0;i<100;i++){
    $("#showli").appent("<li>"+i+"</li>");
}
这是不好的编写方法,正确的编写方法如下:
var html="";
for(var i=0;i<100;i++){
  html+="<li>"+i+"</li>";
}
$("#showli").appent(html);

5.冒泡
如果在编写代码中你需要为很过个标签添加同一个事件是,那么你只需要对它的父标签添加一次事件。
如为表格里的td标签添加点击事件:
$("#mytable td").onclick(function(){
    //代码段,对td进行操作
    ......
});
则可以改写为:
$("mytable").onclick(function(e){
    var $tag=$(e.target);
    //代码段,对$tag进行操作
});

6.推迟到$(windwo).load
我们通常把任何东西挂到$(function(){});里面,它可以再也没渲染时就执行。往往里面的函数体会影响到也没一直在加载状态。这时你可以使用$(window).load(function(){});方法这减少也没再加载时暂用的CUP。一些特效、动画、拖放等等都适合使用。

7.压缩javascript
使用脚本压缩工具压缩和最小化你的javascript文件。在压缩之前要确保代码的正确性。否则页面会出现js报错。

8.给选择器一个上下文
jquery中可以指定上下文:
jquery(expression,context),它可以缩小选择器的搜索范围,减少时间,提高效率。
如:$(".a_hover",$("#mycontent"));

9.慎用.live()方法
如果可以,尽量不要使用该方法。它可以为在代码执行时新增的元素动态绑定事件,但是比较占用资源,所以尽量不要使用。

10.子选择器和后代选择器
后代选择器如:$("#mycontent p");它选择ID为mycontent里面的所有元素。
子选择器如:$("#mycontent > p");它只选择ID为mycontent的子元素。
在实际应用中如果只要求获取子元素,那么就不应该使用后代选择器。

时间: 2024-10-20 15:29:37

jquery 功能优化的相关文章

jQuery性能优化指南(转载)

现在jquery应用的越来越多, 有些同学在享受爽快淋漓coding时就将性能问题忽略了, 比如我. jquery虽在诸多的js类库中性能表现还算优秀, 但毕竟不是在用原生的javascript开发, 性能问题还是需要引起重视的. 在twitter上发现了jQuery Performance Rules这篇文章, 简单的摘译了一下: 1.总是从ID选择器开始继承2.在class前使用tag3.将jquery对象缓存起来4.掌握强大的链式操作 5.使用子查询6.对直接的DOM操作进行限制7.冒泡8

jQuery性能优化的38个建议

一.注意定义jQuery变量的时候添加var关键字 这个不仅仅是jQuery,所有javascript开发过程中,都需要注意,请一定不要定义成如下: $loading = $('#loading'); //这个是全局定义,不知道哪里位置倒霉引用了相同的变量名,就会郁闷至死的 二.请使用一个var来定义变量 如果你使用多个变量的话,请如下方式定义: .代码如下: varpage = 0, $loading = $('#loading'), $body = $('body'); 不要给每一个变量都添

jquery性能优化的十种方法

jquery性能优化的十种方法 有时候我们在书写jquery的时候,为了书写代码方便,往往忽略了程序执行过程中,给客户端带来的压力.随之而来的就是在某些低端浏览器或者低端电脑上运行速度缓慢,甚至无法运行等问题. 因此我们有必要对我们自己书写的jquery代码进行优化,以达到更快捷.更流畅的运行效果. 在这里整理了十种jquery优化的方法,如下: 1,总是从ID选择器开始继承在jQuery中最快的选择器是ID选择器,因为它直接来自于JavaScript的getElementById()方法.例如

jQuery基础之(三)jQuery功能函数前缀及与window.onload冲突

1.jQuery功能函数前缀 在javascript中,开发者通常会编写一些小函数来处理各种操作细节,例如在用户提交表单时,要将文本框最前端和最末端的空格内容清理掉.而javascript中没有类似trim()功能,在师院jQuery后,便可以使用trim()函数. trim()函数是jQuery对象的一个方法,使用以下例子 <script type="text/javascript"> var sString = " 1234567890"; sStr

分享一个jquery功能强大的提示信息插件代码

代码属于提示文字特效,很好,使用有些复杂,请参demo使用 下载地址:jquery功能强大的提示信息插件代码 预览DEMO:DEMO 分享一个jquery功能强大的提示信息插件代码,布布扣,bubuko.com

jquery 性能优化的28个建议[整理]

一.选择器性能优化建议  1.总是从#id选择器来继承这是jquery选择器的一条黄金法则.jquery选择一个元素最快的方法就是用ID来选择. $('#content').hide(); 或者从ID选择器继承来选择多个元素: $('#content p').hide(); 2. 在class前面使用tag jQuery中第二快的选择器就是tag选择器(如$(‘head’)),因为它和直接来自于原生的Javascript方 法getElementByTagName().所以最好总是用tag来修饰

jQuery性能优化--循环时的DOM操作

使用jQuery可以很方便的添加,删除或者修改DOM节点,但在一些循环,例如for(),while()或者$.each()中处理节点时,下边有个实例,值得注意: var top_list=[--]; //假设这里是100个字符串 $mylist=$("#mylist"); //jQuery选择器ul for(var i=0,i=top_list.length;i<1;i++){ $mylist.append("<li>" + top_list[i]

基于jQuery功能非常强大的图片裁剪插件

今天我们要来介绍一款基于jQuery功能非常强大的图片裁剪插件,这款jQuery图片裁剪插件可以选择裁剪框的尺寸比例,可以设置高宽尺寸,同时可以设置图片翻转角度,当然也支持图片的缩放,裁剪框也可以用鼠标拖动.效果图如下: 在线预览   源码下载 来看看实现的代码,这里我们主要来看JavaScript代码 获取图片的Canvas画布: function getSourceCanvas(image, data) { var canvas = $('<canvas>')[0], context =

Android录制声音,并播放,功能优化

之前,写过一篇关于安卓录制音频的博客,里面有些问题没有解决,这里,做一个优化 之前的那个博客, http://blog.csdn.net/u014620028/article/details/51283261 优化的地方:有多个音频文件,点击A,播放,A在播放过程中,如果点击A,停止播放:如果点击B,A停止,播放B.类似于QQ的语音播放 现在的功能优化,是在之前的基础上进行的,所以这里只写优化的地方 1.工程目录结构 新加了这个播放工具类 源码: package com.chen.voicede