登录  /  注册
首页 > web前端 > js教程 > 正文

jQuery性能优化技巧分析_jquery

php中文网
发布: 2016-05-16 16:13:25
原创
940人浏览过

本文较为详细分析了jquery性能优化技巧。分享给大家供大家参考。具体分析如下:

一、使用最新版本的jQuery类库

jQuery新版本会较上个版本进行Bug修复和一些优化,不过需要注意的是,在更换版本之后,不要忘记测试你的代码,毕竟有时候不是完全向后兼容的。

二、使用合适的选择器

jQuery选择器性能最佳到最差方式如下:

id选择器,如$('#id', context)
标签选择器,如$('p', context)
class选择器,如$('.class', context)
属性选择器,如$('[attribute=value]', context)
伪类选择器,如$(':hidden', context)

补充及注意事项:

尽量给选择器指定上下文context,可以缩小定位元素的范围
避免id重复修饰id,错误代码:var $el = $('#list #item1')
避免标签或class修饰id,错误代码: var $el = $('ul #item1')
如果使用属性选择器,尽量指定所属的标签选择器,这样可以加快访问速度,正确代码:var $el = $('a[title="link"]')

三、缓存对象

下面是性能不好的方式:

$('#home').css(...);
$('#home').bind('click', function() {});
$('#home').addClass(...);
登录后复制

说明:jQuery会在创建每个选择器的过程中,查找DOM,消耗时间与性能。

比较好的方式:

var $homeLink = $('#home', context);
$homeLink.css(...);
$homeLink.bind('click', function() {});
$homelink.addClass(...);
登录后复制

说明:永远不要让相同的选择器在你的代码里出现多次。

四、循环时的DOM操作

使用jQuery可以很方便的添加,删除或者修改DOM节点,但是在一些循环中,例如for(),while()或者$.each()中处理节点时,下面有个实例值得大家注意:

var $list = $('#list');
for(var i = 0; i < 100; i++) {
  $list.append('<li>' + i + '</li>');
}
登录后复制

说明:循环添加li节点100次,这种操作消耗的性能不低,所以更好的方式是将要添加的节点在插入DOM树之前全部创建好,再一次性添加到DOM树中。更好的方式:

var $list = $('#list'),
  fragment = '';
for(var i = 0; i < 100; i++) {
  fragment += '<li>' + i + '</li>';
}
$list.append(fragment);
登录后复制

五、数组方式使用jQuery对象

使用jQuery选择器获取结果是一个jQuery对象。在性能方面,建议使用简单for或者while循环来处理,而不是$.each(),这样能使你的代码更快。

另外注意:检查长度是一个检查jQuery对象是否存在的方式。

var $list = $('#list');
if($list) {  //总是true
  //do something
}
if($list.length) { //拥有元素才返回true
  //do something
}
登录后复制

六、事件代理

每一个JavaScript事件(如click,mouseover)都会冒泡到父级节点。当我们需要给多个元素调用同一个函数时,这点会很有用。

...
<ul id="list">
  <li id="item1"></li>
  <li id="item2"></li>
  <li id="item3"></li>
  ...
</ul>
...

var $item1 = $('#item1'),
  $item2 = $('#item2'),
  $item3 = $('#item3');
  ...

$item1.click(function() {...});
$item2.click(function() {...});
$item3.click(function() {...});
...
登录后复制

说明:这种方式,如果有100个li,要绑定100个事件。显然,不科学,性能损耗很多。

更好的方式是:只需向li的父节点ul绑定一次事件,然后通过event.target获取到点击的当前元素。

var $list = $('#list');
$list.click(function(e) {
  var $currentItem = $(e.target);  //e.target捕捉到当前触发事件的目标元素
  ...
});
登录后复制

七、将你的代码转化成jQuery插件

如果每次都花时间去写类似的jQuery代码,那么可以考虑将这部分类似的代码变成插件,它能够使你的代码有更好的重用性,并且能够有效的帮助你组织代码。

八、使用Javascript数组join()来拼接字符串

处理长字符串的时候,使用join()方法有助于优化性能。

var arr = [];
for(var i = 0; i < 100; i++){
  arr[i] = '<li>' + i + '</li>';
}
$list.html(arr.join(''));
登录后复制

九、合理利用HTML5的data属性

HTML5的data属性可以帮助我们插入数据,特别是前后端的数据交换。jQuery的data()方法,有效的利用HTML5的属性,来自动得到数据。

...
<a id="info" data-info-index="23" data-role="linkInfo"></a>
...

var $infoLink = $('#info');
var infoIndex = $infoLink.data('info-index');
var type = $infoLink.data('linkInfo');
登录后复制

十、尽量使用原生的JavaScript方法

如:

$(this).css('color': 'blue');
登录后复制

优化成:

this.style.color = 'blue';
登录后复制

如:

$('<p></p>');
登录后复制

优化成:

$(document.createElement('p'));
登录后复制

十一、压缩JavaScript

使用压缩工具压缩JavaScript文件。
发布项目时,应使用“压缩版”JavaScript文件。

希望本文所述对大家的jQuery程序设计有所帮助。

智能AI问答
PHP中文网智能助手能迅速回答你的编程问题,提供实时的代码和解决方案,帮助你解决各种难题。不仅如此,它还能提供编程资源和学习指导,帮助你快速提升编程技能。无论你是初学者还是专业人士,AI智能助手都能成为你的可靠助手,助力你在编程领域取得更大的成就。
来源:php中文网
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
最新问题
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2024 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号