IE8浏览器iframe内存不回收的问题,网上解决方案无效。

即时光影 发布于 2013/08/26 09:13
阅读 4K+
收藏 2

本人负责一个Web信息系统,使用的ligerUI作为前端UI组件。

之前的布局方案是点击左侧菜单在页面右侧动态添加tab页面,动态tab页面使用的iframe,但是由于旧版本的ligerUi tab组件无法回收内存,并且客户的客户端主机配置很低(内存基本都小于1g,有的512MB),直接导致了用户体验很差,系统速度很慢,而且点开的tab页越多越慢,即便点开之后关闭也是如此。

LigerUI更新到1.2.1之后,tab页的内存不回收问题得到了解决,但是由于客户机配置过于老旧,我打算取消自动添加tab页的功能,点击菜单只刷新当前的tab页面,这样用户不需要时刻在意要关闭多余的tab页面。

但是郁闷的事情来了,即便是不停的刷新当前tab页面(即当前的iframe),内存依然不停增长,点一次增长一次,而且我在页面里使用了很多js,所以每次点击刷新,内存都要增加20mb多,对于客户的配置,操作个十几分钟内存就满了,越来越慢,只能关闭浏览器才能清内存,请问这是怎么回事?是不是我的页面js写的有问题?

在线求高手解答,感激不尽。

补充:

 $("ul.menulist li").live('click', function () {
                var jitem = $(this);
                var tabid = jitem.attr("tabid");
                var url = jitem.attr("url");
                if (!url) return;
                if (!tabid) {
                    //tabidcounter++;
                    tabid = "tabid" + tabidcounter;
                    jitem.attr("tabid", tabid);

                    //给url附加menuno
                    if (url.indexOf('?') > -1) url += "&";
                    else url += "?";
                    url += "MenuID=" + jitem.attr("menuid");

                    jitem.attr("url", url);
                }
                f_ChangeTab(tabid, $("span:first", jitem).html(), url);
            })
 function f_ChangeTab(tabid, text, url) {
            //if (!tab) return;
            //if (!tabid) {
            //    tabidcounter++;
            //    tabid = "tabid" + tabidcounter;
            //}
            $("#home").attr('src', 'about:blank');
            //$("iframe")[0].contentWindow.document.write('');
            //$("iframe")[0].contentWindow.close();
            $("iframe").remove();
            if (CollectGarbage) {
                CollectGarbage(); //IE 特有 释放内存
            }
            $("#divhome").html("<iframe frameborder='0' name='home' id='home' ></iframe>")

            $("#home").attr('src', url);
            //tab.overrideSelectedTabItem({ tabid: tabid, text: text, url: url });
        }
上面是我index页面菜单及点击刷新当前iframe的代码,包括注释部分我都尝试过,没有用

以下是问题补充:

@即时光影:我基本上可以确定是index页面的js代码出了问题,我建了一个基本上空的页面作为iframe的内页,只引用了jquery1.5.2,并写了一点html代码,点击index左侧按钮不停刷新frame内页内存依然增长。 (2013/08/27 10:13)
加载中
0
小五_开源
小五_开源
/*-------内存溢出修改-------*/
            var g = this, p = this.options;
            if (g.trigger('beforeRemoveTabItem', [tabid]) == false)
                return false;
            var currentIsSelected = $("li[tabid=" + tabid + "]", g.tab.links.ul).hasClass("l-selected");
            if (currentIsSelected)
            {
                $(".l-tab-content-item[tabid=" + tabid + "]", g.tab.content).prev().show();
                $("li[tabid=" + tabid + "]", g.tab.links.ul).prev().addClass("l-selected").siblings().removeClass("l-selected");
            }
            var contentItem = $(".l-tab-content-item[tabid=" + tabid + "]", g.tab.content); 
            var jframe = $('iframe', contentItem); 
            if (jframe.length)
            {
                var frame = jframe[0];
                frame.src = "about:blank";
                frame.contentWindow.document.write('');
                $.browser.msie && CollectGarbage();
                jframe.remove();
            } 
            contentItem.remove();
            $("li[tabid=" + tabid + "]", g.tab.links.ul).remove();
            g.setTabButton();
            g.trigger('afterRemoveTabItem', [tabid]);
            /*---------------------------------------*/
你看一下你的ligertab.js有没有这段 我加上这段之后就不溢出了 以前也是溢出 能达到 1.2G-1.5G
0
即时光影
即时光影

引用来自“小五_开源”的答案

/*-------内存溢出修改-------*/
            var g = this, p = this.options;
            if (g.trigger('beforeRemoveTabItem', [tabid]) == false)
                return false;
            var currentIsSelected = $("li[tabid=" + tabid + "]", g.tab.links.ul).hasClass("l-selected");
            if (currentIsSelected)
            {
                $(".l-tab-content-item[tabid=" + tabid + "]", g.tab.content).prev().show();
                $("li[tabid=" + tabid + "]", g.tab.links.ul).prev().addClass("l-selected").siblings().removeClass("l-selected");
            }
            var contentItem = $(".l-tab-content-item[tabid=" + tabid + "]", g.tab.content); 
            var jframe = $('iframe', contentItem); 
            if (jframe.length)
            {
                var frame = jframe[0];
                frame.src = "about:blank";
                frame.contentWindow.document.write('');
                $.browser.msie && CollectGarbage();
                jframe.remove();
            } 
            contentItem.remove();
            $("li[tabid=" + tabid + "]", g.tab.links.ul).remove();
            g.setTabButton();
            g.trigger('afterRemoveTabItem', [tabid]);
            /*---------------------------------------*/
你看一下你的ligertab.js有没有这段 我加上这段之后就不溢出了 以前也是溢出 能达到 1.2G-1.5G

这个是ligerTab1.2.1更新后的代码,我用过,的确在关闭tab页之后可以释放内存了。

但是我现在的设计方案改了,不再动态新增tab页面,而是只在当前tab页刷新。

但是每刷新一次,内存就增加一次,用了上面的回收方法依然无效。

0
hello_152
hello_152

你可以给你内嵌的iframe页面增加个事件清理处理函数,有DOM操作的,操作完没用的事件立即清掉;

初步估计是你的js写的有问题,把事件这一块处理好,是你加的事件,在不用时就要清除;

还有一种可能,你用的那个UI组件本身就有问题,

hello_152
hello_152
我不熟悉jQuery,估计帮不了你。
即时光影
即时光影
能给个具体的联系方式吗,想直接具体请教您
0
CeeFee
CeeFee
慎用 jquery.live 如非必要 直接用 jquery.click
即时光影
即时光影
live是需要慎用,但是感觉live不是造成内存增长的原因啊
0
lgscofield
lgscofield

其实Iframe的创建过程本来就是一个很耗资源的过程, 你的live用的没性能问题, 请看这篇介绍:http://www.williamlong.info/archives/3136.html, 主要介绍了Iframe的性能问题.

即时光影
即时光影
感谢您的回答
返回顶部
顶部