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 相关文章推荐
漂亮的widgets,支持换肤和后期开发新皮肤
Apr 23 Javascript
javascript showModalDialog 内跳转页面的问题
Nov 25 Javascript
让元素在网页中可拖动示例代码
Aug 13 Javascript
详解JavaScript中setSeconds()方法的使用
Jun 11 Javascript
JavaScript中函数表达式和函数声明及函数声明与函数表达式的不同
Nov 15 Javascript
理解javascript异步编程
Jan 27 Javascript
jQGrid Table操作列中点击【操作】按钮弹出按钮层的实现代码
Dec 05 Javascript
用move.js库实现百叶窗特效
Feb 08 Javascript
vue给input file绑定函数获取当前上传的对象完美实现方法
Dec 15 Javascript
微信小程序API—获取定位的详解
Apr 30 Javascript
jQuery实现简单飞机大战
Jul 05 jQuery
vue+openlayers绘制省市边界线
Dec 24 Vue.js
浅析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
PHILIPS D1835/D1875的电路分析与打理
2021/03/02 无线电
PHP的SQL注入过程分析
2012/01/06 PHP
PHP中session变量的销毁
2014/02/27 PHP
功能强大的php分页函数
2016/07/20 PHP
浅谈mysql_query()函数的返回值问题
2016/09/05 PHP
深入浅出讲解:php的socket通信原理
2016/12/03 PHP
PHP常用字符串函数小结(推荐)
2018/08/05 PHP
微信公众平台开发教程③ PHP实现微信公众号支付功能图文详解
2019/04/10 PHP
日期函数扩展类Ver0.1.1
2006/09/07 Javascript
JavaScript静态的动态
2006/09/18 Javascript
js函数般调用正则
2008/04/08 Javascript
jQuery最佳实践完整篇
2011/08/20 Javascript
jquery滚动组件(vticker.js)实现页面动态数据的滚动效果
2013/07/03 Javascript
自己使用jquery写的一个无缝滚动的插件
2014/04/30 Javascript
Internet Explorer 11 浏览器介绍:别叫我IE
2014/09/28 Javascript
jQuery实现批量判断表单中文本框非空的方法(2种方法)
2015/12/09 Javascript
基于jQuery实现左右图片轮播(原理通用)
2015/12/24 Javascript
基于jQuery实现动态搜索显示功能
2016/05/05 Javascript
JavaScript中附件预览功能实现详解(推荐)
2017/08/15 Javascript
Angular 开发学习之Angular CLI的安装使用
2017/12/31 Javascript
三种Webpack打包方式(小结)
2018/09/19 Javascript
js replace替换字符串同时替换多个方法
2018/11/27 Javascript
vue slot与传参实例代码讲解
2019/04/28 Javascript
[03:05]DOTA2英雄基础教程 嗜血狂魔
2013/12/10 DOTA
对Python中9种生成新对象的方法总结
2018/05/23 Python
解决Python3中的中文字符编码的问题
2018/07/18 Python
python使用tkinter库实现五子棋游戏
2019/06/18 Python
HTML5之SVG 2D入门13—svg对决canvas及长处和适用场景分析
2013/01/30 HTML / CSS
html5拍照功能实现代码(htm5上传文件)
2013/12/11 HTML / CSS
潘多拉珠宝俄罗斯官方网上商店:PANDORA俄罗斯
2020/09/22 全球购物
医学实习生自我鉴定
2013/12/12 职场文书
商务经理岗位职责
2014/08/03 职场文书
县长群众路线对照检查材料思想汇报
2014/10/02 职场文书
酒店工程部岗位职责
2015/02/12 职场文书
2015年妇幼保健工作总结
2015/05/19 职场文书
导游词之南京栖霞山
2019/10/18 职场文书