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. SpringMVC处理ajax请求的注意事项

    .首先要知道ajax请求的核心是JavaScrip对象和XmlHttpRequest,而浏览器请求的核心是浏览器 ajax请求 浏览器请求 场景一:使用ajax获取session中的user 从上图可 ...

  2. python操作Mysql基础

    import pymysql #不修改数据 def no_data_change(): db=pymysql.connect('host','user','pw','db_name') #host,u ...

  3. Ajax-javascript

    一.Web 2.0的特点 提到Ajax不得不提到WEB2.0 1.用户贡献内容 2.内容聚合RSS 3.更丰富的"用户体验" 二.Ajax的作用 无刷新:不刷新整个页面,只刷新局部 ...

  4. 阿里云VPS搭建Hexo博客

    最近买了一个阿里云服务器,准备写自己的网站,和将自己的作品放在上面:开始的时候,感觉就一个服务器应该很简单,但是从申请域名到备案,再到服务器搭建,没想到一波三折:闲话不多说,只是记录我在搭建时,最简单 ...

  5. 正确释放Vector的内存

    http://blog.jobbole.com/37700/ 今天在看微博的时候, 有人提出了一个对于Vector内存泄露的疑问( Link). 博主采用 Vector存储一些数据,但是发现在执行 c ...

  6. VMware下设置Centos7联网与固定IP连接Xshell

    爱折腾的小伙伴应该经常会用Vmware安装一些虚拟机用于学习,但是比如装了Linux,经常操作的时候非常切换窗口的时候非常麻烦,所以很多人都会选择用Xshell来连接本地的Linux虚拟机,但是用Xs ...

  7. django事务处理

    #导包 from django.db import transaction try: #django默认是自动提交到数据库,此处设置不让其自动提交 transaction.set_autocommit ...

  8. ubuntu debain下好用的编辑器

    geany: 轻量级的IDE apt-get install geany 用来写shell脚本和python十分方便.特别写python脚本时,它有丰富的提示和自动补全功能.查看代码也很方便

  9. 享元模式(Flyweight)

    享元模式(Flyweight) 享元模式的主要目的是实现对象的共享,即共享池,当系统中对象多的时候可以减少内存的开销,通常与工厂模式一起使用. FlyWeightFactory负责创建和管理享元单元, ...

  10. 16. 使用Exhibitor管理ZooKeeper

    Exhibitor是管理ZooKeeper服务实例的主管服务.由Netflix开发和开放源码,对于ZooKeeper的实例监控.备份/恢复.清理和可视化非常有用. Note Netflix Exhib ...