談談自定義屬性的優劣

2021-08-27 21:52:41 字數 2316 閱讀 2916

[size=medium][color=green]備註:本文僅限於使用jquery的基礎上;[/color][/size]

[size=large]在獲取某個dom元素的時候,有多種方式,在查詢效率上肯定是最重要的。

眾所周知,id是在html中是唯一的,在查詢時也是效率最高的。[/size]

[size=medium]控制台列印結果[/size]

1查詢1000000次id使用時間634

[size=medium]而通過class呢,用$(".guahao")來查詢[/size]

1查詢1000000次class使用時間1322

[size=medium]那麼自定義的屬性呢[/size]

$("[sid=guahao]")

1查詢1000000次sid使用時間2330

[size=medium]很明顯,我們可以看出,在10萬次的查詢結果下,id的效率最高,自定義標籤的效率最低

[size=medium]列印結果[/size]

3查詢1000000次class使用時間1794

[size=medium]控制台列印結果[/size]

3查詢1000000次sid使用時間2746

[size=medium]我們可以看出,在同等結構的頁面中,查詢10萬次,相差0.95秒。

那麼平時我們用的頁面呢,假定乙個頁面複雜程度是測試頁面的1000倍,經測試,class耗時3-15ms,sid的耗時3-20ms,兩者的耗時基本可以忽略不計。

[color=red]那麼這兩種方式在jquery**中是怎麼查詢的呢?[/color]

在我用的jquery1.11版本裡

jquery 查詢id的步驟[/size]

// 此地的selector 是過濾條件 即: #guahao .guahao [sid=guahao]

//rquickexpr = /^(?:\s*(<[\w\w]+>)[^>]*|#([\w-]*))$/ ;

match = rquickexpr.exec( selector );

//後面就是判斷了

if ( match && (match[1] || !context) )

[size=medium]通過上面這句**,我們可以看出j如果是id的話,jquery在後面直接使用原生的js獲取方法[/size]

// match[2] = 「guahao」;

elem = document.getelementbyid( match[2] );

[size=medium]jquery 查詢class的步驟

[/size]

[size=medium]核心還是呼叫js原生的[color=red]context.getelementsbyclassname();[/color]

jquery 查詢自定義屬性的步驟[/size]

[size=medium]我們可以看出,jquery呼叫的是js原生的[color=red]context.queryselectorall()[/color]方法,這個方法的效率還是很高的。但是並不支援ie6,7。

上面囉嗦了這麼多,我們可以得出這樣的結論,在使用jquery時,id的效率》class>自定義標籤

但是效率的差距在我們頁面應用開發上的幾乎可以忽略不計。(備註:不會超過0.5ms)

下面談一下使用自定義標籤的好處:

[color=red]我所談的自定義標籤,並非是data-** 型別的標籤,它的作業不是為了儲存某些資料,而僅僅是為了拿到某個屬性的值,例如我所寫的sid,它的出現具有替代id的作用,並且具有可重複性,在開發的過程中,如果我們為了找到某些元素,僅僅使用id和sid完全可以實現所有的功能。

在使用sid之後,class或者其他屬性就可以解脫出來,比如class就可以僅僅做樣式方面的工作。[/color][/size]

自定義屬性

html view plain copy html head meta charset utf 8 title 自定義屬性 title script window.onload function script head body input type button value 按鈕 input ty...

自定義屬性

xmlns wen android orientation vertical android layout width fill parent android layout height wrap content 第二行是自定義標籤。格式如上,其中 xmlns wen 冒號後面是標籤名,在下面使用時...

自定義屬性

自定義屬性的步驟 1.首先使用在res目錄下的attr.xml檔案中,新建如下屬性集合 表示乙個屬性集合,名稱叫customprogerssbar3,這個屬性集合中包括的屬性用這種方式定義 關於format的型別有如下幾種 1.color 表示顏色,取值是乙個顏色值 屬性使用示例 2.dimensi...