一、FOUC 是什么
FOUC即无样式内容闪烁，也可以称为文档样式短暂失效，主要就是指HTML已加载而样式表并未加载，此后样式表再加载而产生的闪烁现象。
在引用css的过程中，如果方法不当或者位置引用不对，会导致某些页面在windows下的ie出现一些奇怪的现象，以无样式显示页面内容的瞬间闪烁，这种现象称之为文档样式短暂失效，简称FOCU
原因分析：当样式表晚于结构性 html 加载，当加载到此样式表时，页面将停止之前的渲染。 此样式表被下载和解析后，将重新渲染页面，也就出现了短暂的花屏现象。
二、如何避免FOUC
1、样式表前置
根据浏览器渲染的顺序，将CSS在<head>中引入或者嵌入，相对于将CSS放到<body>或者页面底部来说，可以使页面渲染速度加快，这对于页面内容比较丰富的网站或者网络链接较慢时相当重要。
假如将样式表放置于底部，就会导致浏览器还未加载样式表就开始渲染页面，无法渐进式渲染页面而直接从无样式状态立即跳转到有样式状态，就会造成FOUC，用户体验较差；
此外有些浏览器可能会在CSS下载完成后才开始渲染页面，样式表放在下方会导致页面渲染推迟。
2、尽量使用<link>而避免使用@import
当HTML文件被加载时，<link>引用的文件会同时被加载，而@import引用的文件则会等页面全部下载完毕再被加载，所以有时候浏览@import加载CSS的页面时会没有样式，会出现FOUC现象，网速慢的时候就比较明显。
此外当<link>与@import混用可能会对网页性能有负面影响，在一些低版本IE中<link>与@import混用会导致样式表文件逐个加载，破坏并行下载的方式导致页面加载变慢。
此外无论是哪种浏览器，若在<link>中引入的CSS中继续使用@import加载外部CSS，同样会导致顺序加载而不是并行加载，因为浏览器需要先解析<link>引入的CSS发现@import外部CSS后再次引入外部CSS，这样就导致页面加载变慢。
2，link 和 @import 的区别是
差别1：
本质的差别：link 属于 XHTML 标签，而 @import 完全是 CSS 提供的一种方式。
差别 2：
加载顺序的差别： 当一个页面被加载的时候（就是被浏览者浏览的时候) ，link 引用的 CSS 会同时被加载，而 @import 引用的 CSS 会等到页面全部被下载完再被加载。所以有时候浏览 @import 加载 CSS 的页面时开始会没有样式(就是闪烁)，网速慢的时候还挺明显。
差别 3：
兼容性的差别: @import 是 CSS2.1 提出的，所以老的浏览器不支持，@import 只有在 IE5 以上的才能识别，而 link 标签无此问题。
差别 4：
使用 dom(document object model文档对象模型 )控制样式时的差别：当使用 javascript 控制 dom 去改变样式的时候，只能使用 link 标签，因为@import 不是 dom 可以控制的。
三，flux的理解
Flux同React一样， 都是出自Facebook。Flux的核心思想是利用单向数据流和逻辑单向流来应对MVC架构中出现状态混乱的问题。
Flux由3部分组成：Dispatcher、Store和View。其中， Dispatcher(分发器) 用于分发事件； Store用于存储应用状态， 同时响应事件并更新数据； View表示视图层， 订阅来自Store的数据， 渲染到页面。
Flux的核心是单向数据流， 其运作方式是：
Action ->Dispatcher ->Store ->View
整个流程如下：
(1) 创建Action(提供给Dispatcher) 。
(2) 用户在View层交互(比如单击事件) 去触发Action。
(3) Dispatcher收到Action， 要求Store进行相应的更新。
(4) Store更新， 通知View去更新。
(5) View收到通知， 更新页面。
从上面的流程可以得知， Flux中的数据流向是单向的， 不会发生双向流动的情况， 从而保证了数据流向的清晰脉络。而MVC和MV VM中数据的流向是可以双向的， 状态在Model和View之间来回“震荡”， 很难追踪和预测数据的变化。
深入Flux
1、Dispatcher简介
Dispatcher是Flux中的核心概念，它是一个调度中心，管理着所有的数据，所有事件通过它来分发。Dispatcher处理Action（动作）的分发，维护Store之间的依赖关系，负责处理View和Store之间建立Action传递。
Dispatcher用于将Action分发给Store注册的回调函数，它与普通的发布-订阅模式（pub-sub）有两点不同：
（1）回调函数不是订阅到某一个特定的事件或频道，每个动作会分发给所有注册的回调函数
（2）回调函数可以指定在其他回调函数之后调用
Dispatcher通常是应用级单例，一个应用中只需要一个Dispatcher即可
2、Action简介
Action 可以看作是一个交互动作， 改变应用状态或View的更新， 都需要通过触发Act n来实现。Action执行的结果就是调用了Dispatcher来处理相应的事情。Action是所有交互的入口， 改变应用的状态或者有View需要更新时就需要通过Action实现。
Action是一个JavaScript对象， 用来描述一个行为， 里面包含了相关的信息。
3、Store和View简介
Store包含应用状态和逻辑， 不同的Store管理不同的应用状态。Store负责保存数据和定义修改数据的逻辑，同时调用Dispatcher的register()方法将自己设为监听器。每当发起一个Action（动作）去触发Dispatcher，Store的监听器就会被调用， 用于执行是否更新数据的操作。 如果更新了， 那么View中将获得最新的状态并更新。
Store在Flux中的特性是， 管理应用所有的数据； 只对外暴露getter方法， 用于获取Store的数据， 而没有暴露setter方法， 这就意味着不能通过Store去修改数据。如果要改Store的数据， 必须通过Action动作去触发Dispatcher实现。
只要Store发生变更，它就会使用emit()方法通知View更新并展示新的数据。
Flux的缺点
Flux的缺陷主要体现在增加了项目的代码量， 使用Flux会让项目带入大量的概念和文件；单元测试难以进行， 在Flux中， 组件依赖Store等其他依赖， 使得编写单元测试非常复杂。
Flux架构总结
Flux是一种架构模式， 它的出现可以说是MVC的“替代方案”， 它是于复杂应用中数据流管理的一种方案。
Flux的核心思想是“单向数据流”， 加之其“中心化控制”特点得以让题据改支源头变得可控， Flux架构追踪数据改变的复杂程度相对于MVC简单许多；Flux让View保持高度整洁， 无须关注太多逻辑， 只需关注传入的数据；Flux的Action提高了系统抽象的程度，对于用户来说，它仅仅就是一个动作。
21万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
