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 相关文章推荐
改善你的jQuery的25个步骤 千倍级效率提升
Feb 11 Javascript
javascript 自动填写表单的实现方法
Apr 09 Javascript
基于prototype扩展的JavaScript常用函数库
Nov 30 Javascript
js jq 单击和双击区分示例介绍
Nov 05 Javascript
Javascript变量作用域详解
Dec 06 Javascript
javascript实现避免页面按钮重复提交
Jan 08 Javascript
Angular 常用指令实例总结整理
Dec 13 Javascript
JavaScript数据结构与算法之二叉树实现查找最小值、最大值、给定值算法示例
Mar 01 Javascript
jQuery zTree树插件的使用教程
Aug 16 jQuery
JS实现秒杀倒计时特效
Jan 02 Javascript
vue $router和$route的区别详解
Dec 02 Vue.js
详解JS WebSocket断开原因和心跳机制
May 07 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
这部番真是良心,画质好到像风景区,剧情让人跟着小公会热血沸腾
2020/03/10 日漫
CodeIgniter框架实现的整合Smarty引擎DEMO示例
2019/03/28 PHP
jscript之Open an Excel Spreadsheet
2007/06/13 Javascript
各浏览器对click方法的支持差异小结
2011/07/31 Javascript
js验证是否为数字的总结
2013/04/14 Javascript
禁止IE用右键的JS代码
2013/12/30 Javascript
js中substring和substr的定义和用法
2014/05/05 Javascript
jQuery ajax调用后台aspx后台文件的两种常见方法(不是ashx)
2016/06/28 Javascript
JS实现表单多文件上传样式美化支持选中文件后删除相关项
2016/09/30 Javascript
vue多级多选菜单组件开发
2020/09/08 Javascript
在Js页面通过POST传递参数跳转到新页面详解
2017/08/25 Javascript
JavaScript如何获取到导航条中HTTP信息
2017/10/10 Javascript
jQuery实现切换隐藏与显示同时切换图标功能
2017/10/29 jQuery
jquery根据name取得select选中的值实例(超简单)
2018/01/25 jQuery
20个必会的JavaScript面试题(小结)
2019/07/02 Javascript
JS+Canvas实现五子棋游戏
2020/08/26 Javascript
jQuery实现简单弹幕制作
2020/12/10 jQuery
六个窍门助你提高Python运行效率
2015/06/09 Python
Python使用urllib2模块实现断点续传下载的方法
2015/06/17 Python
python2 与python3的print区别小结
2018/01/16 Python
python 显示数组全部元素的方法
2018/04/19 Python
对IPython交互模式下的退出方法详解
2019/02/16 Python
Python中整数的缓存机制讲解
2019/02/16 Python
ubuntu 18.04搭建python环境(pycharm+anaconda)
2019/06/14 Python
如何使用Python实现斐波那契数列
2019/07/02 Python
python获取网络图片方法及整理过程详解
2019/12/20 Python
python GUI库图形界面开发之PyQt5窗口背景与不规则窗口实例
2020/02/25 Python
基于SQLAlchemy实现操作MySQL并执行原生sql语句
2020/06/10 Python
Python3压缩和解压缩实现代码
2021/03/01 Python
CSS3实现翘边的阴影效果的代码示例
2016/06/13 HTML / CSS
HTML5 canvas 瀑布流文字效果的示例代码
2018/01/31 HTML / CSS
大学生会计职业生涯规划范文
2014/02/28 职场文书
内科护士节演讲稿
2014/09/11 职场文书
小学运动会报道稿
2015/07/22 职场文书
考试后的感想
2015/08/07 职场文书
2019年市场部个人述职报告(三篇)
2019/10/23 职场文书