js-jQuery性能优化(二)

5、数组方式使用jQuery对象

  使用jQuery选择器获取结果是一个jQuery对象。然而,jQuery类库会让你感觉正在使用一个定义了索引和长度的数组。在性能方面,建议使用简单的for或者while循环来处理,而不是$.each(),这样能使你的代码更快。

6、事件代理

  常用的JS事件如click等会冒泡到父级节点,当我们需要给多个元素调用同一个函数时这点很有用。比如,我们要为一个表格绑定这样的行为:点击td后,把背景色设置为红色,如果单独给每个td绑定事件,那么当表格很大时,需要绑定很多个事件,这将给性能带来负面影响。

  jQuery 1.7+提供了一个方式:on(),可以将整个表格的事件监听封装到一个便利的方法里,只需绑定一个事件:

$("#myTable").on("click","td",function(){
    $(this).css("background","red");
});

7、将代码转化为jQuery插件

  如果每次都需要花上一定的时间去开发类似的jQuery代码,那么可以考虑将代码变成插件。它能够使你的代码有更好的重用性,并且能够有效地帮助你组织代码。

8、使用join()来拼接字符串

  在处理长字符串时,使用join()比使用“+”有助于性能优化。

  首先创建一个数组,然后循环,最后使用join()把数组转化为字符串。

9、合理利用HTML5的Data属性

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

10、尽量使用原生的JS方法

  原生的方法效率高于拐弯抹角的调用许多函数,有时并不需要jQuery。

  比如创建一个p元素可以优化为:

$(document.createElement("p"));

11、压缩JavaScript

  现在的Web项目总是离不开大量的JavaScript,而JS文件的体积越来越大,随之也影响到页面的感知性能。因此,需要对JS文件进行压缩,一方面是使用Gzip,一方面则是去除JS文件里的注释、空白,并且压缩局部变量长度。对于一些成熟的类库来说,它们本身会提供完整版和压缩版两个版本。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值