1. 有必要限制一个页面中事件处理程序的数量,数量太多会导致大量内存,而且也会让用户更加页面反应不够灵敏。
  2. 建立在事件冒泡机制之上的事件委托技术,可以有效减少事件处理程序的数量。
  3.  <div id="box">
    <input type="button" id="add" value="添加" />
    <input type="button" id="remove" value="删除" />
    <input type="button" id="move" value="移动" />
    <input type="button" id="select" value="选择" />
    </div>
    <script>
    window.onload = function(){
    var Add = document.getElementById("add");
    var Remove = document.getElementById("remove");
    var Move = document.getElementById("move");
    var Select = document.getElementById("select"); Add.onclick = function(){
    alert('添加');
    };
    Remove.onclick = function(){
    alert('删除');
    };
    Move.onclick = function(){
    alert('移动');
    };
    Select.onclick = function(){
    alert('选择');
    } }
    </script>
  4. 核心:利用冒泡原理,将事件绑定到父元素,减少内存消耗,提升性能;利用event属性找到事件源,将事件定位到具体元素上。
  5. 建议在浏览器卸载页面之前移除页面中的所有事件处理程序。
    var btn=document.getElementById("btn");
    EventUtil.addHandler(btn,"click",function(){
      btn.onclick=null;
      document.getElementById("div").innerHTML="processing...";
    });

      解决方法: 手动移除

JS事件 之内存与性能的更多相关文章

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

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

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

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

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

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

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

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

  5. 深入浅出js事件

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

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

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

  7. 一文梳理JS事件

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

  8. Node.js精进(10)——性能监控(下)

    本节会重点分析内存和进程奔溃,并且会给出相应的监控方法. 本系列所有的示例源码都已上传至Github,点击此处获取. 一.内存 虽然在 Node.js 中并不需要手动的对内存进行分配和销毁,但是在开发 ...

  9. js事件浅析

    js中关于DOM的操作很多,因此js事件机制也就尤为重要. 事件绑定形式: 一. 内联形式 耦合度高,不利于维护 <button onclick="alert('你点击了这个按钮'); ...

随机推荐

  1. Ant的使用

    Ant的使用 什么是Apache Ant Apache Ant是一个基于java的软件构建工具(build tool),理论上它有点类似C/C++的make工具 为什么要用ant? make, gnu ...

  2. Linux系列教程(二十三)——Linux的服务管理

    前面我们讲解Linux软件包管理之源码包.脚本安装包时,我们介绍了rpm包和源码包由于安装位置的不同,会对服务的启动造成影响,具体是什么,本篇博客我们来详细介绍. 1.Linux服务管理总览 我们可以 ...

  3. RocketMQ快速入门

    前面几篇文章介绍了为什么选择RocketMQ,以及与kafka的一些对比: 阿里 RocketMQ 优势对比,方便大家对于RocketMQ有一个简单的整体了解,之后介绍了:MQ 应用场景,让我们知道M ...

  4. pku夏令营面试

    北大面试题目: 一.内存交换 内存交换(对换)的基本思想是,把处于等待状态(或在CPU调度原则下被剥夺运行权利) 的程序从内存移到辅存,把内存空间腾出来,这一过程又叫换出:把准备好竞争CPU运行的程序 ...

  5. Geth控制台使用及Web3.js使用实战

    在开发以太坊去中心化应用,免不了和以太坊进行交互,那就离不开Web3. Geth 控制台(REPL)实现了所有的web3 API及Admin API, 使用好 Geth 就是必修课.结合Geth命令用 ...

  6. Innodb中的锁

    Innodb中的锁 共享锁和排它锁(Shared and Exclusive Locks)共享锁和排它锁是行级锁,有两种类型的行级锁 共享锁(s lock)允许持有锁的事务对行进行读取操作 排它锁(x ...

  7. Web应用与应用层协议

    Web应用与应用层协议 本篇博文中的主要参考文献是<计算机网络高级教程>,分别是吴功宜老先生和吴英教授合著.这部教程是我研究生老师所推荐的网络必读科目,由于该教程讲解的基础知识详细,但内容 ...

  8. 洛谷最短路计数SPFA

    题目描述 给出一个N个顶点M条边的无向无权图,顶点编号为1-N.问从顶点1开始,到其他每个点的最短路有几条. 输入输出格式 输入格式: 输入第一行包含2个正整数N,M,为图的顶点数与边数. 接下来M行 ...

  9. dij洛谷电车

    //Gang #include<iostream> #include<cstring> #include<algorithm> #include<cstdio ...

  10. SpringCache与redis集成,优雅的缓存解决方案

    缓存可以说是加速服务响应速度的一种非常有效并且简单的方式.在缓存领域,有很多知名的框架,如EhCache .Guava.HazelCast等.Redis作为key-value型数据库,由于他的这一特性 ...