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 相关文章推荐
基于jQuery实现的百度导航li拖放排列效果,即时更新数据库
Jul 31 Javascript
Javascript模块化编程(三)require.js的用法及功能介绍
Jan 17 Javascript
JavaScript获取/更改文本框的值的实例代码
Aug 02 Javascript
Flexigrid在IE下不显示数据的有效处理方法
Sep 04 Javascript
浅谈JavaScript中的作用域和闭包问题
Jul 07 Javascript
每天一篇javascript学习小结(String对象)
Nov 18 Javascript
js封装tab标签页实例分享
Dec 19 Javascript
webuploader模态框ueditor显示问题解决方法
Dec 27 Javascript
JavaScript实现分页效果
Mar 28 Javascript
JavaScript实现购物车基本功能
Jul 21 Javascript
详解vue-router 命名路由和命名视图
Jun 01 Javascript
高效jQuery选择器的5个技巧实例分析
Nov 26 jQuery
浅析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的call_user_func传reference引发的思考
2010/07/23 PHP
PHP批量删除、清除UTF-8文件BOM头的代码实例
2014/04/14 PHP
PHP curl批处理及多请求并发实现方法分析
2018/08/15 PHP
PHP中number_format()函数的用法讲解
2019/04/08 PHP
ajax java 实现自动完成功能
2012/12/19 Javascript
jQuery easyui datagrid动态查询数据实例讲解
2013/02/26 Javascript
innerText和textContent对比及使用介绍
2013/02/27 Javascript
js中把JSON字符串转换成JSON对象最好的方法
2014/03/21 Javascript
jQuery实现有动画淡出效果的二级折叠菜单代码
2015/10/17 Javascript
javascript中eval和with用法实例总结
2015/11/30 Javascript
JavaScript设计模式经典之命令模式
2016/02/24 Javascript
jQuery Easyui 验证两次密码输入是否相等
2016/05/13 Javascript
浅谈JS读取DOM对象(标签)的自定义属性
2016/11/21 Javascript
微信小程序 二维码canvas绘制实例详解
2017/01/06 Javascript
全新打包工具parcel零配置vue开发脚手架
2018/01/11 Javascript
security.js实现的RSA加密功能示例
2018/06/06 Javascript
JS二级菜单不同实现方法分析【4种方法】
2018/12/21 Javascript
Vue父组件向子组件传值以及data和props的区别详解
2020/03/02 Javascript
vue项目在webpack2实现移动端字体自适配功能
2020/06/02 Javascript
Python中random模块用法实例分析
2015/05/19 Python
用python写的一个wordpress的采集程序
2016/02/27 Python
详解如何利用Cython为Python代码加速
2018/01/27 Python
python使用sqlite3时游标使用方法
2018/03/13 Python
Python内置加密模块用法解析
2019/11/25 Python
Django中从mysql数据库中获取数据传到echarts方式
2020/04/07 Python
matplotlib事件处理基础(事件绑定、事件属性)
2021/02/03 Python
迪卡侬英国官网:Decathlon英国
2017/04/08 全球购物
保险专业大专生求职信
2013/10/26 职场文书
恐龙的灭绝教学反思
2014/02/12 职场文书
梅花魂教学反思
2014/04/25 职场文书
环保倡议书300字
2014/05/15 职场文书
国际贸易专业自荐信
2014/06/10 职场文书
企业员工集体活动方案
2014/08/17 职场文书
2014年社区重阳节活动策划方案
2014/09/16 职场文书
2016年中秋祝酒词
2015/11/26 职场文书
2019年工作总结范文
2019/05/21 职场文书