1、减少代码中事件处理程序的数量,是减少内存开销,提升网页速度的有效手段

事件委托:

<ul id="ul">
<li id="goSomewhere">goSomewhere</li>
<li id="doSomething">doSomething</li>
<li id="sayHi">sayHi</li>
</ul> <script>
var ul=document.getElementById("ul"); EventUtil.addHandler(ul,"click",function(event){
event=EventUtil.getEvent(event);
var target=EventUtil.getTarget(event);
switch(target.id) {
case "goSomewhere":
location.href="https://www.baidu.com";
break;
case "doSomething":
document.title="I changed the title";
break;
case "sayHi":
alert("hi");
break;
}
});
</script>

核心:利用冒泡原理,将事件绑定到父元素,减少内存消耗,提升性能

利用event属性找到事件源,将事件定位到具体元素上

2、减少“空事件处理程序”

2.1、绑定有事件处理程序的元素,通过DOM操作被移除 ,但事件还在,由此产生内存浪费:

var btn=document.getElementById("btn");
EventUtil.addHandler(btn,"click",function(){
  btn.onclick=null;
  document.getElementById("div").innerHTML="processing...";
});

解决方案:手动移除

2.2、页面卸载时,事件处理程序滞留

解决方案:在页面卸载之前,通过onunload移除所有事件处理程序

JS事件(五)内存与性能的更多相关文章

  1. JS事件 之内存与性能

    有必要限制一个页面中事件处理程序的数量,数量太多会导致大量内存,而且也会让用户更加页面反应不够灵敏. 建立在事件冒泡机制之上的事件委托技术,可以有效减少事件处理程序的数量. <div id=&q ...

  2. JavaScript 事件对内存和性能的影响

    程序代码: <%-- Created by IntelliJ IDEA. User: 乔克叔叔 Date: 2017/12/26 Time: 16:45 To change this templ ...

  3. JavaScript 中的内存和性能、模拟事件(读书笔记思维导图)

    由于事件处理程序可以为现代 Web 应用程序提供交互能力,因此许多开发人员会不分青红皂白地向页面中添加大量的处理程序.在 JavaScript 中,添加到页面上的事件处理程序数量将直接关系到页面的整体 ...

  4. {Python之线程} 一 背景知识 二 线程与进程的关系 三 线程的特点 四 线程的实际应用场景 五 内存中的线程 六 用户级线程和内核级线程(了解) 七 python与线程 八 Threading模块 九 锁 十 信号量 十一 事件Event 十二 条件Condition(了解) 十三 定时器

    Python之线程 线程 本节目录 一 背景知识 二 线程与进程的关系 三 线程的特点 四 线程的实际应用场景 五 内存中的线程 六 用户级线程和内核级线程(了解) 七 python与线程 八 Thr ...

  5. js事件冒泡和事件委托

    js事件冒泡 js所谓的事件冒泡就是子级元素的某个事件被触发,它的上级元素的该事件也被递归执行 html: <ul class="clearfix" data-type=&q ...

  6. js事件相关面试题

    说是面试题,其实也相当于是对js事件部分知识点的一个总结.简单内容一笔带过,了解详情我都给出了参考链接,都是之前写的一些相关文章.JavaScript本身没有事件模型,但是环境可以有. DOM:add ...

  7. js事件流机制冒泡和捕获

    JavaScript与HTML之间的交互是通过事件实现的.事件,就是文档或浏览器窗口中发生的一些特定的交互瞬间. 事件流 从页面中接收事件的顺序称为事件流. IE --> 事件冒泡流 Netsc ...

  8. 深入浅出js事件

    深入浅出js事件 一.事件流 事件冒泡和事件捕获分别由微软和网景公司提出,这两个概念是为了解决页面中事件流(事件发生顺序)的问题. <div id="outer"> & ...

  9. JS事件流、DOM事件流、IE事件处理、跨浏览器事件处理、事件对象与类型

    事件的移除 removeEventListener() 第二个参数需要指定要移除的事件句柄,不能是匿名函数,因为无法识别 想要移除成功,那么三个参数必须跟addEventListener中的三个完全一 ...

  10. 一文梳理JS事件

    JavaScript与HTML的交互是通过事件进行的.事件,就是文档或浏览器窗口发生的一些特定的交互瞬间. 事件流 事件捕获 事件冒泡 事件处理程序 事件委托 1. 事件流 如果单机页面上的某个按钮, ...

随机推荐

  1. 在IWMS中的分页效果

    第一步,你需要在后台修改你所要显示的新闻数目: 第二步,你需要把这段代码加到你需要分页的列表里边 代码: <%=config.TopAd%><asp:Literal id=" ...

  2. H5的使用

    1.h5的部分标签浏览器兼容性问题 解决方案: <head> <!--[if lt IE 9]>  <script src="http://cdn.static ...

  3. html class选择器与id选择器

    class选择器: <p class="p1"> .p1{ color:red; ..... } id选择器: <p id="p2"> ...

  4. jqprint控件使用

    /*! jQuery v1.9.1 | (c) 2005, 2012 jQuery Foundation, Inc. | jquery.org/license //@ sourceMappingURL ...

  5. How to reset macOS Icon Cache

    find . -name cuthead.txt find /private/var/folders/ -name 'com.apple.dock.iconcache' -delete find /p ...

  6. Vue渲染函数

    前面的话 Vue 推荐在绝大多数情况下使用 template 来创建HTML.然而在一些场景中,真的需要 JavaScript 的完全编程的能力,这就是 render 函数,它比 template 更 ...

  7. 关于Binder,作为应用开发者你需要知道的全部

    作者:rushjs https://www.jianshu.com/p/062a6e4f5cbe github 地址: https://github.com/rushgit/zhongwenjun.g ...

  8. 删除本地git的远程分支和远程删除git服务器的分支【转】

    转- 删除本地git的远程分支和远程删除git服务器的分支 在项目中使用git管理代码后,有些时候会创建很多不同名称的分支,以此区分各个分支代码功能. 而随着代码的合并,以前的分支就可能不再需要保存了 ...

  9. Go语言变量和常量

    一.变量相关 1.变量声明 C# : int a; Go : var a int; 需要在前面加一个var关键字,后面定义类型 可以使用 var( a int; b string;)减少var 2.变 ...

  10. ceph 重启,停止,开始

    systemctl restart ceph-mon@mon-node3 systemctl stop ceph-mon@mon-node3 systemctl start ceph-mon@mon- ...