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

piapia 發布于2019-08-20 16:56 / 2624人閱讀

摘要：本篇博客首發于本人博客歡迎點擊查看顯示隱藏常用方式性能測試報告

其實我一直就聽別人說如果要顯示隱藏盡量不要用hide()和show(),其實一直也沒實際測試過，因為自己想當然的也以為，畢竟hide()和show()jquery底層要經過不少判斷。今天不知怎么得對他們的性能一直很在意，于是就簡單做了如下測試

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

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

還好，沒想象中那么差

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

也沒比上面的好多少嗎

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

也不錯

toggle()的測試截圖

好吧，果斷拋棄你

從上面的測試來看hide()和show()相對于其它來看確實性能上會差點，但也沒想象中那么差，其實一開始只是測試的對一個節點的顯示隱藏，由于差別太小（但其實也可以發現hide()和show()性能會差點），所以多加了些節點來測試的。
所以hide()和show()其實也是可以放心實用的,但總的來說還是使用addClass可能會更好點。
本篇博客首發于本人博客,歡迎點擊查看jquery顯示隱藏常用方式性能測試報告

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/83262.html

??熬夜7天肝出5萬字【禪道/缺陷報告/測試報告/接口測試及用例/Fildder】超詳細總結??

目錄一、禪道一、測試工具背景二、測試管理工具三、測試工具介紹四、禪道介紹五、禪道操作 7. 創建發布 8. 測試團隊二、缺陷報告三、測試報告一、概要二、測試過程三、缺陷分析四、測試總結四、接口測試以及用例編寫五、Fiddler 好文推薦一、禪道一、測試工具背景當測試環境搭建完成后，測試人員將在自己搭建的環境上執行測試用例，開展測試工作。測試人員在執行測試用例的過...

oujie 2021-09-02 15:21 評論0 收藏0
jQuery的show/hide性能測試

摘要：原文地址這篇文章是各種方式的性能測試。但由于未能找問明原因，所以作者就自己去做了這個測試。主要原因在于方法必須先保存元素的屬性，這樣才能把元素恢復到原來的狀態。根據源代碼上的注釋，這樣做是為了防止瀏覽器在每個循環上進行重新渲染。原文地址：http://www.php100.com/html/webkaifa/javascript/2012/0927/11164.html 這篇文章是j...

canger 2019-08-19 18:38 評論0 收藏0
jQuery筆記總結篇

摘要：希望在做所有事情之前，操作文檔。不受層級限制子選擇器在給定的父元素下匹配所有子元素。相鄰選擇器匹配所有緊接在元素后的元素。判斷當前對象中的某個元素是否包含指定類名，包含返回，不包含返回下標過濾器精確選出指定下標元素獲取第個元素。原文鏈接 http://blog.poetries.top/2016... 首先，來了解一下jQuery學習的整體思路 showImg(https://seg...

NoraXie 2019-08-22 10:39 評論0 收藏0
JS基礎篇--JS的DOM操作 - 你真的了解嗎?

摘要：摘要想稍微系統的說說對于的操作把和常用操作的內容歸納成思維導圖方便閱讀同時加入性能上的一些問題前言在前端開發的過程中極為重要的一個功能就是對對象的操作無論增刪改查在前端頁面操作這一范圍內都是比較消耗性能的如何高效率的便捷的操作這就是本文要講摘要想稍微系統的說說對于DOM的操作,把Javascript和jQuery常用操作DOM的內容歸納成思維導圖方便閱讀,同時加入性能上的一些問題....

DirtyMind 2019-08-22 10:59 評論0 收藏0
javascript功能插件大集合前端常用插件 js常用插件

摘要：轉載來源包管理器管理著庫，并提供讀取和打包它們的工具。能構建更好應用的客戶端包管理器。一個整合和的最佳思想，使開發者能快速方便地組織和編寫前端代碼的下一代包管理器。很棒的組件集合。隱秘地使用和用戶數據。轉載來源：https://github.com/jobbole/aw... 包管理器管理著 javascript 庫，并提供讀取和打包它們的工具。?npm – npm 是 javasc...

netmou 2019-08-23 12:28 評論0 收藏0