大家好，我在網路上看到文章，瀏覽器渲染原理簡介
其中一段是
減少 reflow/repaint
下面是一些 Best Practices：
1）不要一條一條地修改 DOM 的樣式。與其這樣，還不如預先定義好 css 的 class，然後修改 DOM 的 className。
2）把 DOM 離線後修改。如：
我不太懂第2點中的後面兩個範例，
已邀請的邦友 {{ invite_list.length }}/5
簡單的說就是要避免瀏覽器做大量重繪的動作。
先把 DOM 給 display:none，意思是我得在 HTML 預先把它給 display:none，然後操作 JS 完畢後，在顯示出來嗎?
對，這樣只要在display:none 的時候會reflow。
clone 一個 DOM 結點到內存裡，這對我來說就很難理解了，有推薦什麼關鍵字或是文章嗎?還是有哪位好心大大給個講解。
除了 sakashi 的連結，還有jQuery的clone()，這些都可以把node複製到記憶體，改完後再交換。
其實最實用的應該還是改class。
了解，所以總結一下就是
最推崇的做法便是先寫好class，然後JS操作的是class的增加與刪除，而不是CSS的更改
對，看那篇文章，「在firefox下」，因為寫好的css會先被組成css樹，不用整個重新來。
其他瀏覽器不確定。
但是有些情況是class增刪無法處理的，像重做動畫，所以也得會複製node的方法。
https://css-tricks.com/restart-css-animation/
恩~我看了看內容，似乎可以用增刪class，
重點應該在這裡
void element.offsetWidth;
我個人猜測，可能是在JS一開始的計算是他已經到達最終位置了，所以沒有動畫的必要，
但是加上這行，因為最終位置變成了undefined，所以增刪class才可以成功。
我剛學程式碼，很高興有人可以討論^^
https://developer.mozilla.org/zh-CN/docs/Web/API/HTMLElement/offsetWidth
yes，你的理解應該沒錯。
或許用void element.offsetHeight也是同樣效果，你可以試試看
iThome鐵人賽
看影片追技術