iT邦幫忙

1

Web: 什麼是 "clone 一個 DOM 結點到內存裡" ?

大家好,我在網路上看到文章,瀏覽器渲染原理簡介

其中一段是

減少 reflow/repaint
下面是一些 Best Practices:
1)不要一條一條地修改 DOM 的樣式。與其這樣,還不如預先定義好 css 的 class,然後修改 DOM 的 className。
2)把 DOM 離線後修改。如:

  • 使用 documentFragment 對象在內存裡操作 DOM
  • 先把 DOM 給 display:none(有一次 reflow),然後你想怎麼改就怎麼改。比如修改 100 次,然後再把他顯示出來。
  • clone 一個 DOM 結點到內存裡,然後想怎麼改就怎麼改,改完後,和在線的那個的交換一下。

我不太懂第2點中的後面兩個範例,

  1. 先把 DOM 給 display:none,意思是我得在 HTML 預先把它給 display:none,然後操作 JS 完畢後,在顯示出來嗎?
  2. clone 一個 DOM 結點到內存裡,這對我來說就很難理解了,有推薦什麼關鍵字或是文章嗎?還是有哪位好心大大給個講解。
看更多先前的討論...收起先前的討論...
yoching iT邦高手 1 級 ‧ 2018-12-18 13:34:17 檢舉
clone 就是「克隆」的意思,講白話點就是「複製」
Peter iT邦新手 5 級 ‧ 2018-12-18 13:36:20 檢舉
恩@@ 我想了解有什麼方法可以複製??
sakashi iT邦新手 5 級 ‧ 2018-12-18 14:38:33 檢舉
https://www.w3schools.com/jsref/met_node_clonenode.asp 可以參考一下喔
Peter iT邦新手 5 級 ‧ 2018-12-19 00:36:01 檢舉
謝謝~

1 個回答

0
froce
iT邦高手 1 級 ‧ 2018-12-18 19:25:11

簡單的說就是要避免瀏覽器做大量重繪的動作。

先把 DOM 給 display:none,意思是我得在 HTML 預先把它給 display:none,然後操作 JS 完畢後,在顯示出來嗎?

對,這樣只要在display:none 的時候會reflow。

clone 一個 DOM 結點到內存裡,這對我來說就很難理解了,有推薦什麼關鍵字或是文章嗎?還是有哪位好心大大給個講解。

除了 sakashi 的連結,還有jQuery的clone(),這些都可以把node複製到記憶體,改完後再交換。

其實最實用的應該還是改class。

看更多先前的回應...收起先前的回應...
Peter iT邦新手 5 級 ‧ 2018-12-19 00:39:33 檢舉

了解,所以總結一下就是
最推崇的做法便是先寫好class,然後JS操作的是class的增加與刪除,而不是CSS的更改

froce iT邦高手 1 級 ‧ 2018-12-19 08:23:45 檢舉

對,看那篇文章,「在firefox下」,因為寫好的css會先被組成css樹,不用整個重新來。
其他瀏覽器不確定。

但是有些情況是class增刪無法處理的,像重做動畫,所以也得會複製node的方法。
https://css-tricks.com/restart-css-animation/

Peter iT邦新手 5 級 ‧ 2018-12-19 14:57:11 檢舉

恩~我看了看內容,似乎可以用增刪class
重點應該在這裡

void element.offsetWidth;

我個人猜測,可能是在JS一開始的計算是他已經到達最終位置了,所以沒有動畫的必要,

但是加上這行,因為最終位置變成了undefined,所以增刪class才可以成功。

Peter iT邦新手 5 級 ‧ 2018-12-19 14:58:14 檢舉

我剛學程式碼,很高興有人可以討論^^

froce iT邦高手 1 級 ‧ 2018-12-19 15:33:54 檢舉

https://developer.mozilla.org/zh-CN/docs/Web/API/HTMLElement/offsetWidth

yes,你的理解應該沒錯。
或許用void element.offsetHeight也是同樣效果,你可以試試看

我要發表回答

立即登入回答