Javascript 如何使用Chrome开发工具找出引用分离DOM树的内容
我正试图准确地找出如何获取哪个变量引用了分离的DOM树中的某些内容。我已经将问题隔离到两个简单的视图中,并尝试使用Chrome开发工具(在比较视图中)来找出引用分离节点的内容。我附上了一个开发工具的图片 开发工具的底部显示Javascript 如何使用Chrome开发工具找出引用分离DOM树的内容,javascript,dom,backbone.js,memory-leaks,google-chrome-devtools,Javascript,Dom,Backbone.js,Memory Leaks,Google Chrome Devtools,我正试图准确地找出如何获取哪个变量引用了分离的DOM树中的某些内容。我已经将问题隔离到两个简单的视图中,并尝试使用Chrome开发工具(在比较视图中)来找出引用分离节点的内容。我附上了一个开发工具的图片 开发工具的底部显示HomeView的el创建了一个分离的div。但我不知道从那以后该怎么办 我已经阅读了一大堆关于查明内存泄漏的堆栈溢出帖子和博客帖子,但我仍然无法理解这一点。我知道主干极有可能导致内存泄漏,所以我实施了“僵尸杀戮”技术,但内存泄漏仍然存在。以下是我的看法: 帮助视图
HomeView
的el
创建了一个分离的div。但我不知道从那以后该怎么办
我已经阅读了一大堆关于查明内存泄漏的堆栈溢出帖子和博客帖子,但我仍然无法理解这一点。我知道主干极有可能导致内存泄漏,所以我实施了“僵尸杀戮”技术,但内存泄漏仍然存在。以下是我的看法:
帮助视图
// Generated by CoffeeScript 1.6.3
(function() {
var __hasProp = {}.hasOwnProperty,
__extends = function(child, parent) { for (var key in parent) { if (__hasProp.call(parent, key)) child[key] = parent[key]; } function ctor() { this.constructor = child; } ctor.prototype = parent.prototype; child.prototype = new ctor(); child.__super__ = parent.prototype; return child; };
define(['jquery', 'jquerymobile', 'underscore', 'backbone'], function($, Mobile, _, Backbone) {
var HelpView, _ref;
return HelpView = (function(_super) {
__extends(HelpView, _super);
function HelpView() {
_ref = HelpView.__super__.constructor.apply(this, arguments);
return _ref;
}
HelpView.prototype.initialize = function() {
return _.bindAll(this, "render", "jqdisplay", "close");
};
HelpView.prototype.render = function() {
$(this.el).html("Help View");
return this;
};
HelpView.prototype.jqdisplay = function() {};
HelpView.prototype.close = function() {
console.log('THIS', this);
console.log($(this.el)[0].parentNode);
$(this.el)[0].parentNode.removeChild($(this.el)[0]);
this.undelegateEvents();
$(this.el).removeData().unbind();
this.remove();
this.unbind();
Backbone.View.prototype.remove.call(this);
return delete this;
};
return HelpView;
})(Backbone.View);
});
}).call(this);
主视图
// Generated by CoffeeScript 1.6.3
(function() {
var __hasProp = {}.hasOwnProperty,
__extends = function(child, parent) { for (var key in parent) { if (__hasProp.call(parent, key)) child[key] = parent[key]; } function ctor() { this.constructor = child; } ctor.prototype = parent.prototype; child.prototype = new ctor(); child.__super__ = parent.prototype; return child; };
define(['jquery', 'jquerymobile', 'underscore', 'backbone'], function($, Mobile, _, Backbone) {
var HomeView, _ref;
return HomeView = (function(_super) {
__extends(HomeView, _super);
function HomeView() {
_ref = HomeView.__super__.constructor.apply(this, arguments);
return _ref;
}
HomeView.prototype.initialize = function() {
return _.bindAll(this, "render", "jqdisplay", "close");
};
HomeView.prototype.render = function() {
$(this.el).html("Home View");
return this;
};
HomeView.prototype.jqdisplay = function() {};
HomeView.prototype.close = function() {
console.log('THIS', this);
console.log($(this.el)[0].parentNode);
$(this.el)[0].parentNode.removeChild($(this.el)[0]);
this.undelegateEvents();
$(this.el).removeData().unbind();
this.remove();
this.unbind();
Backbone.View.prototype.remove.call(this);
return delete this;
};
return HomeView;
})(Backbone.View);
});
}).call(this);
…然后我调用路由器中方法中每个视图的“close”方法
MyRouter.prototype.showView = function(view) {
console.log('THIS', this);
console.log("next view", view);
console.log(this.currentView);
if (this.currentView) {
console.log('closing the current view...', this.currentView);
console.log('starting', $('[data-role="content"]').html());
this.currentView.close();
delete this.currentView;
console.log('remaining', $('[data-role="content"]').html());
console.log('should be empty', this.currentView);
}
this.currentView = view;
this.currentView.render();
$('[data-role="content"]').html(this.currentView.el);
if (this.currentView.jqdisplay) {
return this.currentView.jqdisplay();
}
};
泄漏的现场演示如下:。
泄漏触发行为是使用菜单在两个页面之间导航
任何帮助都将不胜感激!谢谢大家! Ug咖啡脚本
除此之外,在页面上使用jquery查找内存泄漏时,需要禁用jquery dom缓存。在我简要介绍您链接到的示例站点时,我非常确定我看到的一些分离节点都在缓存中
$.expr.cacheLength = 1;
这是非常糟糕的记录,但应该有助于您查找您的实际泄漏来自哪里 尝试选择[917]对象并打开控制台(
Esc
)并评估$0
。我不知道你可以使用这样的开发工具进行评估-这真的很有用!非常感谢。但是,当我选择“(全局句柄)”并将其计算为“未定义”?可能是