zoukankan      html  css  js  c++  java
  • AngularJS性能优化

    几个概念

    域$scope和更新周期DigestCycle

    AngularJS的域本质上是一些JavaScript对象,它们从一些预定义的对象继承而来。基本上,小的域比大的域运行要快。

    每创建一个新的域,都会给垃圾回收器添加更多待回收的内容。

    每一个域都会存放一个由方法组成的数组$$watchers.

    每当域中的一个值(属性)或绑定的DOM,如ng-repeat,ng-switch和ng-if等等,调用$watch时,一个函数(function)就会添加到相对应域中的$$watchers数组队列中。

    当域中的值发生改变时,在$$watchers中所有的watchers函数都会被触发调用。并且当它们中的任何一个修改了域中的某个值时,它们会被再次触发执行。这个过程会一直循环下去直到$$watcher数组队列中不再做任何更改或抛出异常为止。

    另外,如果任何代码执行$scope.$apply(),都会触发更新周期。

    在设计AngularJS时应该遵守的一般准则

    大型对象和服务器调用

    我们要尽可能地简化我们的对象。当对象从服务器返回时,这一点尤为重要。

    监视函数(watching functions)

    不要将任何东西(ng-show、ng-repeat等等)直接绑定到一个函数。不要直接监视任何函数的返回值。该函数会在每个更新周期都执行,可能会降低你应用的速度。

    监视对象 (watching objects)

    虽然AngularJS提供了第三个可选参数来监视整个对象的改动--将调用$watch的第三个参数设为true。这是非常不好的想法,一个更好的解决办法是依靠服务和对象引用,监视域之间的变化。

    需要注意的代码技巧

    避免在循环内部调用函数

    变量作用范围限制的越紧密越好,这样垃圾回收器可以更快回收空间。

    可能的话,避免使用ng-repeat指令

    合理利用一次性绑定机制

    AngularJS最近的几次更新中引入了一个很有用的功能:一次性的渲染模板某些变量,并且它们不会受到未来Model变化的影响。这对于改善性能特别有用,一般情况,设置模板数据:

    <i>{{tip}}</i>

    使用一次性变量渲染语法则可以这样:

    <i>{{ :: tip }}</i>

    这样当AngularJS按常规处理完DOM和该变量后,他会在内部$$watchers的监控列表中删除这些一次性变量。

    适当的直接操作DOM

  • 相关阅读:
    BI.ver.1.实战系列. 用户开户以及登陆的分析
    mdx 时间函数
    MDX 生成复杂的集合
    SSAS远程访问
    mdx 聚合函数
    Spring Cloud 之 Ribbon服务消费(五)
    Spring Cloud 之 Eureka Client服务注册(三)
    Spring Cloud 之 Eureka 高可用集群搭建(二)
    Spring Cloud 之 Feign Client服务消费(六)
    Spring Cloud 之 Feign Client优雅调用(七)
  • 原文地址:https://www.cnblogs.com/1000px/p/4707629.html
Copyright © 2011-2022 走看看