angularjs性能优化你知道多少?这里有详细的angularjs性能优化过程

企鹅博客
19512
文章
0
评论
2020年3月8日15:54:31 评论 30 views 1159字阅读3分51秒

认识
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性能优化过程的详细内容,更多请关注php教程其它相关文章!

继续阅读
  • 版权声明: 发表于 2020年3月8日15:54:31
  • 转载注明:https://www.qieseo.com/406216.html
JS随机排序数组实例分析 js教程

JS随机排序数组实例分析

本文主要介绍了JS随机排序数组实现方法,结合具体实例形式对比分析了javascript针对数组进行随机排序的相关操作技巧,需要的朋友可以参考下,希望能帮助到大家。 做随机显示推荐广告的时候,需要随机排...
Angular2模块懒加载实例详解 js教程

Angular2模块懒加载实例详解

本文主要介绍了浅谈Angular2 模块懒加载的方法,小编觉得挺不错的,现在分享给大家,希望能帮助到大家。 当项目变得复杂庞大以后,如果所有页面都在一个模块里,就会出现首页加载慢的问题,因为首页就已经...
不使用router-link实现页面跳转 js教程

不使用router-link实现页面跳转

这次给大家带来不使用router-link实现页面跳转,不使用router-link实现页面跳转的注意事项有哪些,下面就是实战案例,一起来看一下。 1、给父页面跳转的地方设置事件 //原来的页面上展示...
匿名

发表评论

匿名网友 填写信息

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: