AngularJS 性能优化二三事 【已翻译100%】

    xiaoxiao2023-06-05  188

    在过去的两年中,angularjs 的使用率有了很大的提升。简单的双向绑定是促使其流行的主要原因之一,但与此同时,它导致了在一个应用中出现了大量的 watcher。在后台,angularJS 会执行所谓的 “脏值检查”。之所以要做脏值检查目的是为了检查在 “scope” 中的数据是否发生了变化;框架必须周期性的检测数据是否发生了变化… 脏值检查会每 40ms 更新一次.. 想想看.. 如果它需要检查超多数据的时候; Crap!!

    让我们来看看如何改善 angularJS 的性能..

    减少 watcher 数量

    可能很多人都会抱怨 angular js 应用的性能; 特别是当他们用了 ng-repeat 的时候;为什么会这样? Watcher 应该是这背后的主要原因。一个 angular 指令会产生一个 watcher (比如 ng-src;ng-href;)下面的例子很详细的解释了这种情况http://plnkr.co/edit/jwrHVb?p=preview看看上面的例子,你加载的数据越多; 产生的 watchers 就越多;

    解决方案通过使用 bindonce 指令来避免使用双向绑定; 当你不需要双向绑定的时候,试试看用 bindonce 指令,比如 bo-if; bo-show; 看看下面这个精简过 watcher 数量的例子

    http://plnkr.co/edit/0DGOrk?p=preview文档和源码放在这里https://github.com/Pasvaz/bindonce

    延迟加载 angular controller

    在初始化的时候加载控制器对小应用来说很合适;但是如果应用的 scope 很大怎么办?如果我们在特定页面初始化的时候,把控制器动态的加载到我们的 DOM 上会怎样? 很赞,对不对?

    如果这些控制器是在特定页面加载之后,动态的加载到 DOM 上的话; 不单应用的初始化会很快; 而且也会降低在 DOM 中生成的对象数量;

    下面例子是如何动态加载控制器到 DOMhttps://github.com/ifyio/angularjs-lazy-loading-with-requirejs

    删除那些不在你 viewport 中的,多余的 html 对象

    对于不定长列表最常见的问题…. 尤其是在用 ng-repeat 的时候; 就是你必须把所有数据都加载进来,即使你只需要显示其中一部分数据; 每次重复会生成至少同样数量的 watcher;所以为什么不只加载显示所必要的那部分数据呢。是不是很 Crazyyyyyyyyyy?试试这个https://github.com/angular-ui/ui-utils/blob/master/modules/scroll/README.md

    这个指令只加载那些在 viewport 中的对象,并清除那些看不到的;这不仅仅削减了watcher数量,同时也降低了浏览器中 DOM 的大小。是不是超酷?

    你觉得呢?告诉我呗。

    相关资源:敏捷开发V1.0.pptx
    最新回复(0)