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 得到变量类型的函数
May 19 Javascript
jQuery EasyUI API 中文文档 - Panel面板
Sep 30 Javascript
js点击页面其它地方将某个显示的DIV隐藏
Jul 12 Javascript
分享精心挑选的23款美轮美奂的jQuery 图片特效插件
Aug 14 Javascript
把字符串按照特定的字母顺序进行排序的js代码
Jan 28 Javascript
学习JavaScript设计模式之状态模式
Jan 08 Javascript
用jQuery实现圆点图片轮播效果
Mar 19 Javascript
webpack学习笔记之优化缓存、合并、懒加载
Aug 24 Javascript
react-native fetch的具体使用方法
Nov 01 Javascript
微信小程序实现运动步数排行功能(可删除)
Jul 05 Javascript
vue.js 图片上传并预览及图片更换功能的实现代码
Aug 27 Javascript
vuex管理状态仓库使用详解
Jul 29 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
jQuery 源代码显示控件 (Ajax加载方式).
May 18 #Javascript
You might like
php 常用类汇总 推荐收藏
2010/05/13 PHP
PHP结合jQuery实现找回密码
2015/07/22 PHP
js获取RadioButtonList的Value/Text及选中值等信息实现代码
2013/03/05 Javascript
关于Javascript与iframe的那些事儿
2013/07/04 Javascript
JavaScript中的eval()函数详解
2013/08/22 Javascript
JavaScript的21条基本知识点
2014/03/04 Javascript
ES6中的数组扩展方法
2016/08/26 Javascript
node.js操作mongodb简单示例分享
2017/05/25 Javascript
Vue使用vue-cli创建项目
2017/09/01 Javascript
JS实现的找零张数最小问题示例
2017/11/28 Javascript
简单谈谈CommonsChunkPlugin抽取公共模块
2017/12/31 Javascript
layui之select的option叠加问题的解决方法
2018/03/08 Javascript
nodejs(officegen)+vue(axios)在客户端导出word文档的方法
2018/07/31 NodeJs
JS浅拷贝和深拷贝原理与实现方法分析
2019/02/28 Javascript
Vue监听页面刷新和关闭功能
2019/06/20 Javascript
node.js中process进程的概念和child_process子进程模块的使用方法示例
2020/02/11 Javascript
JS如何寻找数组中心索引过程解析
2020/06/01 Javascript
Keras自定义实现带masking的meanpooling层方式
2020/06/16 Python
pip install命令安装扩展库整理
2021/03/02 Python
HTML5+CSS3 实现灵动的动画 TAB 切换效果(DEMO)
2017/09/15 HTML / CSS
美国批发供应商:Kole Imports
2019/04/10 全球购物
美国购物网站:Clickhere2shop
2021/01/28 全球购物
记者岗位职责
2014/01/06 职场文书
服务型党组织建设典型材料
2014/05/07 职场文书
煤矿安全承诺书
2014/05/22 职场文书
教师政风行风自查自纠报告
2014/10/21 职场文书
习近平在党的群众路线教育实践活动总结大会上的讲话
2014/10/21 职场文书
2014年教学工作总结
2014/11/13 职场文书
小浪底导游词
2015/02/12 职场文书
走进毛泽东观后感
2015/06/04 职场文书
给校长的建议书作文400字
2015/09/14 职场文书
《家》读后感:万惜拯救,冷暖自知
2019/09/25 职场文书
《妈妈别哭,有我在》读后感3篇
2020/01/13 职场文书
mysql脏页是什么
2021/07/26 MySQL
vue实现在data里引入相对路径
2022/06/05 Vue.js
Win11无法安装更新补丁KB3045316怎么办 附KB3045316补丁修复教程
2022/08/14 数码科技