AngularJS的IE11性能问题
AngularJS的IE11性能问题
提问于 2018-01-11 00:46:18
我在使用AngularJS (v1.5.8)应用程序的IE11中遇到性能问题。当数据在ng-repeat中呈现时，IE11会变得不稳定，甚至会暂时冻结。Chrome能够毫无问题地呈现HTML。
我已经设置了一个简单的示例here on Plunker。
<!DOCTYPE html>
<html ng-app="app" ng-controller="MainController">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>App</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" />
<style type="text/css">
.gray {
background-color: #aaa;
}
</style>
</head>
<body>
<span class="fa fa-spin fa-spinner fa-5x"></span>
<table>
<tr ng-repeat="item in arr track by $index" ng-class="{'gray': $index % 2 == 0}" ng-show="$index % 5 != 0">
<td>{{item.set}}</td>
<td><input type="checkbox" />{{item.test}}</td>
<td><input type="checkbox" />{{item.test}}</td>
<td><input type="checkbox" />{{item.test}}</td>
<td><input type="checkbox" />{{item.test}}</td>
<td><input type="checkbox" />{{item.test}}</td>
<td><input type="checkbox" />{{item.test}}</td>
</tr>
</table>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script>
<script>
//Angular module
var app = angular.module('app', []);
//Controller
app.controller('MainController', function ($scope, $timeout) {
//array for holding dummy data to display in ng-repeat
$scope.arr = [];
//How much data do we want?
for (var i = 1; i < 100; i++) {
//Add to arr on a delay to simulate web service response time
$timeout(function (index) {
//Add 20 more array items at a time
var nextSet = [];
for (var j = 0; j < 20; j++) {
nextSet.push({ 'set': index, 'test': 'abc' });
}
$scope.arr = $scope.arr.concat(nextSet);
}, i * 50, true, i); //50 is too short in IE 11 and causes freezing. 500 works fine.
}
});
</script>
</body>
</html>在本例中，使用$timeout延迟将数据添加到数组中。在我的实际应用程序中，数据是作为web服务返回的数据添加的。将示例中的计时从50更改为500可以解决IE11中的问题。我不认为我可以将类似的变通方法应用于实际的应用程序，因为我不知道web服务将以多快的速度返回。
我可以在我的AngularJS应用程序中做些什么来提高IE11的性能吗？我并不期望它像Chrome那样圆滑，但我希望它会比现在更好。
回答 1
Stack Overflow用户
发布于 2018-01-11 18:41:49
您可以通过将{{item.test}}语句定义为一次绑定：{{ :: item.test}}来稍微提高此示例中的性能。这将导致AngularJs不再监视更改。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/48192244
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号