jquery显示隐藏常用方式性能测试报告

其实我一直就听别人说如果要显示隐藏尽量不要用hide()和show(),其实一直也没实际测试过,因为自己想当然的也以为,毕竟hide()和show()jquery底层要经过不少判断。今天不知怎么得对他们的性能一直很在意,于是就简单做了如下测试

下面测试了对10000个相同div节点的显示隐藏,测试方法使用了console.time()和console.timeEnd,测试浏览器为谷歌(其它的还没测试)

先来hide()和show()的测试截图

Alt text

还好,没想象中那么差

addClass()和removeClass()的测试截图

Alt text

也没比上面的好多少吗

.css({'display':'none'})和.css({'display':'block'})的测试截图

Alt text

也不错

toggle()的测试截图

Alt text

好吧,果断抛弃你

从上面的测试来看hide()和show()相对于其它来看确实性能上会差点,但也没想象中那么差,其实一开始只是测试的对一个节点的显示隐藏,由于差别太小(但其实也可以发现hide()和show()性能会差点),所以多加了些节点来测试的。
所以hide()和show()其实也是可以放心实用的,但总的来说还是使用addClass可能会更好点。
本篇博客首发于本人博客,欢迎点击查看jquery显示隐藏常用方式性能测试报告

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值