浏览器的加载机制&白屏&FOUC演示

####### 网页是什么：
网页=Html+CSS+JavaScript；
Html：网页内容元素
CSS：控制网页样式；
JavaScript：操作网页内容，实现功能和效果

<scrippt src="cssgo.js"> <script>

或者

<script>
alert(1);
</script>

解析HTML字符串构建DOM树
解析CSS样式，产生CSSOM树
执行js脚本文件，js加载完成，通过DOM API 和 CSSOM API 来操作DOM树和CSSOM树
浏览器根据DOM树和CSSOM树构建渲染树（rendering tree），渲染树包括显示的节点和节点显示的样式信息，如果某个节点设置了样式 display: none，那么就不会在渲染树中显示，如果设置visibility:hidden渲染树中存在该节点，但不显示。
根据渲染树对每一个节点在页面上进行布局。（reflow）
遍历渲染树，为每一个节点绘制对应的样式，显示到屏幕。(repaint)

浏览器渲染机制

对于DOM结构中的各个元素都有自己的盒子（模型），这些都需要浏览器根据各种样式（浏览器的、开发人员定义的等）来计算并根据计算结果将元素放到它该出现的位置，这个过程称之为reflow；
当各种盒子的位置、大小以及其他属性，例如颜色、字体大小等都确定下来后，浏览器于是便把这些元素都按照各自的特性绘制了一遍，于是页面的内容出现了，这个过程称之为repaint。

Reflow 的成本比 Repaint 的成本高得多的多。DOM Tree 里的每个结点都会有 reflow 方法，一个结点的 reflow 很有可能导致子结点，甚至父点以及同级结点的 reflow。在一些高性能的电脑上也许还没什么，但是如果 reflow 发生在手机上，那么这个过程是非常痛苦和耗电的。
所以，下面这些动作有很大可能会是成本比较高的:
1. 当你增加、删除、修改 DOM 结点时，会导致 Reflow 或 Repaint。
2. 当你移动 DOM 的位置，或是搞个动画的时候。
3. 当你修改 CSS 样式的时候。
4. 当你 Resize 窗口的时候（移动端没有这个问题），或是滚动的时候。
5. 当你修改网页的默认字体时。
注：display:none（使此元素不会显示）会触发 reflow，而 visibility:hidden （使元素隐藏）只会触发 repaint，因为没有发现位置变化。

使用link标签将样式表放在顶部，是为了让css优先加载，防止页面上其他元素（图片，音频，视频等）的加载影响css的加载，同时css也会影响这些元素的加载（例如：浏览器的队列时间等）
将js文件放在底部
1. 脚本会阻塞后面内容的呈现（需要等待脚本加载完成之后页面内的元素才会被呈现）
2. 脚本会阻塞后面组件的下载（主要是影响图片和其他音频视频等资源的加载）
3. 脚本用于操作页面上的元素，放在顶部时，元素仍未加载，未出现在文档流中容易出现报错。
4. 脚本加载完成之后立即执行，如若碰到执行时间比较长，大量计算，循环甚至死循环时会影响后面资源的加载。
5. 当我们使用一个决定页面上所有元素的呈现的框架时，可以将其放置于顶部，因为该框架不加载好、未执行，页面都是一片空白或是以混乱的样式呈现。
对于图片和和css，在加载时会并发加载（如一个域名下同时加载两个文件）。但是加载JavaScript时，会禁用并发，并且阻止其他内容的下载，所以将JavaScript放在页面顶部也会导致白屏现象。

<script src="script.js"> </script>

没有defer或async，浏览器会立即加载并执行指定的脚本，“立即”指的是在渲染该script标签之下的文档元素之前，也就是说不等待后续载入的文档元素，读到就加载并执行。

<script async src="script.js"></script>

<script defer src="script.js"></script>

有defer，加载后续文档的过程和script.js的加载并行进行（异步），但script.js的执行要在所有元素解析完成之后，DOMContentLoaded事件触发之前完成.