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

  • 相关阅读:
    [No000068]document.body.clientHeight 和 document.documentElement.clientHeight 的区别
    [No000067]Js中获取当前页面的滚动条纵坐标位置scrollTop
    jquery 给a标签绑定click
    java 延时
    MySQL建表语句+添加注释
    ubuntu 搜狗输入法内存占用太多,卡顿不够处理办法
    org.apache.http.client.HttpClient使用方法
    json 文件打读取
    bootStrap @media 用法
    java web项目获取项目路径
  • 原文地址:https://www.cnblogs.com/1000px/p/4707629.html
Copyright © 2011-2022 走看看