AngularJS进行性能调优的7个建议


Posted in Javascript onDecember 28, 2015

 AnglarJS作为一款优秀的Web框架,可大大简化前端开发的负担。近日Sebastian Fröstl在一篇博文《AngularJS Performance Tuning for Long Lists》中表示AnglarJS在处理包含复杂数据结构的大型列表时,其运行速度会非常慢。他在文中同时分享了解决方案。下面为该文的译文。

AnglarJS很棒,但当处理包含复杂数据结构的大型列表时,其运行速度就会非常慢。这是我们将核心管理页面迁移到AngularJS过程中遇到的问题。这些页面在显示500行数据时本应该工作顺畅,但首个方法的渲染时间竟花费了7秒,太可怕了。

后来,我们发现了在实现过程中存在两个主要性能问题。一个与“ng-repeat ”指令有关,另一个与过滤器有关。

下文将分享我们通过不同的方法解决性能问题的经验,希望可以给你带来启示。

一、AngularJS 中的ng-repeat在处理大型列表时,速度为什么会变慢?

AngularJS中的ng-repeat在处理2500个以上的双向数据绑定时速度会变慢。这是由于AngularJS通过“dirty checking”函数来检测变化。每次检测都会花费时间,所以包含复杂数据结构的大型列表将降低你应用的运行速度。

二、提高性能的先决条件

时间记录指令

为了测量一个列表渲染所花费的时间,我们写了一个简单的程序,通过使用“ng-repeat”的属性“$last”来记录时间。时间存放在TimeTracker服务中,这样时间记录就与服务器端的数据加载分开了。

// Post repeat directive for logging the rendering time angular.module('siApp.services').directive('postRepeatDirective', ['$timeout', '$log', 'TimeTracker', function($timeout, $log, TimeTracker) { return function(scope, element, attrs) { if (scope.$last){ $timeout(function(){ var timeFinishedLoadingList = TimeTracker.reviewListLoaded(); var ref = new Date(timeFinishedLoadingList); var end = new Date(); $log.debug("## DOM rendering list took: " + (end - ref) + " ms"); }); } }; } ]); // Use in HTML: …

Chrome开发者工具的时间轴(Timeline)属性

在Chrome开发者工具的时间轴标签中,你可以看见事件、每秒内浏览器帧数和内存分配。“memory”工具用来检测内存泄漏,及页面所需的内 存。当帧速率每秒低于30帧时就会出现页面闪烁问题。“frames”工具可帮助了解渲染性能,还可显示出一个JavaScript任务所花费的CPU时 间。

  三、通过限制列表的大小进行基本的调优

缓解该问题,最好的办法是限制所显示列表的大小。可通过分页、添加无限滚动条来实现。

分页

分页,我们可以使用AngularJS的“limitTo”过滤器(AngularJS1.1.4版本以后)和“startFrom”过滤器。可以通过限制显示列表的大小来减少渲染时间。这是减少渲染时间最高效的方法。

// Pagination in controller $scope.currentPage = 0; $scope.pageSize = 75; $scope.numberOfPages = function() { return Math.ceil($scope.displayedItemsList.length/ $scope.pageSize); }; // Start from filter angular.module('app').filter('startFrom', function() { return function(input, start) { return input.slice(start); }; // Use in HTML // Pagination buttons{{$index + 1}}

如果你不能/不想使用分页,但过滤过程又很慢,这时一定要检查前五步,并使用“ng-show”隐藏掉多余的列表元素。

无限滚动条

如果你希望进一步了解该方法,可访问 http://binarymuse.github.io/ngInfiniteScroll/

四、七大调优法则

1. 渲染没有数据绑定的列表

这是最明显的解决方案,因为数据绑定是性能问题最可能的根源。如果你只想显示一次列表,并不需要更新、改变数据,放弃数据绑定是绝佳的办法。不过可惜的是,你会失去对数据的控制权,但除了该法,我们别无选择。进一步了解: https://github.com/Pasvaz/bindonce。

2.不要使用内联方法计算数据

