博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
angularjs性能优化
阅读量:6906 次
发布时间:2019-06-27

本文共 976 字,大约阅读时间需要 3 分钟。

学习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只是简单的隐藏,但其实已经加载完成。

$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等方法代替。

总结

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


参考:

转载地址:http://numdl.baihongyu.com/

你可能感兴趣的文章
Form 对象
查看>>
Codeforces Round #533(Div. 2) C.Ayoub and Lost Array
查看>>
HDU - 3966-Aragorn' Story(树链剖分+线段树)
查看>>
Linux基础第五章 进程控制
查看>>
jquery事件机制扩展,jquery鼠标右键事件。
查看>>
计算机专业术语
查看>>
Leetcode-探索 | 移动零
查看>>
Tesseract+opencv+VS+win实现OCR
查看>>
[学习笔记]博弈论
查看>>
python os sys模块(二)
查看>>
Innodb间隙锁,细节讲解(转)
查看>>
Apache安装
查看>>
关于对char类型数据赋予负值的汇编表现
查看>>
win10安装MarkdownPad 2报错This view has crashed的处理及md简单语法
查看>>
Windows聚焦转为图片
查看>>
POJ NOI0101-09 字符菱形
查看>>
[转载] 信息系统项目管理师考试习题——整体管理
查看>>
LC 425 word squares
查看>>
Web框架之Django_08 重要组件(form组件、cookie和session组件)
查看>>
HDU 6103
查看>>