Question

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

首先是问题：

我们有一个角度应用程序，它有一些主要的性能问题（延迟，冻结dom，响应缓慢等）。目前，我们有许多嵌套的ng-repeats遍历数组。我制定了一个有棱有角的指示来创建一个警报＆＃39;当最大和最长的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内存资源使用量一直在上升，直到我得到一个＆＃39;糟糕，chrome没有响应窗口＆＃39;。（我已经使用了MemoryProfiler，我很确定它不是内存泄漏。）

*图像1直接在DOM渲染ng-repeat之后 * Image1拍摄后5分钟拍摄图像2。 DOM一直被冻结和不动。 **注意内存使用量较高。**

图3是对Chrome Dev Tools问题的近距离检查。

有人让我发布一些代码，原来我不会发布我的代码，因为它非常大而且idk会有多大帮助：（我在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个范围，因为你最终会遇到同样的问题。让它们成为重复中每个项目的“价值”。您可以使用angular.forEach设置控制器中的值。这就是我的全部。希望这可以帮助！快乐的编码！

ng-repeat事件结束后，Dom冻结

1 个答案: