在IE中缓慢加载AngularJS应用程序 - 添加进度条 [英] Slow loading of AngularJS app in IE - add progress bar
问题描述
UPDATE1：开始使用 ngProgress ，但未在IE中提供所需的效果。
最终更新：找到最佳解决方案。请参阅下面的最后一个答案。
UPDATE1: Started using ngProgress, but not giving required effect in IE.
Final Update: Best solution found. See last answer below.
AngularJS应用程序有多个选项卡，每个选项卡最多可包含100个字段。使用多个Ajax调用从数据库中检索数据，并使用相关循环初始化以下各项：验证规则，下拉列表项以及最后的字段值。在某些情况下，我们使用Javascript和AngularJS方式的组合来获得所需的效果。
The AngularJS application has multiple tabs and each tab may have up to 100 fields. The Data is retrieved from DB using several Ajax calls and a related loop is used to initialize each of the following: validation rules, drop-down list items and finally the field values. In some cases, we are using combination of Javascript and AngularJS way to get the required effect.
请注意，加载验证规则涉及修改指令，例如 ng-required 和 ng-max 这将需要使用 $ compile 激活验证规则。
Mind you that loading of Validation Rules involves modifying the directive such as ng-required and ng-max which will require to use $compile to activate the validation rule.
这个问题有两个部分：
- AngularJS应用程序在IE下具有明显的缓慢加载效果。在Chrome浏览器下，加载速度要好得多。
我们如何排除故障并分析IE下的慢速加载问题，以确定其位置问题？我如何在IE下使用性能分析工具？
How we can troubleshoot and analyse slow loading issues under IE to pinpoint the location of the issue? How I can work on performance analysis tools under IE?
- 同时，考虑添加进度条，在完成加载每个进度条后进行更新上面提到的数据部分：验证规则，下拉列表项和字段值。
我在项目中实现了ngProgress插件，它在Chrome下工作正常，但在IE下却没有达到要求的效果。进度条将在页面加载结束时显示并完成。在IE下似乎进度条不会在页面渲染开始时立即显示。请注意，在我的项目中，我广泛使用指令，其中大量使用 $ compile 服务。
I implemented ngProgress plugin in my project, and it works fine under Chrome, but under IE it is not giving the required effect. The progress bar will show and complete at the very end of page loading. It seems under IE that the progress bar won't show immediately at the start of the page rendering. Mind you that in my project I am using directive extensively, and large number of them use $compile service.
我做了一些研究，并意识到IE不会立即更新DOM显示...它会等到稍后阶段一次更新所有内容，或者至少这是我的理解。所以这里的诀窍是如何强制IE尽快反映DOM变化。
I did some research, and realized that IE won't update the DOM display immediately... it will wait until a later stage to update all at once, or at least this was my understanding. So the trick here is how to force the IE to reflect DOM changes as soon as possible.
我使用这种方法在IE下获得了更好的结果：
I used this approach which helped get better results under 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秒，然后继续正常。当观察控制台窗口时，我可以看到它将在执行其他许多指令时冻结，尤其是使用 $ compile 服务且优先级的指令：100 和 terminal：true，。
With the above, under IE, I can see the progress bar showing much earlier than before, then it will make 2 step progress, then it will freeze for about 2 seconds, then continues normally. When watch the console window, I can see that it will freeze while the other many directives are being executed especially the one that uses $compile service with priority: 100 and terminal: true, .
任何想法如何让它变得更好？
Any idea how to make it better?
注意：这个主题有类似的问题，但我找不到相关的解决方案。
Note: This thread has similar problem, but I didn't find a relevant solution.
Tarek
推荐答案
根据你的说法，缓慢加载是由于AngularJS工作而不是数据加载[事实证明它在IE中比Chrome慢]。如果这是真的那么加载指示器就不会有帮助，因为它也会冻结。
From what you have said the slow loading is due to AngularJS working as opposed to data loading [as evidenced by the fact its slower in IE than Chrome]. If this is true then a loading indicator wont help as it'll just freeze too.
你可以更好地遵循角度的常规性能技术，例如：
You are far better off following normal performance techniques in angular such as:
- 在页面上显示较少，用户肯定不需要一次看到100个字段？考虑分页。
- 对于不会改变的项目，使用bind一次如下：
{{:: vm.name}} - 关于句柄栏的主题，使用它通常更有效
< div ng-bind =:: vm.name>< / div>而不是处理栏{{:: vm.name}}
- Show less on the page, a user surely doesnt need to see 100 fields at once? Consider paging.
- For items that won't change use bind once like so:
{{::vm.name}} - On the subject of handle bars, its generally more efficient to use
<div ng-bind="::vm.name"></div>rather than handle bars{{::vm.name}}
这篇关于在IE中缓慢加载AngularJS应用程序 - 添加进度条的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
