阅读更多

1顶
0踩

Web前端
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:
<tr ng-repeat="item in items" post-repeat-directive>…</tr>


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
<button ng-repeat="i in getNumber(numberOfPages()) track by $index" ng-click="setCurrentPage($index)">{{$index + 1}}</button
 
// Displayed list
<tr ng-repeat="item in displayedItemsList | startFrom: currentPage * pageSize  | limitTo:pageSize" /tr>


如果你不能/不想使用分页,但过滤过程又很慢,这时一定要检查前五步,并使用“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()”返回过滤链接。如果评估过程很慢,它将迅速降低整个应用的速度。

<li ng-repeat="item in filteredItems()">//这并不是一个好方法,因为要频繁地评估。
<li ng-repeat="item in items">//这是要采用的方法


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 */
<button ng-click="applyFilter('active')">Select active</button>
<ul><li ng-repeat="item in displayedItems">{{item.name}}<li></ul>


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

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

<li ng-repeat="item in items">
    <p> {{ item.title }} </p>
    <button ng-click="item.showDetails = !item.showDetails">Show details</buttons>
    <div ng-if="item.showDetails">
        {{item.details}}
    </div>
</li>


5.不要使用ng-mouseenter、ng-mouseleave等指令

使用内部指令,像ng-mouseenter,AngularJS会使你的页面闪烁。浏览器的帧速率通常低于每秒30帧。使用jQuery创建动画、鼠标悬浮效果可以解决该问题。确保将鼠标事件放入jQuery的.live()函数中。

6.关于过滤的小提示:通过ng-show隐藏多余的元素

对于长列表,使用过滤同样会减低工作效率,因为每个过滤都会创建一个原始列表的子链接。在很多情况下,数据没有变化,过滤结果也会保持不变。所以对数据列表进行预过滤,并根据情况将它应用到视图中,会大大节约处理时间。

在ng-repeat指令中使用过滤器,每个过滤器会返回一个原始链接的子集。AngularJS 从DOM中移除多余元素(通过调用 $destroy),同时也会从$scope中移除他们。当过滤器的输入发生改变时,子集也会随着变化,元素必须进行重新链接,或着再调用$destroy。

大部分情况下,这样做很好,但一旦用户经常过滤,或者列表非常巨大,不断的链接与销毁将影响性能。为了加快过滤的速度,你可以使用ng-show和ng-hide指令。在控制器中,进行过滤,并为每项添加一个属性。依靠该属性来触发ng-show。结果是,只为这些元素增加ng-hide类,来代替将它们移除子列表、$scope和DOM。

触发ng-show的方法之一是使用表达式语法。ng-show的值由表达式语法来确定。可以看下面的例子:

<input ng-model="query"></input>
<li ng-repeat="item in items" ng-show="([item.name] | filter:query).length">{{item.name}}</li><span style="font-size: 14px; line-height: 24px; font-family: Helvetica, Tahoma, Arial, sans-serif; white-space: normal;"></span>


另一个方法是为ng-show传递一个属性,并在单独的子控制器进行计算。该方法稍有点复杂,但却是更明晰的方法。

7.关于过滤的小提示:防抖动输入

解决第6点提出的持续过滤问题的另一个方法是防抖动用户输入。例如,如果用户输入一个搜索关键词,只当用户停止输入后,过滤器才会被激活。使用该防抖动服务的一个很好的解决方案请见:http://jsfiddle.net/Warspawn/6K7Kd/。将它应用到你的视图及控制器中,如下所示。

/* Controller */
// Watch the queryInput and debounce the filtering by 350 ms.
$scope.$watch('queryInput', function(newValue, oldValue) {
    if (newValue === oldValue) { return; }
    $debounce(applyQuery, 350);
});
var applyQuery = function() {
    $scope.filter.query = $scope.query;
};
 
/* View */
<input ng-model="queryInput"/>
<li ng-repeat= item in items | filter:filter.query>{{ item.title }} </li>


英文原文:AngularJS Performance Tuning for Long Lists / 译:CSDN
来自: CSDN
1
0
评论 共 5 条 请登录后发表评论
5 楼 damoqiongqiu 2013-10-26 12:34
OReilly的《AngularJS》已由电子工业出版社出版
http://damoqiongqiu.iteye.com/blog/1965167
4 楼 linder0209 2013-09-24 21:55
你不去尝试,怎么能知道他的美,不要因为没见过,没用过就不去做,其实除了前期学习成本外,这个框架还是不错的,维护起来方便。
3 楼 1927105 2013-09-23 13:21
bitray 写道
这个js组件,我还真是只听过没见过,也没多少实际使用案例,真不敢轻易的去做



Google目前推荐SPA,可以是去了解了解。
个人觉得SPA是面向企业级应用开发,互联网模式可以也可以参考参考。
2 楼 bitray 2013-09-22 11:19
这个js组件,我还真是只听过没见过,也没多少实际使用案例,真不敢轻易的去做
1 楼 ronnin 2013-09-22 11:15
好文。谢谢。

发表评论

您还没有登录,请您登录后再发表评论

