jQuery 性能优化指南(3)


Posted in Javascript onMay 21, 2009
8,尽量使用ID代替Class。
 

前面性能优化已经说过,ID选择器的速度是最快的。所以在HTML代码中,能使用ID的尽量使用ID来代替class。
看下面的一个例子:

// 创建一个list
var $myList = $('#myList');
var myListItems = '<ul>';
for (i = 0; i < 1000; i++) {
     myListItems += '<li class="listItem' + i + '">This is a list item</li>'; //这里使用的是class
 }
myListItems += '</ul>';
$myList.html(myListItems);
// 选择每一个 li
 for (i = 0; i < 1000; i++) {
    var selectedItem = $('.listItem' + i);
}

在代码最后,选择每个li的过程中,总共用了5066毫秒,超过5秒了。

接着我们做一个对比,用ID代替class:

 

// 创建一个list
var $myList = $('#myList');
var myListItems = '<ul>';
for (i = 0; i < 1000; i++) {
    myListItems += '<li id="listItem' + i + '">This is a list item</li>'; //这里使用的是id
}
myListItems += '</ul>';
$myList.html(myListItems);
 // 选择每一个 li
for (i = 0; i < 1000; i++) {
     var selectedItem = $('#listItem' + i);
}

在上段代码中,选择每个li总共只用了61毫秒,相比class的方式,将近快了100倍。
 
 

 

9,给选择器一个上下文
 

jQuery选择器中有一个这样的选择器,它能指定上下文。
jQuery( expression, context );

通过它,能缩小选择器在DOM中搜索的范围,达到节省时间,提高效率。
普通方式:
$('.myDiv')
改进方式:
$('.myDiv' , $("#listItem") )
 
 

10,慎用 .live()方法(应该说尽量不要使用)
 

这是jQuery1.3.1版本之后增加的方法,这个方法的功能就是为 新增的DOM元素 动态绑定事件。
但对于效率来说,这个方法比较占用资源。所以请尽量不要使用它。
例如有这么一段代码:

<script type="text/javascript" >
$(function(){
 $("p").click(function(){
     alert( $(this).text() );
 });
$("button").click(function(){
    $("<p>this is second p</p>").appendTo("body");
});
}) </script>
<body>
<p>this is first p</p> <button>add</button>
</body>

运行后,你会发现 新增 的 p元素,并没用被绑定click事件。

你可以改成.live("click")方式解决此问题,代码如下:

$(function(){
$("p").live("click",function(){ //改成live方式
     alert( $(this).text() );
 });
$("button").click(function(){ $("<p>this is second p</p>").appendTo("body"); });})

但我并不建议大家这么做,我想用另一种方式去解决这个问题,代码如下:

$(function(){
$("p").click(function(){
    alert( $(this).text() );
});
$("button").click(function(){
    $("<p>this is second p</p>").click(function(){  //为新增的元素重新绑定一次
            alert( $(this).text() );
    }).appendTo("body");
});
})

虽然我把绑定事件重新写了一次,代码多了点,但这种方式的效率明显高于live()方式,
特别是在频繁的DOM操作中,这点非常明显。


 

11,子选择器和后代选择器

 

后代选择器经常用到,比如:$("#list  p");
后代选择器获取的是元素内部所有元素。

而有时候实际只要获取 子元素,那么就不应该使用后代选择器。
应该使用子选择器,代码如下:
$("#list > p");

 

 

12,使用data()方法存储临时变量

 

下面是一段非常简单的代码,

$(function(){

    var flag = false;

    $("button").click(function(){

        if(flag){

            $("p").text("true");

            flag=false;

        }else{

            $("p").text("false");

            flag=true;

        }

    });

})

 

改用data()方式后,代码如下:

$(function(){

    $("button").click(function(){

        if( $("p").data("flag") ){

            $("p").text("true");

            $("p").data("flag",false);

        }else{

             $("p").text("false");

             $("p").data("flag",true);

        }

    });

})

 

jQuery性能优化指南(3)到此结束。
 
相信你也有你的idea,请共享出来吧。 Email : cssrain@gmail.com
 
