ng-repeat 事件完成后 Dom 冻结答案

【问题标题】：Dom Freezes after ng-repeat event finishesng-repeat 事件完成后 Dom 冻结
【发布时间】：2016-10-07 23:59:50
【问题描述】：

我已经解决这个问题好几个星期了，并尝试了几种方案来解决它。

首先是问题：

我们有一个 Angular 应用程序存在一些主要的性能问题（滞后、冻结 dom、响应缓慢等）。目前我们有许多嵌套的 ng-repeats 迭代一个数组。当最大和最长的 ng-repeat 完成时，我做了一个角度指令来创建一个“警报”。

ng-repeat 在几秒钟后完成（弹出窗口）会弹出以确认它。我可以看到从 ng-repeat 生成的行出现在 DOM 上。 奇怪的部分...提前： 现在 DOM 已经渲染，并且触发了 ng-repeat 结束事件。奇怪的是这是页面中最慢的部分。在 chrome 下的 Windows 任务管理器中，我可以看到我的浏览器实例的内存不断攀升至远高于 250,000kb，而我的 cpu 使用率在 25 左右。

页面现在被冻结，我无法打开更多选项卡或扩展更多 ng-repeats。即使在等待 5 分钟以上后，页面的响应速度也很慢，延迟时间至少为 5 秒。

我尝试过的事情：

Batarang 和 Angular 分析器。我已经最小化了一些观察者并添加了许多单向绑定。这对提高速度几乎没有任何帮助。
删除大对象（从 ng-repeat 中）确实会使页面更快，但会破坏页面。所以这告诉我问题是由于对象的大小造成的？对吧？
我目前将我的 ng-repeat 分解为一个指令，并在其中处理它。还是很慢。

最后的问题：

有谁知道为什么在 ng-repeat 完成后我的应用程序很慢（几乎冻结）？另外，有谁知道为什么一旦我的 ng-repeat 启动，我的 chrome 内存资源使用率就会上升，直到我得到一个“糟糕，chrome 没有响应窗口”。（我使用了 MemoryProfiler，我很确定它不是内存泄漏。）

*图片 1 直接在 ng-repeat 的 DOM 渲染之后。
*图像 2 是在图像 1 拍摄后 5 分钟拍摄的。 DOM 一直被冻结并且无法移动。 ** 注意更高的内存使用率。**

图 3 是来自 Chrome 开发工具的问题的近距离检查。

有人让我发布一些代码，最初我不打算发布我的代码，因为它非常大，而且我知道它会有多大帮助：（我在 dom 上还有其他元素，这只是导致它非常慢的问题代码。重复 writerRateConfig 会导致延迟。）

