建立節點三種方式和效能比較

2021-10-06 02:59:15 字數 3151 閱讀 7811

注意如果頁面已經載入完成,再呼叫會導致頁面重繪

lang

="en"

>

>

charset

="utf-8"

>

>

demotitle

>

head

>

>

>

document.

write(''

);script

>

body

>

html

>

lang

="en"

>

>

charset

="utf-8"

>

>

demotitle

>

head

>

>

>

document.body.innerhtml ='';

script

>

body

>

html

>

lang

="en"

>

>

charset

="utf-8"

>

>

demotitle

>

head

>

>

>

var h3 = document.

createelement

('h3');

h3.innertext =

'hello world!'

; document.body.

(h3)

;script

>

body

>

html

>

因為document.write()每次都會導致頁面重繪,並且本身也有很大的侷限性所以不在測試

lang

="en"

>

>

charset

="utf-8"

>

>

demotitle

>

head

>

>

>

var starttime =

newdate()

;for

(var i =

0; i <

1000

; i++

)var overtime =

newdate()

; console.

log(overtime.

gettime()

- starttime.

gettime()

)script

>

body

>

html

>

測試結果:平均在340毫秒左右

lang

="en"

>

>

charset

="utf-8"

>

>

demotitle

>

head

>

>

>

var starttime =

newdate()

;for

(var i =

0; i <

1000

; i++

)var overtime =

newdate()

; console.

log(overtime.

gettime()

- starttime.

gettime()

)script

>

body

>

html

>

測試結果:平均在2毫秒左右

lang

="en"

>

>

charset

="utf-8"

>

>

demotitle

>

head

>

>

>

var starttime =

newdate()

;var buf =

newarray()

;for

(var i =

0; i <

1000

; i++

) document.body.innerhtml = buf.

join(''

);var overtime =

newdate()

; console.

log(overtime.

gettime()

- starttime.

gettime()

)script

>

body

>

html

>

測試結果:平均在1毫秒左右

總結偏個人主觀,緊供參考

document.write()只能以整個文件為單位操作,並且在頁面載入完成過後呼叫會導航整個頁面重繪不推薦使用。

document.innerhtml在陣列拼接下速度相比document.createelement()快1倍左右。

document.innerhtml在程式處理巢狀結構時結構不如document.createelement()清析。

日常使用推薦document.createelement()在處理資料時結構更清晰,方便後期維護並且現在出現有大量資料需要網頁顯示,一般都是通過分頁顯示,同時不顯示大量資料,當出現有大量資料又需要同時在網頁顯示效能優先可以考慮document.innerhtml。

三種迴圈的效能比較

下面是一段測試 listintegers new arraylist for int i 0 i 10000000 i long l1 system.currenttimemillis for int i 0 i integers.size i long l2 system.currenttimem...

RabbitMQ三種交換模式的效能比較

rabbitmq三種交換模式的效能比較 rabbitmq中,所有生產者提交的訊息都由exchange來接受,然後exchange按照特定的策略 到queue進行儲存。rabbitmq提供了四種exchange fanout,direct,topic,header header模式在實際使用中較少,本...

建立列表的幾種方式及其效能比較

python內建的兩種型別列表 list 和字典 dict 不屬於基本的資料型別。我在這兒列舉了幾種建立列表 list 的方式以及這些方式時間複雜度的比較,在計算時間複雜度時使用了time.timer類。建立列表的幾種方式總結 range函式變列表 deftest1 li list range 10...