Javascript 相关文章推荐
JQuery自适应IFrame高度(支持嵌套 兼容IE,ff,safafi,chrome)
Mar 28 Javascript
JS实现可缩放、拖动、关闭和最小化的浮动窗口完整实例
Mar 04 Javascript
jquery中键盘事件小结
Feb 24 Javascript
浅谈JavaScript的内置对象和浏览器对象
Jun 03 Javascript
详解webpack es6 to es5支持配置
May 04 Javascript
基于easyui checkbox 的一些操作处理方法
Jul 10 Javascript
Vue路由history模式解决404问题的几种方法
Sep 29 Javascript
VueJS 组件参数名命名与组件属性转化问题
Dec 03 Javascript
浅谈Vuex注入Vue生命周期的过程
May 20 Javascript
layui table表格数据的新增,修改,删除,查询,双击获取行数据方式
Nov 14 Javascript
关于vue 结合原生js 解决echarts resize问题
Jul 26 Javascript
Vue 列表页带参数进详情页的操作(router-link)
Nov 13 Javascript
jQuery 性能优化指南(2)
May 21 #Javascript
jQuery 性能优化指南 (1)
May 21 #Javascript
javascript操作cookie_获取与修改代码
May 21 #Javascript
jQuery(1.3.2) 7行代码搞定跟随屏幕滚动的层
May 21 #Javascript
Javascript 的addEventListener()及attachEvent()区别分析
May 21 #Javascript
W3C Group的JavaScript1.8 新特性介绍
May 19 #Javascript
JS backgroundImage控制
May 19 #Javascript
You might like
php 获取百度的热词数据的代码
2012/02/18 PHP
Zend Framework教程之Zend_Controller_Plugin插件用法详解
2016/03/07 PHP
Laravel登录失败次数限制的实现方法
2020/08/26 PHP
类似CSDN图片切换效果脚本
2009/09/17 Javascript
jQuery Lightbox 图片展示插件使用说明
2010/04/25 Javascript
dreamweaver 安装Jquery智能提示
2011/04/02 Javascript
cookie 最近浏览记录(中文escape转码)具体实现
2013/06/08 Javascript
JS仿京东移动端手指拨动切换轮播图效果
2020/04/10 Javascript
浅谈jQuery的bind和unbind事件(绑定和解绑事件)
2017/03/02 Javascript
Vue.js上下滚动加载组件的实例代码
2017/07/17 Javascript
JS模拟超市简易收银台小程序代码解析
2017/08/18 Javascript
jQuery替换节点元素的操作方法
2018/03/18 jQuery
vue之父子组件间通信实例讲解(props、$ref、$emit)
2018/05/22 Javascript
React.js绑定this的5种方法(小结)
2018/06/05 Javascript
Vue封装的可编辑表格插件方法
2018/08/28 Javascript
解决vue js IOS H5focus无法自动弹出键盘的问题
2018/08/30 Javascript
用node.js写一个jenkins发版脚本
2019/05/21 Javascript
js中console在一行内打印字符串和对象的方法
2019/09/10 Javascript
layui自己添加图片按钮并点击跳转页面的例子
2019/09/14 Javascript
序列化模块json代码实例详解
2020/03/03 Javascript
结合axios对项目中的api请求进行封装操作
2020/09/21 Javascript
vant 中van-list的用法说明
2020/11/11 Javascript
[03:10]2014DOTA2 TI马来劲旅Titan首战告捷目标只是8强
2014/07/10 DOTA
python merge、concat合并数据集的实例讲解
2018/04/12 Python
从0开始的Python学习016异常
2019/04/08 Python
python add_argument()用法解析
2020/01/29 Python
H5 canvas中width、height和style的宽高区别详解
2018/11/02 HTML / CSS
行政人员岗位职责
2013/12/08 职场文书
土木建筑学生自我评价
2014/01/14 职场文书
小学英语教学反思
2014/01/30 职场文书
个人现实表现材料
2014/02/04 职场文书
董事长助理岗位职责
2014/02/18 职场文书
保险专业自荐信范文
2014/02/20 职场文书
群众路线专项整治方案
2014/10/27 职场文书
windows下快速安装nginx并配置开机自启动的方法
2021/05/11 Servers
Python进行区间取值案例讲解
2021/08/02 Python