在做移动端或者其他无限下拉加载时会遇到不断插入dom的场景，随着dom的增多页面会出现卡顿，遇到这种情况开发者会采取一系列的优化措施，比如复用dom等，那么到底为什么会出现卡顿呢？本文将探讨这个疑问。
网页卡顿时，浏览器进程内存占用很大，这就说明在卡顿出现的时候，浏览器占用的内存是很大的，如图：
一个实例：
<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="/timg?image&quality=80&size=b9999_10000&sec=1591105123139&di=90a63b4962d0b4405ce65c2096a676c2&imgtype=0&src=http%3A%2F%2Fimg0.%2Fit%2Fu%3D3769023270%2C3433174748%26fm%3D214%26gp%3D0.jpg"/></div>`d.appendChild(li)}document.getElementById('app').appendChild(d)}</script>
一个下拉加载列表，随着dom的增加， HEAP SNAPSHOTS逐渐加大，如下图所示：
那么到底是哪部分占用内存增加了呢？
从上面可以看出随着dom的增加 ，HTMLLIElement占用的内存逐渐增加，这是由于下拉加载过程中在页面中添加了LI元素。
shallow size和retained size
Shallow Size：
Shallow size就是对象本身占用内存的大小，不包含其引用的对象。
常规对象（非数组）的 Shallow size 由其成员变量的数量和类型决定。数组的shallow size有数组元素的类型（对象类型、基本类型）和数组长度决定。
Retained Size:
对象的Retained Size = 对象本身的Shallow Size + 对象能直接或间接访问到的对象的Shallow Size
也就是说Retained Size就是该对象被GC（Garbage Collection）之后所能回收内存的总和。
这里GC是指垃圾回收，浏览器的主流垃圾回收机制时标记清除（ie中存在引用计数清除）。
除了dom节点内存增大，监听事件占用的内存也逐渐加大
监听事件的内存也逐渐增大
随着内存的占用增大，到一定程度时，网页就出现了卡顿。
解决办法：
1，重复利用dom结构，创建虚拟列表
2，使用事件委托，将监听事件绑定到父元素上
参考：
/yanglongbo/articles/9762359.html
/strange_monkey/article/details/81746232