为了在控制器中直接过滤列表,不要使用可获得过滤链接的方法。“ng-repeat”会评估每个 [$digest(http://docs.angularjs.org/api/ng.$rootScope.Scope#$digest)%5D表达式。在我们的案例中,“filteredItems()”返回过滤链接。如果评估过程很慢,它将迅速降低整个应用的速度。

//这并不是一个好方法,因为要频繁地评估。

//这是要采用的方法

3.使用两个列表(一个用来进行视图显示,一个作为数据源)

将要显示的列表与总的数据列表分开,是非常有用的模型。你可以对一些过滤进行预处理,并将存于缓存中的链接应用到视图上。下面案例展示了基本实现过程。filteredLists变量保存着缓存中的链接,applyFilter方法来处理映射。

/* Controller */ // Basic list var items = [{name:"John", active:true }, {name:"Adam"}, {name:"Chris"}, {name:"Heather"}]; // Init displayedList $scope.displayedItems = items; // Filter Cache var filteredLists['active'] = $filter('filter)(items, {"active" : true}); // Apply the filter $scope.applyFilter = function(type) { if (filteredLists.hasOwnProperty(type){ // Check if filter is cached $scope.displayedItems = filteredLists[type]; } else { /* Non cached filtering */ } } // Reset filter $scope.resetFilter = function() { $scope.displayedItems = items; } /* View */Select active

{{item.name}}

4.在其他模板中使用ng-if来代替ng-show

如果你用指令、模板来渲染额外的信息,例如通过点击来显示列表项的详细信息,一定要使用 ng-if(AngularJSv. 1.1.5以后)。ng-if可阻止渲染(与ng-show相比)。所以其它DOM和数据绑定可根据需要进行评估。

以上内容给大家详解了AngularJS进行性能调优的7个建议,希望大家喜欢。

Javascript 相关文章推荐
js使用正则实现ReplaceAll全部替换的方法
Aug 22 Javascript
javascript实现复制与粘贴操作实例
Oct 16 Javascript
JavaScript使用setInterval()函数实现简单轮询操作的方法
Feb 02 Javascript
JavaScript焦点事件、鼠标事件和滚轮事件使用详解
Jan 15 Javascript
浅谈js数据类型判断与数组判断
Aug 29 Javascript
jQuery插件echarts去掉垂直网格线用法示例
Mar 03 Javascript
详解Angular 4.x Injector
May 04 Javascript
jQuery回调方法使用示例
Jun 26 jQuery
Bootstrap栅格系统的使用详解
Oct 30 Javascript
laydate时间日历插件使用方法详解
Nov 14 Javascript
js中关于Blob对象的介绍与使用
Nov 29 Javascript
H5实现手机拍照和选择上传功能
Dec 18 Javascript
浅析AngularJS Filter用法
Dec 28 #Javascript
jquery实现倒计时功能
Dec 28 #Javascript
基于jquery实现瀑布流布局
Jun 28 #Javascript
详解AngularJS Filter(过滤器)用法
Dec 28 #Javascript
原生JavaScript实现瀑布流布局
Jun 28 #Javascript
js实现瀑布流的三种方式比较
Jun 28 #Javascript
详解AngularJS中自定义过滤器
Dec 28 #Javascript
You might like
PHP 编程的 5个良好习惯
2009/02/20 PHP
PHP exif扩展方法开启详解
2014/07/28 PHP
thinkphp的静态缓存用法分析
2014/11/29 PHP
php实现字符串翻转的方法
2015/03/27 PHP
PHP curl批处理及多请求并发实现方法分析
2018/08/15 PHP
JavaScript 事件的一些重要说明
2009/10/25 Javascript
基于jQuery的获得各种控件Value的方法
2010/11/19 Javascript
javascript AOP 实现ajax回调函数使用比较方便
2010/11/20 Javascript
情人节之礼 js项链效果
2012/02/13 Javascript
js实现宇宙星空背景效果的方法
2015/03/03 Javascript
基于js中的原型、继承的一些想法
2016/08/10 Javascript
js动态生成form 并用ajax方式提交的实现方法
2016/09/09 Javascript
jQuery图片瀑布流的简单实现代码
2017/03/15 Javascript
浅谈vuex之mutation和action的基本使用
2017/08/29 Javascript
微信小程序使用wxParse解析html的实现示例
2018/08/30 Javascript
node.js中express模块创建服务器和http模块客户端发请求
2019/03/06 Javascript
使用JavaScript计算前一天和后一天的思路详解
2019/12/20 Javascript
vue实现购物车加减
2020/05/30 Javascript
js实现简易计算器小功能
2020/11/18 Javascript
详谈python read readline readlines的区别
2017/09/22 Python
利用python如何处理nc数据详解
2018/05/23 Python
使用Python获取并处理IP的类型及格式方法
2018/11/01 Python
分享8个非常流行的 Python 可视化工具包
2019/06/05 Python
python超时重新请求解决方案
2019/10/21 Python
浅谈python输出列表元素的所有排列形式
2020/02/26 Python
python GUI库图形界面开发之PyQt5简单绘图板实例与代码分析
2020/03/08 Python
Python SQLAlchemy库的使用方法
2020/10/13 Python
家庭睡衣和家庭用品:Little Blue House
2018/03/18 全球购物
印度化妆品购物网站:Nykaa
2018/07/22 全球购物
威尔逊皮革:Wilsons Leather
2018/12/07 全球购物
Python如何定义一个函数
2015/09/01 面试题
文秘专业应届生求职信范文
2013/11/14 职场文书
企业安全生产目标责任书
2014/07/23 职场文书
法定代表人授权委托书范文
2014/09/22 职场文书
出纳试用期自我评价
2015/03/10 职场文书
初中班主任工作随笔
2015/08/15 职场文书