angularjs性能优化你知道多少?这里有详细的angularjs性能优化过程
angularjs
有一段时间了,但是都没有怎么考虑过性能方面的问题,上次在研究过滤器的时候涉及到了性能问题。所以自己也总结了下常用的性能优化。下面我们一起看看吧一、优化$watch
1.及时移除不必要的watch
var unWatch = $scope.$watch('', function() { // do something ... if (someCondition) { unWatch(); // 取消监听 } });
2.尽量避免深度watch
我们都知道$watch
有三个参数,第三个参数为true
就是要深度监听的。这个参数主要是在嵌套对象的时候会用到,但是要尽量避免使用,如果你只是想看看基本属性的变化,那么就不要使用第三个参数进行深度的监听,这回大大拖慢每一次监听的时间。
3.ng-if和ng-show
尽量使用ng-if
,因为前者不仅会移除DOM
,还会移除相应的watch
。
而ng-show
只是简单的隐藏,但其实已经加载完成。(想学更多就到PHP中文网angularjs学习手册栏目中学习)
二、$apply和$digest
$apply
会使angular
进入$digest循环
,然后从$rootScope
开始遍历,检查变更。
$digest
只会检查当前scope
以及其子scope
。
所以,但我们确定某个操作只会影响当前的scope
,使用$digest
会稍微提升性能。
三、优化ng-repeat
ng-repeat
真是使用比较多的指令了,但是好像经常忽略track by
。
我们的ng-repeat
经常就这么写:
ng-repeat="item in items"
但是如果这么写的话,当我们刷新页面的时候,它会删除所有已有的DOM,然后重新创建和渲染。但是如果我们加上track by
就不同了:
ng-repeat="item in item track by item.id"
这样angular就会复用
已有的DOM,然后更新变化的部分。这就减少了不必要的渲染。
四、其他优化
console.log
很耗时,发布的时候一定要干掉。慎用filter,可以在
controller
中预先处理。尽量避免使用广播事件,可以使用双向数据绑定或者共享
service
等方法代替。
五、关于angularjs的总结
我总结的还不是很全,都只是我常用到的。随着更多的使用,理解也会更进一步的加深。(最后推荐PHP中文网angularjs参考手册栏目,那里有你想学的angularjs的内容)
【小编推荐】
angularjs的表达式怎么用?angularjs的表达式的使用实例
angularjs和jQuery的区别有哪些?angularjs对比jQuery的结果
以上就是angularjs性能优化你知道多少?这里有详细的angularjs性能优化过程的详细内容,更多请关注其它相关文章!