相关推荐

  • JavaScript----面向对象编程

    面向对象概述 ES6面向对象语法 构造函数与原型对象 原型链 this的指向 错误处理 继承

  • js获取当周、当月时间区间的方法

    当周: var date = new Date(); var zero = new Date(date.getFullYear(),date.getMonth(),date.getDate(),"00","00","00"); var full = new Date(date.get...

  • JavaScript 进阶 - 第3天

    JavaScript 进阶 - 第3天 了解构造函数原型对象的语法特征,掌握 JavaScript 中面向对象编程的实现方式,基于面向对象编程思想实现 DOM 操作的封装。 了解面向对象编程的一般特征 掌握基于构造函数原型对象的逻辑封装 掌握基于原型对象实现的继承 理解什么原型链及其作用 能够处理程序异常提升程序执行的健壮性 一、面向对象 学习 JavaScript 中基于原型的面向对象编程序的`语法实现,理解面向对象编程的特征。 面向对象编程是一种程序设计思想,它具有 3 个显著的特征:封装、

  • mysql-定时任务

    在学习MySQL时,遇到大批量的数据产生时,数据库中会存储大量的历史数据,为了mysql性能的优化,对数据库进行优化非常有必要,对数据库语句进行优化是一部分增加性能的一个方法,定时任务对数据库历史数据(不重要的和交易没有影响的数据)进行迁移也是很好的增加数据库性能的方法,以下是我写的很简单的定时任务迁移。 定时任务特别注意:定时任务的事件计划一定要打开 一、查看定时任务的时间列表在这个表里面, i...

  • JS获取系统当前时间,本周时间,本月时间,前几天的时间(如系统前三天的时间)

    1.获取系统当前日期 function getSystemDate(){ var systemDate = new Date(); // 获取当年 var year = systemDate.getFullYear(); // 获取当月 (月+1是因为js中月份是按0开始的) var month = systemDate.getMonth() + 1

  • JavaScript语言简介及简单实例

    JavaScript语言是基于对象的(Object-Based),而不是面向对象的(object-oriented)。之所以说它是一门基于对象的语言,主要是因为它没有提供象抽象、继承、重载等有关面向对象语言的许多功能。而是把其它语言所创建的复杂对象统一起来,从而形成一个非常强大的对象系统。     虽然JavaScript语言是一门基于对象的,但它还是具有一些面向对象的基本特征。它可以根据需要

  • JS面向对象编程

    本文简单介绍JavaScript的面向对象编程

  • js 面向对象编程实例

    当我们在写js代码的时候,总是会想能否和java一样面向对象去编程,让人更易维护以及代码的分离。下面举一例说明:jsp页面如下<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>JSP Page</tit

  • 基于对象的JavaScript语言(短)

    基于对象的JavaScript语言  JavaScript语言是基于对象的(Object-Based),而不是面向对象的(object-oriented)。之所以说它是一门基于对象的语言,主要是因为它没有提供象抽象、继承、重载等有关面向对象语言的许多功能。而是把其它语言所创建的复杂对象统一起来,从而形成一个非常强大的对象系统。  虽然JavaScript语言是一门基于对象的,但它还是具有一

  • JS中基于对象语言的特性

    主流的编程语言中,以C语言为代表的面向过程类型语言,和以C++(Java)等为代表的面向对象类型语言形成两种编程范式。当然,在web前端开发过程中主要用到的JavaScript语言并不是严格意义的面向对象语言,和传统的强类型的面向对象语言有一定的差异。 面向对象语言具有三大特征: 1.继承性:通俗的说,一个对象不具有另一个对象的属性和方法,可以通过原型继承等方式获得另一个对象的属性和方法。这一...

  • JAVA中日期和时间的比较

    java中日期的调用,Date和Calendar的转换2009-09-22 17:34Date和Calendar是Java类库里提供对时间进行处理的类,由于日期在商业逻辑的应用中占据着很重要的地位,所以在这里想对这两个类进行一个基本的讲解,由于技术有限,不到之处请指正。 Date类顾名思义,一看就知道是和日期有关的类了,这个类最主要的作用就是获得当前时间了,然而这个类里面也具有设置时间以及一些其他

  • 通过代码探究javascript是如何实现面向对象的

    javascript如何实现面向对象的? 之前使用javascript大多是编写一些页面的动态效果,比较少用到面向对象方面的内容,但是随着越来越多人使用node写后端,就在这里使用代码去探究何为javascript面向对象。 先定义一个方法并且在控制台打印它的prototype. function Person(){ console.log(`i am a boy`); } conso...

  • JavaScript面向对象编程

    JS面向对象的程序设计,大部分初学者写JS都是运用的面向过程的思维来写的(即一个function后接着另一个function) 其实JS中的function就是一个对象,如下: var HelloWscats = function(){ console.log("wscats is not cat"); } var _init = function(){ var obj = new HelloWscats(); } _init(); // wscats is not cat 此

  • 2000下自定义函数调用不确定性内置系统函数

       2000下自定义函数和不确定性内置系统函数作者:hapyflystone   blog:http://blog.csdn.net/happyflytone转载请注明出处        我们经常在想自定义函数内调用一些不确定性的系统函数,可是天不作美系统会报错,下面演示一下系统函数getdate().      --创建函数    creat

  • JavaScript——面向对象编程

    JavaScript的面向对象编程和大多数其他语言如Java、C#的面向对象编程都不太一样。如果你熟悉Java或C#,很好,你一定明白面向对象的两个基本概念: 类: 类是对象的类型模板,例如,定义Student类来表示学生,类本身是一种类型,Student表示学生类型,但不表示任何具体的某个学生 对象:实例是根据类创建的对象,例如,根据Student类可以创建出xiaoming、xiaohong、xiaojun等多个实例,每个实例表示一个具体的学生,他们全都属于Student类型。 在JavaScript

  • javaScript--基于对象

    14.***基于对象***    (1)javaScript不是一纯面向对象的语言 它设有提供面向对象语言的许多功能        因此JavaScript设计者之所以把它你“基于对象”而不是面向对象的语言    (2)对象: 属性(properties), 方法(methods)    (3)用于操作对象的语句,/关键字/运算符:        for(属性名 in 对象名)

  • java中System,Date学习笔记

    System,Match,Date

Global site tag (gtag.js) - Google Analytics