JavaScript事件中的内存与性能
2023-06-13 09:15:05 时间
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,这样会告诉浏览器,可以安全回收。
其实还可以回到事件委托上来,如果我们知道了页面有事件处理程序可能被移除,那我们直接给更高层次的元素上设置事件,这样同样可以达到目的。
相关文章
- JavaScript 设计模式之组合模式
- JavaScript笔记(2)
- javascript性能优化_javascript框架是什么
- 用javascript分类刷leetcode3.动态规划(图文视频讲解)
- js正则表达式语法大全_JavaScript正则
- 【JavaScript】垃圾回收与内存管理(内存优化)
- JavaScript学习总结(五)——Javascript中==和===的区别详解编程语言
- Javascript不能释放内存.
- javascript学习随笔(编写浏览器脚本NavigatorScripting)
- javascript笔试题目附答案@20081025_jb51.net
- JavaScript设计模式富有表现力的Javascript(一)
- 验证javascript中Object和Function的关系的三段简单代码
- JavaScript高级程序设计读书笔记之八Function类及闭包
- javascript使td内容不换行不撑开
- JavaScript函数replace深入了解
- javascript内存管理详细解析
- 利用javascript判断文件是否存在
- JavaScript获取客户端计算机硬件及系统等信息的方法
- JavaScript实现从数组中选出和等于固定值的n个数