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 相关文章推荐
js 判断 enter 事件
Feb 12 Javascript
javascript 放大镜 v1.0 基于Yui2 实现的放大镜效果
Mar 08 Javascript
Javascript 类、命名空间、代码组织代码
Jul 31 Javascript
JavaScript:Div层拖动效果实例代码
Aug 06 Javascript
引用其它js时如何同时处理多个window.onload事件
Sep 02 Javascript
Jquery结合HTML5实现文件上传
Jun 25 Javascript
jquery.validate表单验证插件使用方法解析
Nov 07 Javascript
前端编码规范(3)JavaScript 开发规范
Jan 21 Javascript
教你用十行node.js代码读取docx的文本
Mar 08 Javascript
利用不到200行代码写一款属于你自己的js类库
Jul 08 Javascript
通过GASP让vue实现动态效果实例代码详解
Nov 24 Javascript
vue实现登录、注册、退出、跳转等功能
Dec 23 Vue.js
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 图片加水印与上传图片加水印php类
2010/05/12 PHP
php异常:Parse error: syntax error, unexpected T_ENCAPSED_AND_WHITESPACE  eval()'d code error
2011/05/19 PHP
解析dedeCMS验证码的实现代码
2013/06/07 PHP
Thinkphp中数据按分类嵌套循环实现方法
2014/10/30 PHP
JavaScript CSS修改学习第五章 给“上传”添加样式
2010/02/19 Javascript
jQuery的Ajax的自动完成功能控件简要说明
2013/02/22 Javascript
jsPDF导出pdf示例
2014/05/02 Javascript
JavaScript Serializer序列化时间处理示例
2014/07/31 Javascript
js ajaxfileupload.js上传报错的解决方法
2016/05/05 Javascript
bootstrap中的 form表单属性role=&quot;form&quot;的作用详解
2017/01/20 Javascript
JQueryMiniUI按照时间进行查询的实现方法
2017/06/07 jQuery
Vue如何实现组件的源码解析
2017/06/08 Javascript
Angular 2 ngForm中的ngModel、[ngModel]和[(ngModel)]的写法
2017/06/29 Javascript
对node通过fs模块判断文件是否是文件夹的实例讲解
2019/06/10 Javascript
vue el-table实现自定义表头
2019/12/11 Javascript
[01:02]2014 DOTA2国际邀请赛中国区预选赛 现场抢先看
2014/05/22 DOTA
python rsa 加密解密
2017/03/20 Python
python使用mysql的两种使用方式
2018/03/07 Python
完美解决在oj中Python的循环输入问题
2018/06/25 Python
使用Python做定时任务及时了解互联网动态
2019/05/15 Python
python GUI库图形界面开发之PyQt5动态加载QSS样式文件
2020/02/25 Python
python修改微信和支付宝步数的示例代码
2020/10/12 Python
html5 css3 动态气泡按钮实例演示
2012/12/02 HTML / CSS
Debenhams百货英国官方网站:Debenhams UK
2016/07/12 全球购物
俄罗斯香水和化妆品购物网站:Л’Этуаль
2018/05/10 全球购物
大学生学业生涯规划
2014/01/05 职场文书
大学生创业策划书
2014/02/02 职场文书
教师通用专业自荐书范文
2014/02/11 职场文书
应聘护理专业毕业自荐书范文
2014/02/12 职场文书
我的中国梦演讲稿800字
2014/08/19 职场文书
工厂见习报告范文
2014/10/31 职场文书
沈阳故宫导游词
2015/01/31 职场文书
党委工作总结2015
2015/04/27 职场文书
Nginx的rewrite模块详解
2021/03/31 Servers
Opencv中cv2.floodFill算法的使用
2021/06/18 Python