javascript - AngularJS 应用程序在 IE 中加载缓慢 - 添加进度条

Question

更新1:开始使用ngProgress ，但在 IE 中没有达到所需的效果。
最终更新:找到最佳解决方案。请参阅下面的最后一个答案。

<小时/>

AngularJS 应用程序有多个选项卡，每个选项卡最多可以有 100 个字段。使用多个 Ajax 调用从数据库检索数据，并使用相关循环来初始化以下各项:验证规则、下拉列表项以及最后的字段值。在某些情况下，我们会使用Javascript和AngularJS结合的方式来达到所需的效果。

请注意，加载验证规则涉及修改指令，例如 ng-required 和 ng-max，这将需要使用 $compile 激活验证规则。

这个问题有两个部分:

• AngularJS App 在 IE 下加载速度明显变慢。在 Chrome 浏览器下，加载速度要好得多。

如何排查和分析IE下加载缓慢的问题，找出问题所在？如何在 IE 下使用性能分析工具？

• 同时，考虑添加进度条，以便在完成加载上述每个数据部分后更新:验证规则、下拉列表项和字段值。

我在我的项目中实现了ngProgress插件，它在Chrome下工作正常，但在IE下它没有给出所需的效果。进度条将在页面加载最后显示并完成。在IE下，页面渲染开始时进度条似乎不会立即显示。请注意，在我的项目中，我广泛使用指令，其中大量使用 $compile 服务。

我做了一些研究，发现 IE 不会立即更新 DOM 显示...它会等到后期才一次性更新，或者至少这是我的理解。所以这里的技巧是如何强制 IE 尽快反射(reflect) DOM 的变化。

我使用这种方法有助于在 IE 下获得更好的结果:

app.controller('formMainController', ['$scope', '$timeout', '$interval', 'ngProgressFactory',
                function($scope, $timeout, $interval, $q, ngDialog, ngProgressFactory) {
    $scope.progressbar = ngProgressFactory.createInstance();
    $scope.progressbar.start();
    $scope.stopProgressbar = $interval(function(){
        $scope.progressbar.setParent(document.getElementsByTagName("BODY")[0]);
    },10);
       ...
       ...
       //After getting all data from DB
    $scope.mainPromise.then(function(success) {
        $interval.cancel($scope.stopProgressbar);
        $timeout(function(){
            $scope.progressbar.complete();
        }, 3000);
        return 'main promise done';
    })
}]);

有了上面的内容，在IE下，我可以看到进度条比以前显示得早得多，然后会前进2步，然后会卡住大约2秒，然后正常继续。当观察控制台窗口时，我可以看到它会卡住，而其他许多指令正在执行，特别是使用 $compile 服务和 priority: 100 和 终端:true， .

知道如何让它变得更好吗？

注:This thread有类似问题，但没有找到相关解决方案。

塔里克

Answer 1

根据您所说，加载缓慢是由于 AngularJS 工作而不是数据加载所致(事实证明它在 IE 中比 Chrome 慢)。如果这是真的，那么加载指示器将无济于事，因为它也会卡住。

您最好遵循 Angular 中的正常性能技术，例如:

• 页面显示少一点，用户肯定不需要一次看到100个字段吧？考虑分页。
• 对于不会更改的项目，请使用一次绑定(bind)，如下所示:{{::vm.name}}
• 就 Handlebars 而言，使用起来通常更有效 <div ng-bind="::vm.name"></div>而不是 Handlebars {{::vm.name}}