Dom ng-repeat 事件结束后冻结

Question

几周来我一直在研究这个问题，并尝试了几种方案来解决它。

首先是问题:

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

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 内存资源使用率就会上升，直到我得到 'Oops, chrome is not responding window'。（我使用了 MemoryProfiler，我很确定这不是内存泄漏。）

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

图 3 是来自 Chrome 开发工具的问题的特写检查。

有人要我 post 一些代码，最初我不会 post 我的代码，因为它非常大而且我知道它会有多大帮助：（我在 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>

````

Answer 1

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

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

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

Dom ng-repeat 事件结束后冻结

Dom Freezes after ng-repeat event finishes

javascript

performance

dom

angularjs

angularjs-digest