angularjs性能优化的方法

　　

学习angularjs有一段时间了,但是一直都没有怎么考虑过性能方面的问题,上次在研究过滤器的时候涉及到了性能问题,所以自己也总结了下常用的性能优化。

　　

<>强优化美元看
　　

　　

1。及时移除不必要的看
　　

　　 　　 　　var unWatch=$范围。看美元(“函数(){//做某事 　　… 　　如果(someCondition) { 　　unWatch ();//取消监听 　　} 　　}); 　　之前 　　 　　

<强> 2。尽量避免深度看
　　

　　

我们都知道美元看有三个参数,第三个参数为真实就是要深度监听的。这个参数主要是在嵌套对象的时候会用的到,但是要尽量避免使用,如果你只是想看看基本属性的变化,那么就不要使用第三个参数进行深度的监听,这回大大拖慢每一次监听的时间。

　　

<强> 3。ng-if和ng-show
　　

　　

尽量使用ng-if,因为前者不仅会移除DOM,还会移除相应的手表。

　　

而ng-show只是简单的隐藏,但其实已经加载完成。
　　

　　

ng-show指令在特定的元素上切换CSS显示属性,而ng-if指令实际上会先从DOM中删除元素,如果在需要的话重新创建。此外,ng-switch指令是ng-if的替代方案,具有相同性能优势。
　　

　　

<强>应用和消化美元
　　

　　

申请美元会使角进入美元消化循环,然后从美元rootScope开始遍历,检查变更。

　　

消化美元只会检查当前范围以及其子范围。

　　

所以,但我们确定某个操作只会影响当前的范围,使用美元消化会稍微提升性能。

　　

<>强优化ng-repeat
　　

　　

ng-repeat真是使用比较多的指令了,但是好像经常忽略跟踪。

　　

建议避免在JavaScript中使用ng-repeat来构建HTML。对于某些应用程序来说,使用ng-repeat会增加不必要的监视者。使用ng-bind-html指令是解决这个问题的更好的办法。

　　

我们的ng-repeat经常就这么写:

　　 　　 　　ng-repeat="项目在项目" 　　 　　

但是如果这么写的话,当我们刷新页面的时候,它会删除所有已有的DOM,然后重新创建和渲染。但是如果我们加上跟踪,就不同了:

　　 　　 　　ng-repeat="项目在项目跟踪item.id” 　　 　　

这样角就会复用已有的DOM,然后更新变化的部分。这就减少了不必要的渲染。

　　

<强>使用美元watchCollection(包括第三个参数)

　　

通常在使用美元看的时候只会用到两个参数,但是如果加上第三个参数的话,例如“看美元(“价值”、功能(){},true)”,则可以让角执行深度检查(检查对象的每个属性)。但这可能会带来更多的性能开销。因此,为了解决这个性能问题,角提供了“watchCollection美元(“价值”,函数(){})”,它的第三个参数的功能与美元看的几乎相同,只是它只检查对象属性的第一层,以降低性能开销。
　　

　　

<强>使用控制台。时间来调试问题

　　

如果你在对应用程序努力地进行调试,以解决性能问题的话,请使用console.time,这是一个非常棒的API。

　　

<强>去抖ng-model

　　

你可以使用ng-model来去除输入,例如,要撤销像谷歌这样的搜索输入的话,你必须使用ng-model-options={防反跳:250}”。由于输入模型发生了变化,使得消化周期每250毫秒触发不超过一次。

　　

<强>其他优化
　　

　　

控制台。日志很耗时,发布的时候一定要干掉。
　　

　　

慎用过滤器,可以在控制器中预先处理。
　　

　　

尽量避免使用广播事件,可以使用双向数据绑定或者共享服务等方法代替。
　　

　　


　　

　　

我总结的还不是很全,都只是我常用到的。随着更多的使用,理解也会更进一步的加深。

　　

参考:https://github.com/atian25/blog/issues/5
　　

　　

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。

angularjs性能优化的方法