as shown in the picture, after clicking the button, you append a new button in document.body. How did the new button be updated to the page? will the original button be rendered again?
as shown in the picture, after clicking the button, you append a new button in document.body. How did the new button be updated to the page? will the original button be rendered again?
originally, I thought that since it was appendChild, the last child element added as a body node would not re-render the entire Dom tree, but I just opened the console on this page and tried it, which seemed different from what I had expected.
Performance
6634/50=132.68
intervalbody132divRendering1433.7painting376.2
DOM
Maintimerfired- recalculate style - Layout - update layer tree - paint - composite()layers
Layout paint Layer Root-sharpdocument
document.body.appendChild()DOM
==============================================================================
layer root -sharpdocument
layout rootnodes that need layout 
el
Nodes that need layout1059 of 1059
bodyappendChild
nodes that need layout layoutnodes641
DOMChrome
======================================PS======================================
emmmmm
beforebodyneed layout
body
adding and deleting elements will cause the browser to "rearrange"
Yes, because the structure of the page has been changed
should be, the browser needs to recalculate the position of each node, otherwise how do you know whether the new addition is in front or behind?