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 相关文章推荐
js 禁用浏览器的后退功能的简单方法
Dec 10 Javascript
利用jquery动画特效和css打造的侧边弹出垂直导航
Apr 04 Javascript
js实现获取焦点后光标在字符串后
Sep 17 Javascript
详谈JavaScript 匿名函数及闭包
Nov 14 Javascript
详解JavaScript中的自定义事件编写
May 10 Javascript
Bootstrap实现带动画过渡的弹出框
Aug 09 Javascript
浅析JavaScript函数的调用模式
Aug 10 Javascript
vue绑定设置属性的多种方式(5)
Aug 16 Javascript
JS获取一个表单字段中多条数据并转化为json格式
Oct 17 Javascript
详解create-react-app 2.0版本如何启用装饰器语法
Oct 23 Javascript
深入浅析Vue 中 ref 的使用
Apr 29 Javascript
vue 中使用print.js导出pdf操作
Nov 13 Javascript
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
Terran兵种对照表
2020/03/14 星际争霸
fleaphp常用方法分页之Pager使用方法
2011/04/23 PHP
通过chrome浏览器控制台(Console)进行PHP Debug的方法
2016/10/19 PHP
Android AsyncTack 异步任务实例详解
2016/11/02 PHP
Yii框架日志操作图文与实例详解
2019/09/09 PHP
jquery解决图片路径不存在执行替换路径
2013/02/06 Javascript
js获取下拉列表框中的value和text的值示例代码
2014/01/11 Javascript
Node.js中使用Log.io在浏览器中实时监控日志(等同tail -f命令)
2014/09/17 Javascript
实例分析javascript中的call()和apply()方法
2014/11/28 Javascript
jQuery中[attribute=value]选择器用法实例
2014/12/31 Javascript
jQuery插件Timelinr 实现时间轴特效
2015/10/04 Javascript
JavaScript函数的调用以及参数传递
2015/10/21 Javascript
AngularJs中Bootstrap3 datetimepicker使用实例
2016/12/13 Javascript
JS正则表达式封装与使用操作示例
2019/05/15 Javascript
vue实现前台列表数据过滤搜索、分页效果
2019/05/28 Javascript
详解element-ui级联菜单(城市三级联动菜单)和回显问题
2019/10/02 Javascript
jquery实现轮播图特效
2020/04/12 jQuery
VUE子组件向父组件传值详解(含传多值及添加额外参数场景)
2020/09/01 Javascript
[01:01:04]2018DOTA2亚洲邀请赛 4.5 淘汰赛 OpTic vs TNC 第一场
2018/04/06 DOTA
python遍历类中所有成员的方法
2015/03/18 Python
Python实现设置windows桌面壁纸代码分享
2015/03/28 Python
Python中动态创建类实例的方法
2017/03/24 Python
详解Python进程间通信之命名管道
2017/08/28 Python
Python pygorithm模块用法示例【常见算法测试】
2018/08/16 Python
python系统指定文件的查找只输出目录下所有文件及文件夹
2020/01/19 Python
英国排名第一的宠物店:PetPlanet
2020/02/02 全球购物
WSDL的操作类型主要有几种
2013/07/19 面试题
小区门卫工作职责
2013/12/14 职场文书
网络工程师职业规划
2014/02/10 职场文书
企业仓管员岗位职责
2014/06/15 职场文书
社区反邪教工作方案
2014/06/16 职场文书
幼儿园个人师德总结
2015/02/06 职场文书
英雄儿女观后感
2015/06/09 职场文书
基于Go Int转string几种方式性能测试
2021/04/28 Golang
详解Spring Boot使用系统参数表提升系统的灵活性
2021/06/30 Java/Android
Spring Boot DevTools 全局配置学习指南
2022/03/31 Java/Android