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

visitors 0   •     •   2017.05.31

其实我一直就听别人说如果要显示隐藏尽量不要用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可能会更好点。

 / 
  • 微信

  • 支付宝