当在扩展一个Angular应用的时候,巨大的数据集导致$digest()循环运行缓慢。你可以做许多性能上的优化,比如小心$watch()和$filter(),使用一次性绑定,或者使用Batarang找出消耗性能的操作。但有时,即便做了这些提升,由于$digest()循环,具有大量数据的应用还是可以感觉到迟钝。一个典型的例子是键盘输入。如果你有许多数据,并且每当用户向一个input或者textarea输入字符时你的$digest()循环都会开始,那么当有些人打字很快或者一直按着空格键,就会导致处理器过载,于是你就会发现屏幕上的文字更新有明显的延迟。
我找到处理这个$digest()循环延迟问题的最佳方案是使用debounce函数。你问什么事debounce函数?好吧,John Hann早在2000年写过一篇很好的文章来解释,并且使用pureJS来实现了它。几年后,人们有那个自定义angular服务实现了它。这显得更加angular了,只是让你的代码有点小凌乱。不过现在,Angular 1.3已经官方支持了debounce,所以digest循环延迟变得很容易处理。
提示:debounce函数是指,只要它一直在被调用,它就不会被触发,直到它不再被调用的X毫秒后。
打个比方,你可以在一个文本框上使用一个150毫秒的debounce函数,那么直到用户停止输入150毫秒后,$digest() 循环才会被触发。随着Angular最新的本地化支持,这变得更加简单了。你需要的只是一个HTML属性,就可以像这样来延迟执行$digest() 循环:
<input ng-model="user.name" ng-model-options="{ debounce: 150 }" />
那么debounce最好应该延迟几毫秒?好吧,这主要取决于你的$digest()循环的工作量。一方面讲,你的debounce的延迟时间越短,那么从用户开始输入到$digest()被触发和完成的时间也就越短。 这将决定一个应用给人感觉上的响应能力。如果延迟时间太长,你的app将看上去不怎么灵敏。但从另一方面说,如果你的debounce时间太短,$digest()循环将运行的过于频繁,也就回导致你的应用感觉上更加慢了。你会理解什么选择对你的应用来说是最好的。
祝优化顺利!
希望你喜欢,并分享我的工作~带你走近AngularJS系列:
在 AngularJS 应用中通过 JSON 文件来设置状态
AngularJS 之 Factory vs Service vs Provider