调试AngularJS Internet Explorer锁定

Debugging AngularJS Internet Explorer Lock-up

本文关键字：锁定 Explorer Internet AngularJS 调试      更新时间：2023-09-26

我在IE10中遇到了一个问题，我可以很容易地复制它。在我的应用程序中浏览了几页后，IE完全锁定（没有"长时间运行的脚本"警告，只是完全冻结）。我必须从任务管理器中删除它。我已经禁用了所有附加组件，并且有了一个全新的记录。我在一个相当大的工作站上运行（Win7，16GB ram，i7，yadda-yadda）。

它在Chrome或Firefox中不会冻结。只有IE10和IE11。

关于我的应用

我正在与一个工业控制系统集成，以显示我的系统的活动状态。我有很多XHR轮询正在进行（将转移到WebSocket，但目前，这很容易与我的API集成）。每隔500毫秒刷新一次端点的数据，这会更新页面上的一堆字段。

当应用程序没有冻结时，浏览起来既方便又快捷。找不到任何导致冻结的具体情况。

在任何给定的时间，我的应用程序都有75到400美元的手表（用这个答案计算）。

目前正在运行AngularJS v1.3.0-rc.4。1.2.25也有类似的封锁。

所以，我的问题

我该如何调试它？我试着让F12DeveloperTools保持打开状态，但没有任何东西输出到控制台。运行脚本探查器（Batarang在IE中不可用）显示，我在$digest中每10秒花费大约200ms（包括200ms）。我下一步该怎么做？

哎哟，我能感同身受。

你能把这些顾虑分开吗？使用不使用XHR的服务的mock测试前端（带有ng-repeat的DOM部分），看看是否遇到了同样的问题。您也可以尝试在不将XHR服务挂接到前端的情况下测试它。（例如，出于测试目的，为了避免ng重复问题，您可以有一个只有类似<span>{{myDataArray}}</span>的测试视图。）基本上，试着将问题一分为二，看看是否仍然可以重复问题。

基本上，我的理由是这样的；如果你嘲笑你的服务，仍然每500毫秒轮询一次，然后遇到问题，你可能会遇到IE的DOM更新问题。如果你没有遇到问题，但你测试了真正的服务，IE冻结了，那么XHR在某个地方有问题（也许是你的轮询时间？），或者Angular的手表系统有问题。

我希望我能在这里提供更多帮助，但这是我的起点。尝试通过剔除一些代码来缩小问题范围。这不会很有趣，但如果您已经使用Angular的最佳实践（即依赖注入和关注点分离）编写了应用程序，那么就不会那么痛苦了。

TL；DR-"我下一步该怎么做？"你必须开始智能地挑选一些代码，看看哪些有效，哪些无效

我针对所有IE锁定的全局解决方案（双关语）是将有问题的代码封装在window.setTimeout中。现在，这些问题中的大多数是由以下原因引起的：

  1. 加载过多DOM元素

  2. 多次处理一组DOM元素，尤其是当您有多个观察者时。

如何解决这个问题：使用Google调试评测工具（尤其是堆快照）来跟踪DOM元素。它真的很棒。

您很可能加载了太多不必要的DOM元素。尝试通过在作用域对象上使用一些标志来延迟加载它们。

例如，我们需要显示一个项目树供用户选择，并且我们预先加载了所有项目，总计数十万。这削弱了IE浏览器，降低了Chrome浏览器的速度。我所做的是只加载最前面的类别，只有在类别扩展时才加载子类别。寻找一些类似的优化。

这类问题不会在有几千条记录的开发数据库中显示出来。它们只显示在生产数据库和发布日期中，所以请慢慢浏览文档结构并找到风险点。

您还可以使用Chrome调试器的AnugularJS选项卡（性能部分）。它是一个很好的工具，可以在DOM元素中显示观察者。看一看。

相关文章：