jquery顯示隱藏經常使用方式性能測試報告

時間 2019-12-04

原文原文鏈接

其實我一直就聽別人說若是要顯示隱藏儘可能不要用hide()和show(),其實一直也沒實際測試過，由於本身想固然的也覺得，畢竟hide()和show()jquery底層要通過很多判斷。今天不知怎麼得對他們的性能一直很在乎，因而就簡單作了以下測試css

下面測試了對10000個相同div節點的顯示隱藏，測試方法使用了console.time()和console.timeEnd,測試瀏覽器爲谷歌（其它的還沒測試）jquery

先來hide()和show()的測試截圖

還好，沒想象中那麼差瀏覽器

addClass()和removeClass()的測試截圖

也沒比上面的好多少嗎hexo

.css({'display':'none'})和.css({'display':'block'})的測試截圖

也不錯ide

toggle()的測試截圖

好吧，果斷拋棄你性能

從上面的測試來看hide()和show()相對於其它來看確實性能上會差點，但也沒想象中那麼差，其實一開始只是測試的對一個節點的顯示隱藏，因爲差異過小（但其實也能夠發現hide()和show()性能會差點），因此多加了些節點來測試的。
因此hide()和show()其實也是能夠放心實用的,但總的來講仍是使用addClass可能會更好點。
本篇博客首發於本人博客,歡迎點擊查看jquery顯示隱藏經常使用方式性能測試報告測試