jQuery内存泄露解决办法


Posted in Javascript onDecember 13, 2016

本文大家分享了jQuery内存泄露解决办法,供大家参考,具体内容如下

思路:为JQuery扩展删除jquery元素对象的方法,大大减轻内存泄露的压力

;(function($){
 if(!$.lui.widget) $.lui.widget = {};
 //$.lui.newGuid()生成随机32位id

 //如果采用此方式多次生成jquery对象的话,html代码字符串会在内存中多次重复,占用额外的内容,也会有泄露。而$("<span></span>").attr('id',_id)写法无此问题。

 $.lui.widget.__clean$ = $("<span id='" + $.lui.newGuid()+ "'></span>");
 /**
 * 释放jquery对象,无返回值。此方法用以解决jquery的内存泄露问题
 */
 $.fn.del = function( selector, keepData ) {
 if ( !selector || $.filter( selector, [ this ] ).length ) {
  // 释放dom对象
  var item = $(this);
  var clearItem = $.lui.widget.__clean$;
  item.appendTo(clearItem);
  $('*',clearItem).each(function(i, e) {
  (events = $.data(this, 'events')) && $.each(events, function(i, e1) {
   $(e).unbind(i + '.*');
  });
  $.event.remove(this);
  $.removeData(this);
  });
  clearItem[0].innerHTML = '';
  item = null;
 }
 };

 /**
 * 计算字符串在某元素上不折行时的长度
 * @param {jQuery} $Element jquery元素
 * @param {String} str 字符串
 * @returns  {Number}  字符串长度(px)
 */
 $.lui.widget.clacStrLength = function($Element,str){
   var _id = $.lui.newGuid();
   var $tmpSpan = $("<span></span>").attr('id',_id).css({
    'position':'absolute',
    'top':'-1000px'
   }).appendTo('body');
   var _width = $tmpSpan.css({
    'font-family':$Element.css('font-family'),
    'font-size':$Element.css('font-size'),
    'letter-spacing':$Element.css('letter-spacing'),
    'word-spacing':$Element.css('word-spacing'),
    'text-indent':$Element.css('text-indent')
   }).text(str).innerWidth();
   $tmpSpan.del();
   $tmpSpan = null;
   return _width;
 };

 /**
 * 在某元素上按像素截取字符串 (采用浏览器默认处理空白方式,不适用于复杂场景,仅用于不换行情况下按像素截取字符串)
 * @param $Element jquery元素(该元素的字体设置必须已经确定)
 * @param str 字符串
 * @param limit  像素值
 * @returns 按像素截取后的字符串
 */
 $.lui.widget.substrByPx = function($Element,str,limit){
 if($Element === undefined || !$Element instanceof $) return '';
 if(str === undefined || typeof str != 'string') return '';
 if(limit === undefined) return str;
 if(!str || limit <=0 ) return '';
 var _str = new String(str);

 var _id = $.lui.newGuid();
 var $tmpSpan = $("<span></span>").attr('id',_id).css({
  'position':'absolute',
  'top':'-1000px'
 }).appendTo('body');
 var _width = $tmpSpan.css({
  'font-family':$Element.css('font-family'),
  'font-size':$Element.css('font-size'),
  'letter-spacing':$Element.css('letter-spacing'),
  'word-spacing':$Element.css('word-spacing'),
  'text-indent':$Element.css('text-indent')
 }).text(str).innerWidth();
 while( _width >limit){
  _str = _str.substring(0, _str.length-1);
  _width = $tmp.text(_str).innerWidth();
 }
 $tmpSpan.del();
 $tmpSpan = null;
 return _str;
 }; 
})(jQuery);

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
7个Javascript地图脚本整理
Oct 20 Javascript
改变状态栏文字的js代码
Jun 13 Javascript
原生JS和JQuery动态添加、删除表格行的方法
May 28 Javascript
Bootstrap项目实战之子栏目资讯内容
Apr 25 Javascript
jQuery+CSS实现一个侧滑导航菜单代码
May 09 Javascript
基于javascript实现数字英文验证码
Jan 25 Javascript
BootStrap select2 动态改变值的方法
Feb 10 Javascript
vue2.x 父组件监听子组件事件并传回信息的方法
Jul 17 Javascript
详解webpack loader和plugin编写
Oct 12 Javascript
Angular6 用户自定义标签开发的实现方法
Jan 08 Javascript
JavaScript数组常用的增删改查与其他属性详解
Oct 13 Javascript
使用Vue3+Vant组件实现App搜索历史记录功能(示例代码)
Jun 09 Vue.js
Angular 常用指令实例总结整理
Dec 13 #Javascript
jQuery UI制作选项卡(tabs)
Dec 13 #Javascript
详解Bootstrap各式各样的按钮(推荐)
Dec 13 #Javascript
javascript动画系列之模拟滚动条
Dec 13 #Javascript
js闭包用法实例详解
Dec 13 #Javascript
深入学习Bootstrap表单
Dec 13 #Javascript
ThinkJS中如何使用MongoDB的CURD操作
Dec 13 #Javascript
You might like
PHP4与PHP5的时间格式问题
2008/02/17 PHP
php str_replace的替换漏洞
2008/03/15 PHP
删除及到期域名的查看(抢域名必备哦)
2008/05/14 PHP
PHP session 会话处理函数
2016/06/06 PHP
php简单检测404页面的方法示例
2019/08/23 PHP
Laravel框架中集成MongoDB和使用详解
2019/10/17 PHP
Centos7.7 64位利用本地完整安装包安装lnmp/lamp套件教程
2021/03/09 Servers
DOM相关内容速查手册
2007/02/07 Javascript
Javascript绝句欣赏 一些经典的js代码
2012/02/22 Javascript
jQuery实现类似滑动门切换效果的层切换
2013/09/23 Javascript
关于bootstrap日期转化,bootstrap-editable的简单使用,bootstrap-fileinput的使用详解
2017/05/12 Javascript
认识less和webstrom的less配置方法
2017/08/02 Javascript
vue.js的手脚架vue-cli项目搭建的步骤
2017/08/30 Javascript
React教程之封装一个Portal可复用组件的方法
2018/01/02 Javascript
「中高级前端面试」JavaScript手写代码无敌秘籍(推荐)
2019/04/08 Javascript
[04:50]DOTA2亚洲邀请赛小组赛第四日 TOP10精彩集锦
2015/02/02 DOTA
[01:00:13]完美世界DOTA2联赛 LBZS vs Forest 第一场 11.07
2020/11/09 DOTA
[01:22:28]DOTA2-DPC中国联赛 正赛 SAG vs RNG BO3 第一场 1月18日
2021/03/11 DOTA
python抓取网页中的图片示例
2014/02/28 Python
零基础写python爬虫之爬虫的定义及URL构成
2014/11/04 Python
用Python编写简单的定时器的方法
2015/05/02 Python
python调用虹软2.0第三版的具体使用
2019/02/22 Python
Django框架首页和登录页分离操作示例
2019/05/28 Python
Python3 requests文件下载 期间显示文件信息和下载进度代码实例
2019/08/16 Python
PyTorch中permute的用法详解
2019/12/30 Python
numpy库reshape用法详解
2020/04/19 Python
html5菜单折纸效果
2014/04/22 HTML / CSS
意大利香水和彩妆护肤品购物网站:Ditano
2017/08/13 全球购物
马来西亚最大的电器网站:Senheng
2017/10/13 全球购物
Notino匈牙利:购买香水和化妆品
2019/04/12 全球购物
Tomcat Mysql datasource数据源配置
2015/12/28 面试题
银行行长竞聘演讲稿
2014/04/23 职场文书
不尊敬老师的检讨书
2014/12/21 职场文书
销售内勤岗位职责范本
2015/04/13 职场文书
Go标准容器之Ring的使用说明
2021/05/05 Golang
《我的美好婚事》动画化决定纪念插画与先导PV公开
2022/04/06 日漫