````

 <tbody ng-repeat="rateConfiguration in writerRateConfig track by $index">
        <!--<tbody ng-repeat="rateConfiguration in  writerSkinnyRate  track by $index">-->
       <tr ng-repeat="rate in ::rateConfiguration.rates">

                <td class="one-percent no-wrap centered">
                    <span ng-show="writer.controlled && $index == 0" title="" data-toggle="tooltip">
                        <button ng-disabled="licenseDetail != 2" securitydisable actions="LicenseDetailsIncludeExclude" class="btn btn-default btn-icon narrow" data-toggle="modal" ui-sref="SearchMyView.DetailLicense.StepsModal.WritersIsIncluded({config:rate,files:licenseAttachments,recording:recording,writer:writer,product:product,modalSize:'sm',rate:rateConfiguration })">
                            <span class="icon include" ng-show="rate.writerRateInclude"></span>
                            <span class="icon exclude" ng-show="!rate.writerRateInclude"></span>
                        </button>
                    </span>
                </td>
                <td class="fifteen-percent"><span ng-show="$index == 0"><span ng-class="rate.configuration_id | returnConfigurationIcon"></span><span ng-bind="rate.configuration_name"></span><span ng_if="rate.configuration_upc">(<span ng-bind="rate.configuration_upc"></span>)</span></span></td>
                <td>
                    <span ng-show="writer.controlled && $index == 0" title="{{rate.writersConsentType.description}}" data-toggle="tooltip" data-placement="right">
                        <button ng-disabled="!buttons.writerConsentBtn" securitydisable actions="LicenseDetailWriterConsent" class="btn btn-default btn-sm" data-toggle="modal" ui-sref="SearchMyView.DetailLicense.StepsModal.WritersConsent({config:rate,files:licenseAttachments,recording:recording,writer:writer,product:product,modalSize:'md' })">
                            <span ng-bind="rate.writersConsentType.writersConsentType"></span>
                        </button>
                    </span>
                </td>
                <td class="fifteen-percent top">
                    <span ng-show="$index == 0">
                        <span ng-repeat="status in ::rateConfiguration.specialStatusList" class="badge">
                            <span ng-if="status.lU_SpecialStatuses"><span ng-bind="status.lU_SpecialStatuses.specialStatus"></span></span>
                            <span ng-if="!status.lU_SpecialStatuses"><span ng-bind="status.specialStatus"></span></span>
                        </span>
                    </span>
                </td>
                <td class="fifteen-percent" ng-if="writer.controlled == true"><span ng-show="$index == 0"><span ng-bind="rate.rateType.rateType"></span></span></td>
                <td class="fifteen-percent" ng-if="writer.controlled == false"><span ng-show="$index == 0">N/A</span></td>
                <td class="five-percent" ng-if="writer.controlled == false">N/A</td>
                <td class="five-percent centered" ng-if="writer.controlled == true" ng-show="writer.statPrcentageVisible == true"><span ng-bind="rate.percentOfStat"></span></td>
                <td class="ten-percent" ng-if="writer.controlled == true" ng-show="writer.escalatedRateVisible == true"><span ng-bind="rate.escalatedRate"></span></td>
                <td class="five-percent" ng-if="writer.controlled == false">N/A</td>
                <td class="five-percent" ng-if="writer.controlled == true" ng-show="writer.escalatedRateVisible == true"><span ng-bind="rate.rate"></span></td>
                <td class="five-percent" ng-if="writer.controlled == true"><span ng-bind="rate.proRataRate"></span></td>
                <td class="five-percent" ng-if="writer.controlled == false">N/A</td>
                <td class="five-percent" ng-if="writer.controlled == true"><span ng-bind="rate.perSongRate"></span></td>
                <td class="ten-percent centered" ng-if="writer.controlled == false">N/A</td>
                <!--Display License Date, Signed Date or Effective Date-->
                <td class="ten-percent" ng-show="writer.controlled == true && $index==0"><span ng-bind="rate.licenseDate | timezone | date:'MM/dd/yyyy'"></span></td>

                <td class="ten-percent centered" ng-show="writer.controlled == true">
                    <span ng-show="$index==0">
                        <button ng-disabled="paidQuarterDisabled" securitydisable actions="LicenseDetailsPaidQuarter" class="btn btn-default btn-sm" ui-sref="SearchMyView.DetailLicense.StepsModal.PaidQuarter({licenseId:licenseDetail.licenseId,config:rate,recording:recording,writer:writer,product:product, modalSize:'sm' })">
                            <span ng-bind="rateConfiguration.paidQuarter"></span>
                        </button>
                    </span>
                </td>
            </tr>

        </tbody>

````

【问题讨论】：

您确实需要发布一些代码以获得帮助。
为什么我在这件事上被否决了？我非常努力地使用我的格式、问题结构和信息来达到“StackOverflow”标准。请在投反对票之前留下评论为什么你投反对票
我没有对你投反对票，但我知道有人会投反对票，因为你没有发布任何代码。我会查看您发布的代码，看看我是否可以提供任何帮助。
@RaniRadcliff 我并不是说你对我投了反对票，而是更多地针对整个社区。感谢您的帮助，如果我可以添加任何帮助，请告诉我。谢谢
我可以告诉你，你的部分问题是所有的 if 语句。这些导致 Angular 继续通过摘要循环来测试值是否已更改。

标签： javascript angularjs performance dom angularjs-digest

【解决方案1】：

过多的 if 语句可能会导致 Angular 继续运行摘要循环。尝试将您的逻辑移至控制器。

if(thisdata == that){$scope.showThis = whatever}

注意：也不要制作 100 个示波器，因为您最终会遇到同样的问题。使它们成为重复中每个项目的“价值”。您可以使用angular.forEach 在控制器中设置值。这就是我的全部。希望这可以帮助！编码愉快！

【讨论】：