jQuery 性能优化指南(2)


Posted in Javascript onMay 21, 2009
4,对直接的DOM操作进行限制
 
这里的基本思想是在内存中建立你确实想要的东西,然后更新DOM 。
这并不是一个jQuery最佳实践,但必须进行有效的JavaScript操作 。直接的DOM操作速度很慢。

例如,你想动态的创建一组列表元素,千万不要这样做,如下所示:

var top_100_list = [...], // 假设这里是100个独一无二的字符串
$mylist = $("#mylist"); // jQuery 选择到 <ul> 元素
for (var i=0, l=top_100_list.length; i<l; i++){
  $mylist.append("<li>" + top_100_list[i] + "</li>");
}

我们应该将整套元素字符串在插入进dom中之前先全部创建好,如下所示:

var top_100_list = [...],$mylist = $("#mylist"), top_100_li = ""; // 这个变量将用来存储我们的列表元素
for (var i=0, l=top_100_list.length; i<l; i++){
   top_100_li += "<li>" + top_100_list[i] + "</li>";
}
$mylist.html(top_100_li);
注:记得以前还看过一朋友写过这样的代码:

for (i = 0; i < 1000; i++) {

    var $myList = $('#myList');

    $myList.append('This is list item ' + i);

}

呵呵,你应该已经看出问题所在了。既然把#mylist循环获取了1000次!!!
 

5,冒泡
 

除非在特殊情况下, 否则每一个js事件(例如:click, mouseover等.)都会冒泡到父级节点。
当我们需要给多个元素调用同个函数时这点会很有用。

代替这种效率很差的多元素事件监听的方法就是, 你只需向它们的父节点绑定一次。

比如, 我们要为一个拥有很多输入框的表单绑定这样的行为: 当输入框被选中时为它添加一个class

传统的做法是,直接选中input,然后绑定focus等,如下所示:

$("#entryform input").bind("focus", function(){
    $(this).addClass("selected");
}).bind("blur", function(){
    $(this).removeClass("selected");
});

当然上面代码能帮我们完成相应的任务,但如果你要寻求更高效的方法,请使用如下代码:

$("#entryform").bind("focus", function(e){
    var $cell = $(e.target); // e.target 捕捉到触发的目标元素
    $cell.addClass("selected");
}).bind("blur", function(e){
    var $cell = $(e.target);
    $cell.removeClass("selected");
});
通过在父级监听获取焦点和失去焦点的事件,对目标元素进行操作。
在上面代码中,父级元素扮演了一个调度员的角色, 它可以基于目标元素绑定事件。
如果你发现你给很多元素绑定了同一个事件监听, 那么现在的你肯定知道哪里做错了。
 
同理,在Table操作时,我们也可以使用这种方式加以改进代码:
普通的方式:

$('#myTable td').click(function(){
    $(this).css('background', 'red');
});
 改进方式:

$('#myTable').click(function(e) {

     var $clicked = $(e.target);

     $clicked.css('background', 'red');

});

假设有100个td,在使用普通的方式的时候,你绑定了100个事件。
在改进方式中,你只为一个元素绑定了1个事件,
至于是100个事件的效率高,还是1个事件的效率高,相信你也能自行分辨了。
 
 

6,推迟到 $(window).load
 

jQuery对于开发者来说有一个很诱人的东西, 可以把任何东西挂到$(document).ready下。
尽管$(document).rady 确实很有用, 它可以在页面渲染时,其它元素还没下载完成就执行。
如果你发现你的页面一直是载入中的状态,很有可能就是$(document).ready函数引起的。

你可以通过将jQuery函数绑定到$(window).load 事件的方法来减少页面载入时的cpu使用率。
它会在所有的html(包括<iframe>)被下载完成后执行。

$(window).load(function(){
    // 页面完全载入后才初始化的jQuery函数.
});

一些特效的功能,例如拖放, 视觉特效和动画, 预载入隐藏图像等等,都是适合这种技术的场合。
 

7,压缩JavaScript
 
压缩和最小化你的JavaScript文件。
 
在线压缩地址: http://dean.edwards.name/packer/
压缩之前,请保证你的代码的规范性,否则可能失败,导致Js错误。
 
 
 
