jquery顯示隱藏常用方式性能測(cè)試報(bào)告

piapia 發(fā)布于2019-08-20 16:56 / 2632人閱讀

摘要：本篇博客首發(fā)于本人博客歡迎點(diǎn)擊查看顯示隱藏常用方式性能測(cè)試報(bào)告

其實(shí)我一直就聽(tīng)別人說(shuō)如果要顯示隱藏盡量不要用hide()和show(),其實(shí)一直也沒(méi)實(shí)際測(cè)試過(guò)，因?yàn)樽约合氘?dāng)然的也以為，畢竟hide()和show()jquery底層要經(jīng)過(guò)不少判斷。今天不知怎么得對(duì)他們的性能一直很在意，于是就簡(jiǎn)單做了如下測(cè)試

下面測(cè)試了對(duì)10000個(gè)相同div節(jié)點(diǎn)的顯示隱藏，測(cè)試方法使用了console.time()和console.timeEnd,測(cè)試瀏覽器為谷歌（其它的還沒(méi)測(cè)試）

先來(lái)hide()和show()的測(cè)試截圖

還好，沒(méi)想象中那么差

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

也沒(méi)比上面的好多少嗎

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

也不錯(cuò)

toggle()的測(cè)試截圖

好吧，果斷拋棄你

從上面的測(cè)試來(lái)看hide()和show()相對(duì)于其它來(lái)看確實(shí)性能上會(huì)差點(diǎn)，但也沒(méi)想象中那么差，其實(shí)一開(kāi)始只是測(cè)試的對(duì)一個(gè)節(jié)點(diǎn)的顯示隱藏，由于差別太?。ǖ鋵?shí)也可以發(fā)現(xiàn)hide()和show()性能會(huì)差點(diǎn)），所以多加了些節(jié)點(diǎn)來(lái)測(cè)試的。
所以hide()和show()其實(shí)也是可以放心實(shí)用的,但總的來(lái)說(shuō)還是使用addClass可能會(huì)更好點(diǎn)。
本篇博客首發(fā)于本人博客,歡迎點(diǎn)擊查看jquery顯示隱藏常用方式性能測(cè)試報(bào)告

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/83262.html

相關(guān)文章

??熬夜7天肝出5萬(wàn)字【禪道/缺陷報(bào)告/測(cè)試報(bào)告/接口測(cè)試及用例/Fildder】超詳細(xì)總結(jié)??

目錄一、禪道一、測(cè)試工具背景二、測(cè)試管理工具三、測(cè)試工具介紹四、禪道介紹五、禪道操作 7. 創(chuàng)建發(fā)布 8. 測(cè)試團(tuán)隊(duì) 二、缺陷報(bào)告三、測(cè)試報(bào)告一、概要二、測(cè)試過(guò)程三、缺陷分析四、測(cè)試總結(jié) 四、接口測(cè)試以及用例編寫(xiě) 五、Fiddler 好文推薦一、禪道一、測(cè)試工具背景當(dāng)測(cè)試環(huán)境搭建完成后，測(cè)試人員將在自己搭建的環(huán)境上執(zhí)行測(cè)試用例，開(kāi)展測(cè)試工作。測(cè)試人員在執(zhí)行測(cè)試用例的過(guò)...

oujie 2021-09-02 15:21 評(píng)論0 收藏0
jQuery的show/hide性能測(cè)試

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

canger 2019-08-19 18:38 評(píng)論0 收藏0
jQuery筆記總結(jié)篇

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

NoraXie 2019-08-22 10:39 評(píng)論0 收藏0
JS基礎(chǔ)篇--JS的DOM操作 - 你真的了解嗎?

摘要：摘要想稍微系統(tǒng)的說(shuō)說(shuō)對(duì)于的操作把和常用操作的內(nèi)容歸納成思維導(dǎo)圖方便閱讀同時(shí)加入性能上的一些問(wèn)題前言在前端開(kāi)發(fā)的過(guò)程中極為重要的一個(gè)功能就是對(duì)對(duì)象的操作無(wú)論增刪改查在前端頁(yè)面操作這一范圍內(nèi)都是比較消耗性能的如何高效率的便捷的操作這就是本文要講摘要想稍微系統(tǒng)的說(shuō)說(shuō)對(duì)于DOM的操作,把Javascript和jQuery常用操作DOM的內(nèi)容歸納成思維導(dǎo)圖方便閱讀,同時(shí)加入性能上的一些問(wèn)題....

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

摘要：轉(zhuǎn)載來(lái)源包管理器管理著庫(kù)，并提供讀取和打包它們的工具。能構(gòu)建更好應(yīng)用的客戶端包管理器。一個(gè)整合和的最佳思想，使開(kāi)發(fā)者能快速方便地組織和編寫(xiě)前端代碼的下一代包管理器。很棒的組件集合。隱秘地使用和用戶數(shù)據(jù)。轉(zhuǎn)載來(lái)源：https://github.com/jobbole/aw... 包管理器管理著 javascript 庫(kù)，并提供讀取和打包它們的工具。?npm – npm 是 javasc...

netmou 2019-08-23 12:28 評(píng)論0 收藏0