清空元素html("") innerHTML="" 与 empty()的区别和应用(推荐)


Posted in Javascript onAugust 14, 2017

一、清空元素的区别

     1、错误做法一:

           $("#test").html("");//该做法会导致内存泄露

     2、错误做法二:

           $("#test")[0].innerHTML="";  ;//该做法会导致内存泄露

     3、正确做法:

        //$("#test").empty();       

二、原理:

在 jQuery 中用 innerHTML 的方法来清空元素,是必然会导致内存泄露的,由于 jquery 对于同一元素多事件处理没有直接采用浏览器事件模型,而是自己缓存事件,遍历触发,以及便于 trigger 程序触发 :

// Init the element's event structure 
 var events = jQuery.data(elem, "events") || jQuery.data(elem, "events", {}), 
  handle = jQuery.data(elem, "handle") || jQuery.data(elem, "handle", function(){ 
  // Handle the second event of a trigger and when 
  // an event is called after a page has unloaded 
  return typeof jQuery !== "undefined" && !jQuery.event.triggered ? 
   jQuery.event.handle.apply(arguments.callee.elem, arguments) : 
   undefined; 
  });

采用 data 方法,将一些数据关联到了元素上面,上述事件即是采用该机制缓存事件监听器。

那么就可以知道,直接 innerHTML=“” 而不通知 jquery 清空与将要删除元素关联的数据,那么这部分数据就再也释放不了了,即为内存泄露。

remove: function( selector ) { 
 if ( !selector || jQuery.filter( selector, [ this ] ).length ) { 
  // Prevent memory leaks 
  jQuery( "*", this ).add([this]).each(function(){ 
  jQuery.event.remove(this); 
  jQuery.removeData(this); 
  }); 
  if (this.parentNode) 
  this.parentNode.removeChild( this ); 
 } 
 }, 
 empty: function() { 
 // Remove element nodes and prevent memory leaks 
 jQuery(this).children().remove(); 
 
 // Remove any remaining nodes 
 while ( this.firstChild ) 
  this.removeChild( this.firstChild ); 
 }

  以上就是小编为大家整理的清空元素html("")、innerHTML="" 与 empty()的区别和应用的全部内容啦~希望能够帮助到各位朋友~~

Javascript 相关文章推荐
JScript 脚本实现文件下载 一般用于下载木马
Oct 29 Javascript
JS 对象介绍
Jan 20 Javascript
jquery.cvtooltip.js 基于jquery的气泡提示插件
Nov 19 Javascript
javascript真的不难-回顾一下基础知识
Jan 15 Javascript
js实现进度条的方法
Feb 13 Javascript
javascript实现数字倒计时特效
Mar 30 Javascript
学习Angularjs分页指令
Jul 01 Javascript
Bootstrap DateTime Picker日历控件简单应用
Mar 25 Javascript
使用vuex缓存数据并优化自己的vuex-cache
May 30 Javascript
JS实现的贪吃蛇游戏案例详解
May 01 Javascript
JavaScript实现的联动菜单特效示例
Jul 08 Javascript
js实现录音上传功能
Nov 22 Javascript
JavaScript监听手机物理返回键的两种解决方法
Aug 14 #Javascript
jQuery绑定事件方法及区别(bind,click,on,live,one)
Aug 14 #jQuery
js单页hash路由原理与应用实战详解
Aug 14 #Javascript
jQuery选择器特殊字符与属性空格问题
Aug 14 #jQuery
详解升级react-router 4 踩坑指南
Aug 14 #Javascript
javaScript封装的各种写法
Aug 14 #Javascript
vue教程之toast弹框全局调用示例详解
Aug 24 #Javascript
You might like
PHP 杂谈《重构-改善既有代码的设计》之五 简化函数调用
2012/05/07 PHP
关于 Laravel Redis 多个进程同时取队列问题详解
2017/12/25 PHP
laravel5实现微信第三方登录功能
2018/12/06 PHP
PHP实现抽奖功能实例代码
2020/06/30 PHP
用Greasemonkey 脚本收藏网站会员信息到本地
2009/10/26 Javascript
javascript 日期时间 转换的方法
2013/02/21 Javascript
JavaScript异步加载浅析
2014/12/28 Javascript
一个超简单的jQuery回调函数例子(分享)
2016/08/08 Javascript
vue-cli项目中使用echarts图表实例
2018/10/22 Javascript
node实现简单的增删改查接口实例代码
2019/08/22 Javascript
vue下拉刷新组件的开发及slot的使用详解
2020/12/23 Vue.js
Python简单获取自身外网IP的方法
2016/09/18 Python
Python中pip更新和三方插件安装说明
2018/07/08 Python
利用Python将每日一句定时推送至微信的实现方法
2018/08/13 Python
python中的decimal类型转换实例详解
2019/06/26 Python
创建Shapefile文件并写入数据的例子
2019/11/26 Python
Python random模块制作简易的四位数验证码
2020/02/01 Python
python 函数中的参数类型
2020/02/11 Python
django-利用session机制实现唯一登录的例子
2020/03/16 Python
在TensorFlow中实现矩阵维度扩展
2020/05/22 Python
HTML5的结构和语义(5):内嵌媒体
2008/10/17 HTML / CSS
纽约的奢华内衣店:Journelle
2016/07/29 全球购物
意大利在线药房:shop-farmacia.it
2019/03/12 全球购物
Mountain Hardwear官网:攀岩服装和户外装备
2019/09/26 全球购物
What is view? why do we have view?
2012/06/22 面试题
高级人员简历的自我评价分享
2013/11/03 职场文书
高中毕业自我鉴定
2013/12/19 职场文书
学习自我鉴定
2014/02/01 职场文书
创业者是否需要商业计划书?
2014/02/07 职场文书
路政管理毕业自荐书范文
2014/02/10 职场文书
中学生运动会入场词
2014/02/12 职场文书
公安学专业求职信
2014/07/27 职场文书
三下乡个人总结
2015/03/04 职场文书
个人简历自我评价怎么写
2015/03/10 职场文书
管理者们如何制定2019年的工作计划?
2019/07/01 职场文书
go语言中切片与内存复制 memcpy 的实现操作
2021/04/27 Golang