Al realizar una terminal móvil u otra carga desplegable infinita, se encontrará con la escena de insertar continuamente DOM. Con el aumento de DOM, la página se congelará. En este caso, el desarrollador tomará una serie de medidas de optimización, como reutilizar DOM, etc. Entonces, ¿por qué aparece Caton? Este artículo explorará esta pregunta.
Cuando la página web se congela, el proceso del navegador ocupa mucha memoria, lo que significa que cuando se congela, el navegador ocupa mucha memoria, como se muestra en la figura:
Un ejemplo:
<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>Una lista de carga desplegable, a medida que aumenta el dom, HEAP SNAPSHOTS aumenta gradualmente, como se muestra en la siguiente figura:
Entonces, ¿qué parte de la memoria ocupada ha aumentado?
De lo anterior se puede ver que a medida que aumenta el dom, la memoria ocupada por HTMLLIElement aumenta gradualmente.Esto se debe a que los elementos LI se agregan a la página durante el proceso de carga desplegable.
tamaño superficial 和 tamaño retenido
Tamaño poco profundo:
El tamaño superficial es el tamaño de la memoria ocupada por el objeto mismo, excluyendo los objetos a los que se refiere.
- El tamaño reducido de un objeto regular (no una matriz) está determinado por el número y el tipo de sus variables miembro.
- El tamaño superficial de la matriz está determinado por el tipo del elemento de la matriz (tipo de objeto, tipo básico) y la longitud de la matriz.
Tamaño retenido:
对象的Retained Size = 对象本身的Shallow Size + 对象能直接或间接访问到的对象的Shallow Size
Es decir Retained Size , es la suma de la memoria que se puede recuperar luego de que el objeto es destruido GC（Garbage Collection） .
Aquí GC se refiere a la recolección de basura, y el mecanismo principal de recolección de basura de los navegadores es el borrado de marcas (hay un borrado de recuento de referencias en ie).
Además del aumento en la memoria del nodo dom, la memoria ocupada por los eventos de escucha también aumenta gradualmente.
La memoria para monitorear eventos también está aumentando gradualmente
A medida que aumenta el uso de la memoria, cuando alcanza un cierto nivel, la página web se congelará.
Solución:
1. Reutilizar la estructura dom para crear una lista virtual
2. Use la delegación de eventos para vincular el evento de escucha al elemento principal
referencia:
https://www.cnblogs.com/yanglongbo/articles/9762359.html
https://blog.csdn.net/strange_monkey/article/details/81746232