Why do too many dom elements on a webpage cause the page to freeze?

When doing mobile terminal or other infinite pull-down loading, you will encounter the scene of continuously inserting DOM. With the increase of DOM, the page will freeze. In this case, the developer will take a series of optimization measures, such as reusing DOM, etc. , So why does Caton appear? This article will explore this question.

When the webpage freezes, the browser process takes up a lot of memory, which means that when the freeze occurs, the browser occupies a lot of memory, as shown in the figure:

An example:

<body>
    <div id="app"></div>
</body>
<script>
    addDom()
    addDom()
    addDom()
    addDom()
    addDom()
    function addDom(){
        let d = document.createDocumentFragment();
       
        for(var i = 0;i<30;i++){
            let li = document.createElement('li')
            li.addEventListener('click', function(e) {
                let _this = e.target;
                let dom = e.target.tagName.toLowerCase();
                _this.style.color = 'red';
            })
        li.innerHTML = `</div>
            <h4>
                测试图片 
            </h4>
            <img style = "height:20px;width:100px" src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1591105123139&di=90a63b4962d0b4405ce65c2096a676c2&imgtype=0&src=http%3A%2F%2Fimg0.imgtn.bdimg.com%2Fit%2Fu%3D3769023270%2C3433174748%26fm%3D214%26gp%3D0.jpg"/>
            </div>`
            d.appendChild(li)
        }
        document.getElementById('app').appendChild(d)
    }
</script>

A drop-down loading list, as the dom increases, HEAP SNAPSHOTS gradually increases, as shown in the following figure:

So which part of the occupied memory has increased?

It can be seen from the above that as the dom increases, the memory occupied by HTMLLIElement gradually increases. This is because LI elements are added to the page during the pull-down loading process.

shallow size和retained size

Shallow Size：

Shallow size is the size of the memory occupied by the object itself, excluding the objects it refers to.

The Shallow size of a regular object (not an array) is determined by the number and type of its member variables.
The shallow size of the array is determined by the type of the array element (object type, basic type) and the length of the array.

Retained Size:

对象的Retained Size = 对象本身的Shallow Size + 对象能直接或间接访问到的对象的Shallow Size
That is to say Retained Size , it is the sum of the memory that can be recovered after the object is destroyed GC（Garbage Collection） .

Here GC refers to garbage collection, and the mainstream garbage collection mechanism of browsers is mark clearing (there is reference count clearing in ie).

In addition to the increase in dom node memory, the memory occupied by listening events is also gradually increasing

The memory for monitoring events is also gradually increasing

As the memory usage increases, when it reaches a certain level, the webpage will freeze.

Solution:

1. Reuse the dom structure to create a virtual list

2. Use event delegation to bind the listening event to the parent element

reference:

https://www.cnblogs.com/yanglongbo/articles/9762359.html

https://blog.csdn.net/strange_monkey/article/details/81746232