Important things to say three times:

Be sure to develop good coding habits!

Be sure to develop good coding habits!

Be sure to develop good coding habits!

1. Identify the problem

Recently, I am doing document parsing and rendering, which belong to DOM operation more frequently.

Write it down and run it, eh? Yeah, it’s fine. It’s perfect. A few more pages, and the Task Manager browser is taking up five gigabytes of memory, mom.

Since it’s a memory issue, it was a quick thought to take advantage of Chrome’s snapshot feature.

2. Solve problems

Create the first snapshot and sort it in reverse order by shallow size.

Turn to page 4 and create a second snapshot.

Compare the increments of two snapshots

Just pick one of them and locate it, and then we’ll hit the nail on the head.

Although I did not write this piece, BUT I think I will definitely write like this, so confident in myself!

What is detached DOM Elements?

Even if dom Elements are no longer in the DOM tree, but their references are still there, the memory occupied by the DOM Elements will not be freed because the reference is still there and the garbage collection mechanism will not recycle it because it is not in the DOM Tree.

4. Typical cases

var example = document.createElement("p"); example.id = "someText"; document.body.appendChild(example); var value = { text: document.getElementById('someText') }; function createFun() { value.text.innerHTML = "Javascript is not Java"; } createFun(); Function deleteFun() {// Remove from the dom tree, But the value of the text to her reference also in yo ~ document. Body. RemoveChild (document. GetElementById (' someText ')); } deleteFun();Copy the code

Let’s take a look at the snapshot

Here’s an online demo that you can check out. Jec. Fyi/demo/detach…

We must develop good coding habits!! Some honey bugs are probably the result of coding habits.

Reference Documents:

www.tutorialspoint.com/how-can-det…