JavaScript事件中的内存与性能
theme: channing-cyan
这是我参与8月更文挑战的第28天，活动详情查看：8月更文挑战
为什么要说内存与性能
因为事件处理程序在web中可以实现交互等其他功能，所有我们很多开发者都会在页面中大量的使用事件处理，在js中每一个函数都是对象，都占用内存空间，而且我们快速触发事件，可能因为事件的先后顺序而导致交互延迟或者卡顿。我们往下说一下解决方法。
事件委托
事件委托可以解决过度事件处理程序，它的原理是利用事件冒泡，用一个事件来管理一种类型事件。
<body>
<ul>
<li id="jackson">jackson</li>
<li id="bear">bear</li>
<li id="daxiong">daxiong</li>
</ul>
</body>
<script>
ul = document.querySelector('ul');
ul.addEventListener('click', function(event){
let id = event.target.id;
console.log(id+'被点击了');
})
</script>
我们常规的话肯定是一个点击事件写一个方法，这样的话我们就避免了一直写，写一个就行了。
节流和防抖
节流和防抖也是一种方法，关于这个我相信大家在掘金上经常看到，这也是老生常谈的话题，我们设置节流和防抖可以避免用户一直操作事件从而引起的延迟或者奔溃，一般商城秒杀都设置的防抖或者节流，大家可不要死命点击了，没用。
总体来说防抖是控制次数，节流是控制频率，这里不展开讲了，不了解的可以掘金搜索查一下。
删除事件处理程序
这个方式更简单了，简单来说就是操作完及时把事件处理程序清空。一般我们删除的方式有俩种，一种是innerHTML替换页面元素或者内容，还有一种是removeChild()或者replaceChild()来移除。
最简单的还是在操作完的时候我们手动设置一下事件处理程序为null，这样会告诉浏览器，可以安全回收。
其实还可以回到事件委托上来，如果我们知道了页面有事件处理程序可能被移除，那我们直接给更高层次的元素上设置事件，这样同样可以达到目的。
本文参与 腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。
原始发表：2021-08-28，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
目录
腾讯云开发者
