浏览器显示页面工作流程+Anjular页面UI闪烁原因

目前我已经从事前端工作5个月左右的时间，今天第一次尝试写博客，内容大多是在学习过程中查到的知识和个人理解的结合，如果有错误，欢迎指出，望同发展、共富裕~~

浏览器显示页面主要分为三个阶段，分别为：加载、解析、渲染，具体工作内容如下：

加载：引用外部文件，把其放到合适位置，页面自上而下的加载，加载过程中伴随着解析、渲染，解析完    一 部分就展示一部分的内容。

解析：主要进行三部分工作，分别为：

   1.将HTML解析成DOM树，构建过程是深度遍历方式。

   2.将CSS解析成CSS规则树

   3.操作JS脚本，通过DOM API和CSS API来操作DOM树和CSS规则树

渲染：就是浏览器通过DOM树和CSS规则树来构造Rendering树，最终变成人类可以看到的图像。

Angular页面，浏览器显示页面工作流程：

1、浏览器载入HTML，然后把它解析成DOM。

2、浏览器载入angular.js脚本。

3、AngularJS等到DOMContentLoaded事件触发【需要在页面完全加载完成后触发】。

4、AngularJS寻找ng-app指令，这个指令指示了应用的边界。

5、使用ng-app中指定的模块来配置注入器($injector)。【$injector是一个IOC容器（有且只有一个），

包含很多服务】

6、注入器($injector)是用来创建“编译服务($compile service)”和“根作用域($rootScope)”的。

【每个模块有一个$rootScope，以服务的形式加入到$injector】

7、编译服务($compile service)是用来编译DOM并把它链接到根作用域($rootScope)的。

8、ng-init指令将“World”赋给作用域里的name这个变量。

9、通过{{name}}的替换，整个表达式变成了“Hello World”。

所以Angular页面会出现UI闪烁的问题，是因为angular在等待Rendering树渲染过程中，等待

DOMContentLoaded事件的触发，所以会闪烁，解决办法有：

1.加个ng-cloak，并且在css内加样式即可，

2.直接写css的文件

3.用ng-bind可以解决。