我们正在开发一个 asp.net mvc 3 应用程序,该应用程序在 javascript 计时器上轮询服务器以获取数据。当数据返回时,我们使用 jquery 1.7.1 和 knockout 2.0 显示它。该视图是一个小部件,显示一些带有文本和图标的通知 div。
当我们将计时器间隔加快到 5 秒并返回大量通知时,就会出现问题。随机时间后,我们会出现 chrome 的“Aw Snap”页面。让计时器滴答作响的 3 分钟到 30 分钟之间的任何时间。请注意,我们的应用程序需要 24/7 全天候在浏览器中打开,这就是我们进行长期测试的原因。
经过研究,除了查看 google chrome 日志记录之外,似乎没有其他方法可以诊断“Aw Snap”页面。我们尝试使用带有详细日志记录的 Sawbuck,当“Aw Snap”页面出现时,它没有显示任何异常。
我们正处于从 dom 中删除元素、注释代码、删除 css 样式、尝试我们能想到的一切以查明真相的阶段。所有这些都失败了。
有谁知道下一步该怎么做?是什么导致 chrome Aw Snap 页面?它可能是一个 javascript 调用还是可能是由于 dom 操作?任何帮助将不胜感激。
更新:
当我们在 windbg 中加载转储文件(在注释中提到)时,我们会得到这个异常发生位置的调用堆栈。运行 .ecxr 命令后,我们得到: .ecxr 命令:0:000> .ecxr eax=1a300000 ebx=1ef4fb04 ecx=17323425 edx=3dd5ee49 esi=1ef4faed edi=17323425 eip=17b12d23 esp=0044eab0 ebp0ac n=0044e0 up ei pl nz na pe nc cs=0023 ss=002b ds=002b es=002b fs=0053 gs=002b efl=00010206 17b12d23 test byte ptr [eax+0Ch],4 ds:002b:1a30000c=?? 调用堆栈:警告:帧 IP 不在任何已知模块中。以下框架可能是错误的。
更新 #2:根据 ericb 的要求:
定时器功能:
$.ajax({
url: aUpdateUrl,
type: 'post',
success: function (aData) {
try {
if (self.IsAutoUpdating) {
self.OnBeforeDataUpdated();
self.Data(aData);
self._setUpdateTime();
self.DataRefreshed = true;
self._applyAutoSizing();
}
}
catch (error) {
self.Widget.HandleError(error);
}
},
complete: function () {
self.Widget.Loaded = true;
if (self.IsAutoUpdating) {
self.AutoUpdateTimer = setTimeout(function () {
self.StartAutoUpdate(self.AutoUpdateUrl);
}, self.UpdateInterval);
}
}
});
我们的完整函数将计时器设置为在 self.UpdateInterval 时间中再次调用,我们的测试设置为 5 秒。
此外,这里是 html 以及我们如何将其连接到淘汰赛:
<div id="notifications-@Model.Key" class="notification-items">
<ul data-bind="foreach: { data: Dashboard.WidgetLayer@(Model.Key).NotificationModel.notificationsToShow,
afterRemove: Dashboard.WidgetLayer@(Model.Key).NotificationModel.hideNotificationElement,
afterAdd: Dashboard.WidgetLayer@(Model.Key).NotificationModel.showNotificationElement }">
<li class="notification-item group" data-bind="click: Dashboard.WidgetLayer@(Model.Key).NotificationModel.onNotificationClick">
<div>
<img class="notification-icon" data-bind="attr: {src: Spec.Icon}" alt="icon"></img>
</div>
<div class="notification-content group">
<div class="notification-header">
<div class="title">
<span class="subject-name" data-bind='text: SubjectTitle'></span>: <span class="spec-title" data-bind='text: Spec.Title'></span>
</div>
<button class="acknowledge-notification" data-bind="click: Dashboard.WidgetLayer@(Model.Key).NotificationModel.acknowledgeNotification, clickBubble: false"></button>
<div class="time-since-event" data-bind='text: FormattedTimestamp'></div>
</div>
<div>
<div class="spacer"></div>
<div class="details action-details" data-bind='text: Details'> </div>
</div>
</div>
</li>
</ul>
我们还通过淡入/淡出在通知 div 上设置了 jquery live 设置,如下所示:
$('#notifications-@Model.Key .notification-item').live({
mouseenter:
function() {
var lElement = this;
$(lElement).find('.time-since-event').stop(true, true).fadeOut(0, function (){$('.acknowledge-notification', lElement).fadeIn(2000);});
},
mouseleave:
function() {
var lElement = this;
$(lElement).find('.acknowledge-notification').stop(true, true).fadeOut(0, function (){$('.time-since-event', lElement).fadeIn(1000);});
}
});
更新通知列表的其余 javascript 代码基于 knockoutjs 的动画转换现场示例,可在此处获得:http: //knockoutjs.com/examples/animatedTransitions.html
如果需要,我可以提供代码,但它是 150 行,为了简洁起见决定将其排除。