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 相关文章推荐
JavaScript在IE中“意外地调用了方法或属性访问”
Nov 19 Javascript
JS 文字符串转换unicode编码函数
May 30 Javascript
JS 在指定数组中随机取出N个不重复的数据
Jun 10 Javascript
jquery实现鼠标滑过小图时显示大图的方法
Jan 14 Javascript
jQuery表单美化插件jqTransform使用详解
Apr 12 Javascript
js兼容火狐获取图片宽和高的方法
May 21 Javascript
jQuery中slidedown与slideup方法用法示例
Sep 16 Javascript
AngularJS中使用three.js的实例详解
Jul 21 Javascript
基于JavaScript实现淘宝商品广告效果
Aug 10 Javascript
JS实现的数组去除重复数据算法小结
Nov 17 Javascript
讲解vue-router之命名路由和命名视图
May 28 Javascript
微信小程序form表单组件示例代码
Jul 15 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
php 转换字符串编码 iconv与mb_convert_encoding的区别说明
2011/11/10 PHP
TP5框架model常见操作示例小结【增删改查、聚合、时间戳、软删除等】
2020/04/05 PHP
分享精心挑选的12款优秀jQuery Ajax分页插件和教程
2012/08/09 Javascript
通过js为元素添加多项样式,浏览器全兼容写法
2014/08/30 Javascript
JavaScript动态添加列的方法
2015/03/25 Javascript
简介JavaScript中toUpperCase()方法的使用
2015/06/06 Javascript
jQuery简单获取键盘事件的方法
2016/01/22 Javascript
基于JS实现移动端访问PC端页面时跳转到对应的移动端网页
2020/12/24 Javascript
JavaScript知识点总结(十)之this关键字
2016/05/31 Javascript
javascript设计模式之module(模块)模式
2016/08/19 Javascript
jQuery实现为LI列表前3行设置样式的方法【2种方法】
2016/09/04 Javascript
jquery获取input type=text中的值的各种方式(总结)
2016/12/02 Javascript
JavaScript定义函数_动力节点Java学院整理
2017/06/27 Javascript
详解jQuery同步Ajax带来的UI线程阻塞问题及解决办法
2017/08/09 jQuery
vue监听scroll的坑的解决方法
2017/09/07 Javascript
jquery实现倒计时小应用
2017/09/19 jQuery
vue select二级联动第二级默认选中第一个option值的实例
2018/01/10 Javascript
vue2配置scss的方法步骤
2019/06/06 Javascript
Layui带搜索的下拉框的使用以及动态数据绑定方法
2019/09/28 Javascript
使用Vue实现调用接口加载页面初始数据
2019/10/28 Javascript
Python解释执行原理分析
2014/08/22 Python
使用Python脚本在Linux下实现部分Bash Shell的教程
2015/04/17 Python
Python中用sleep()方法操作时间的教程
2015/05/22 Python
Python自动化部署工具Fabric的简单上手指南
2016/04/19 Python
python3中dict(字典)的使用方法示例
2017/03/22 Python
浅谈Python实现贪心算法与活动安排问题
2017/12/19 Python
Python 隐藏输入密码时屏幕回显的实例
2019/02/19 Python
10种CSS3实现的loading动画,挑一个走吧?
2020/11/16 HTML / CSS
比利时香水网上商店:NOTINO
2018/03/28 全球购物
医学检验专业自荐信
2014/09/18 职场文书
社区工作者个人总结
2015/02/28 职场文书
元旦主持词开场白
2015/05/29 职场文书
2015年教师国培感言
2015/08/01 职场文书
2016孝老爱亲模范事迹材料
2016/02/26 职场文书
python通过opencv调用摄像头操作实例分析
2021/06/07 Python
教你使用TensorFlow2识别验证码
2021/06/11 Python