angularjs工作原理的理解

一:多页面web应用

1.普通的DOM解析过程

	在传统的JS和HTML编写的网页中,.览器首先获取到的是html文档,文档获取完成后.这时会触发一个叫做DOMContentLoaded事件
接下来,浏览器引擎就会将html文档解析成一个DOM树,在解析的过程中,当浏览器解析遇到js代码,也就是<script>标签的时候,浏览器会暂时停止DOM解析,而是去获取js文件,等到js获取成功之后,才会继续解析dom,直到所有DOM解析完成.

2.JS代码式在什么时候执行的呢?

        写过js代码的基本上都直到,js可以放在页面的很多位置,最常见的就是写在head中和body结尾的位置,那么这两种写法有什么区别呢?当我们的js代码放在head中的时候,js代码在被调用的时候就会被执行,当js代码写在body中的时候,代码会在整个DOM解析完成脚本,之后执行.至于什么时候写在什么位置,就需要根据情况来选择了.

二.单页面应用angular解析流程

	angular应用和普通的html一样,只是在head部分多加入了angular脚本.当html文件被取回后,等到angular.js脚本被取回的时,浏览器会立即执行angular.js脚本,同时angular会设置一个时间监听器来监听DOMContextLoaded事件,现在就是angular登场的时候了.
        当angular检测到DOMContextLoaded事件时,angular会查找我们html中的ng-app指令,然后创建运行需要的组件,即$injector,$compiler和$rootscope,这时就会开始解析dom树了.angular利用compile指令,会查找DOM树中的各种指令,并将每个指令的scope绑定到controller的scope中,然后链接到$rootscope中.
	在DOM解析的过程中,指令可以式DOM树属性,名称等.当检测到指令时,angular同时会根据优先级排序这些指令.使用我们的$injector和$compiler来执行该指令,同时,当我们的指令中含有template模板时,angualar会生成相应的内联模板.每个节点的$compiler执行完成后,会调用链接函数,这个链接函数就会监视我们dom中的指令了.这样就有了实时视图了.

    DOMContextloaded事件是在DOM解析完成之后，还未加载资源之前被触发的。window.onload事件是在所有的DOM解析以及资源获取完成之后才触发的。

三.javascript事件循环

    js在执行的过程中，任务执行分为同步任务和异步任务，这样就产生了一个主线程和一个任务队列。所有的同步任务都是在主线程上面执行，异步任务是在任务队列中执行，比如我们的文件io操作或者http链接，当io操作完成时，就会在队列中增加一个已经完成事件，当主线程执行栈空了之后，就会去执行任务队列中的任务，不断重复主线程执行栈空，然后执行任务队列中的任务这个过程，这样就形成了我们常说的event loop。

四.Angularjs事件循环

     angular除了默认的事件循环之外，还有自己的时间循环，这个事件循环被称为￥$digist循环，它由两个小循环组成，分别是evalAsync和$watch list
     当有事件被触发时，事件可以使angular的模型改变，点击等事件，angular的处理程序就会在angular的上下文中进行调用，在angular的源码中，我们能看到是￥applay方法调用了digest，angular会在rootscope中启动了这个digest，并会传播到所有的子作用域中。
     angular进入$digest循环时，会等待$ evalAsync队列清空。此外，$digest循环还会等待$watch表达式列表。在$digest检测到变化，就调用$watch函数，然后再次查看$watch列表以确保没有东西发生改变。