jQuery性能优化指南(2)到此结束,指南(3)正在进行中....
 
相信你也有你的idea,请共享出来吧。 Email : cssrain@gmail.com
 
 
英文原文:http://www.artzstudio.com/2009/04/jquery-performance-rules/
中文翻译:http://rlog.cn/350 & http://cssrain.cn
Javascript 相关文章推荐
Javascript 代码也可以变得优美的实现方法
Jun 22 Javascript
容易造成JavaScript内存泄露几个方面
Sep 04 Javascript
jQuery实现DIV层淡入淡出拖动特效的方法
Feb 13 Javascript
JavaScript中的Array 对象(数组对象)
Jun 02 Javascript
JSON 对象未定义错误的解决方法
Sep 29 Javascript
JavaScript中三种常见的排序方法
Feb 24 Javascript
html5+canvas实现支持触屏的签名插件教程
May 08 Javascript
vue.js实现刷新当前页面的方法教程
Jul 05 Javascript
JavaScript输入分钟、秒倒计时技巧总结(附代码)
Aug 17 Javascript
SpringBoot+Vue前后端分离,使用SpringSecurity完美处理权限问题的解决方法
Jan 09 Javascript
node.JS二进制操作模块buffer对象使用方法详解
Feb 06 Javascript
html5以及jQuery实现本地图片上传前的预览代码实例讲解
Mar 01 jQuery
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
jQuery 源代码显示控件 (Ajax加载方式).
May 18 #Javascript
You might like
检查php文件中是否含有bom的函数
2012/05/31 PHP
浅谈php和.net的区别
2014/09/28 PHP
JS批量操作CSS属性详细解析
2013/12/16 Javascript
js 显示base64编码的二进制流网页图片
2014/04/04 Javascript
Bootstrap每天必学之导航
2015/11/26 Javascript
基于JS实现密码框(password)中显示文字提示功能代码
2016/05/27 Javascript
点击按钮出现60秒倒计时的简单js代码(推荐)
2016/06/07 Javascript
使用jQuery Ajax 请求webservice来实现更简练的Ajax
2016/08/04 Javascript
AngularJS入门教程之迭代器过滤详解
2016/08/18 Javascript
详解AngularJs中$sce与$sceDelegate上下文转义服务
2016/09/21 Javascript
AngularJS中如何使用echart插件示例详解
2016/10/26 Javascript
详解JSON1:使用TSQL查询数据和更新JSON数据
2016/11/21 Javascript
Javascript自定义事件详解
2017/01/13 Javascript
原生js实现返回顶部缓冲效果
2017/01/18 Javascript
原生JS+Canvas实现五子棋游戏实例
2017/06/19 Javascript
基于vue和react的spa进行按需加载的实现方法
2018/09/29 Javascript
详解Vue实战指南之依赖注入(provide/inject)
2018/11/13 Javascript
vue项目中全局引入1个.scss文件的问题解决
2019/08/01 Javascript
Python中的zipfile模块使用详解
2015/06/25 Python
Python实现截屏的函数
2015/07/26 Python
用Python实现KNN分类算法
2017/12/22 Python
python 获取一个值在某个区间的指定倍数的值方法
2018/11/12 Python
如何用Python来搭建一个简单的推荐系统
2019/08/07 Python
解决reload(sys)后print失效的问题
2020/04/25 Python
Python趣味入门教程之循环语句while
2020/08/26 Python
python中delattr删除对象方法的代码分析
2020/12/15 Python
详解基于 Canvas 手撸一个六边形能力图
2019/09/02 HTML / CSS
机械设计及其自动化专业推荐信
2013/10/31 职场文书
应届实习生的自我评价范文
2014/01/05 职场文书
C++程序员求职信范文
2014/04/14 职场文书
铣床操作工岗位职责
2014/06/13 职场文书
车辆年检委托书范本
2014/10/14 职场文书
2016年主题党日活动总结
2016/04/05 职场文书
《吸血鬼:避世 血猎》官宣4.27发售 系列首款大逃杀
2022/04/03 其他游戏
浅谈Redis的事件驱动模型
2022/05/30 Redis
python热力图实现的完整实例
2022/06/25 Python