清空元素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 相关文章推荐
Javascript 获取滚动条位置等信息的函数
Sep 08 Javascript
jQuery和AngularJS的区别浅析
Jan 29 Javascript
JavaScript 2048 游戏实例代码(简单易懂)
Mar 25 Javascript
xmlplus组件设计系列之网格(DataGrid)(10)
May 05 Javascript
JavaScript中正则表达式判断匹配规则及常用方法
Aug 03 Javascript
基于JSONP原理解析(推荐)
Dec 04 Javascript
js字符串倒序的实例代码
Nov 30 Javascript
Vue CLI 3.x 自动部署项目至服务器的方法
Apr 02 Javascript
layui加载数据显示loading加载完成loading消失的实例代码
Sep 23 Javascript
Vue2.4+新增属性.sync、$attrs、$listeners的具体使用
Mar 08 Javascript
微信小程序仿通讯录功能
Apr 09 Javascript
vue element-ul实现展开和收起功能的实例代码
Nov 25 Vue.js
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
Zend Studio (eclipse)使用速度优化方法
2011/03/23 PHP
php强大的时间转换函数strtotime
2016/02/18 PHP
Laravel5.7 数据库操作迁移的实现方法
2019/04/12 PHP
thinkphp5.1框架模板赋值与变量输出示例
2020/05/25 PHP
关于viewport,Ext.panel和Ext.form.panel的关系
2009/05/07 Javascript
DOM Scripting中的图片切换[兼容Firefox]
2010/06/12 Javascript
JavaScript中的object转换函数toString()与valueOf()介绍
2014/12/31 Javascript
5个数组Array方法: indexOf、filter、forEach、map、reduce使用实例
2015/01/29 Javascript
JS+CSS实现简单滑动门(滑动菜单)效果
2015/09/19 Javascript
jQuery实现仿新浪微博浮动的消息提示框(可智能定位)
2015/10/10 Javascript
JS实现模拟百度搜索“2012世界末日”网页地震撕裂效果代码
2015/10/31 Javascript
laypage分页控件使用实例详解
2016/05/19 Javascript
Javascript 普通函数和构造函数的区别
2016/11/05 Javascript
jQuery控制控件文本的长度的操作方法
2016/12/05 Javascript
Bootstrap CSS布局之图像
2016/12/17 Javascript
微信小程序自定义模态弹窗组件详解
2019/12/24 Javascript
node爬取新型冠状病毒的疫情实时动态
2020/02/06 Javascript
javascript单张多张图无缝滚动实例代码
2020/05/10 Javascript
[53:20]2018DOTA2亚洲邀请赛 4.1 小组赛 A组加赛 VG vs OG
2018/04/03 DOTA
[49:18]2018DOTA2亚洲邀请赛 3.31 小组赛 A组 OG vs TNC
2018/04/01 DOTA
Python中的特殊语法:filter、map、reduce、lambda介绍
2015/04/14 Python
Python的爬虫包Beautiful Soup中用正则表达式来搜索
2016/01/20 Python
纯用NumPy实现神经网络的示例代码
2018/10/24 Python
django使用haystack调用Elasticsearch实现索引搜索
2019/07/24 Python
Python 使用多属性来进行排序
2019/09/01 Python
Python cookie的保存与读取、SSL讲解
2020/02/17 Python
Django中从mysql数据库中获取数据传到echarts方式
2020/04/07 Python
Canvas绘制浮动球效果的示例
2017/12/29 HTML / CSS
马德里竞技官方网上商店:Atletico Madrid Shop
2019/03/31 全球购物
庆祝教师节活动方案
2014/01/31 职场文书
大学生职业生涯规划大赛作品(精品)
2014/09/17 职场文书
2015年仓库管理员工作总结
2015/04/21 职场文书
信用卡工作证明范本
2015/06/19 职场文书
关于Python中*args和**kwargs的深入理解
2021/08/07 Python
html粘性页脚的具体使用
2022/01/18 HTML / CSS
Win11更新失败并提示0xc1900101
2022/04/19 数码科技