angularjs性能优化你知道多少？这里有详细的angularjs性能优化过程-js教程-PHP中文网

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

寻∝梦

发布： 2018-09-07 11:43:12

原创

1253人浏览过

认识angularjs有一段时间了，但是都没有怎么考虑过性能方面的问题，上次在研究过滤器的时候涉及到了性能问题。所以自己也总结了下常用的性能优化。下面我们一起看看吧

一、优化$watch

var unWatch = $scope.$watch('', function() {
    // do something
    ...
    if (someCondition) {
        unWatch();    // 取消监听
    }
});

登录后复制

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

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

而watch只是简单的隐藏，但其实已经加载完成。(想学更多就到PHP中文网angularjs学习手册栏目中学习)

ng-show会使$apply进入angular，然后从$digest循环开始遍历，检查变更。

$rootScope只会检查当前$digest以及其scope。

所以，但我们确定某个操作只会影响当前的子scope，使用scope会稍微提升性能。

$digest真是使用比较多的指令了，但是好像经常忽略ng-repeat。

我们的track by经常就这么写：

ng-repeat="item in items"

登录后复制

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

多墨智能

多墨智能 - AI 驱动的创意工作流写作工具

108

ng-repeat="item in item track by item.id"

登录后复制

这样angular就会track by已有的DOM，然后更新变化的部分。这就减少了不必要的渲染。

我总结的还不是很全，都只是我常用到的。随着更多的使用，理解也会更进一步的加深。（最后推荐PHP中文网angularjs参考手册栏目，那里有你想学的angularjs的内容）

【小编推荐】

以上就是angularjs性能优化你知道多少？这里有详细的angularjs性能优化过程的详细内容，更多请关注php中文网其它相关文章！