初识JAVASCRIPT

浏览器是如何渲染网页的？

 在学习Javascript之前，我们先要看看浏览器如何渲染HTML的文件的？首先浏览器先通过网络层，从服务器端下载html文件，然后浏览器通过正则进行匹配，进行语义分析，然后构建DOM树。接下来加载资源也就是加载CSS和JS。
 浏览器加载CSS的时候，有两种方式:
   1.  先把所有的CSS资源加载完成，然后绘制CSSOM树。
   2.  先按照浏览器默认的样式进行绘制，遇到CSS资源中的样式，再加载资源样式。也就是说是边绘制边加载。

这个时候我们就涉及到了CSS的放置方式的问题，因为CSS的放置前后顺序会引起白屏和FOUC的问题。

白屏问题
如果把样式放在底部,对于IE浏览器,在某些场景下(新窗口打开,刷新等)页面会出现白屏,而不是内容逐步展现,如果使用 @import标签,即使 CSS 放入 link, 并且放在头部,也可能出现白屏.

FOUC (Flash of Unstyled Content) 无样式内容闪烁
如果把样式放在底部,对于IE浏览器,在某些场景下(点击链接,输入URL,使用书签进入等),会出现 FOUC 现象(逐步加载无样式的内容,等CSS加载后页面突然展现样式).对于 Firefox 会一直表现出 FOUC .

所以，为了不引起上述的问题。我们一般将CSS文件放入head标签内。

我们说完了如何在HTML中放置CSS的问题，那接下来还要说说JS的放置问题。因为加载CSS属于加载外部资源，很显然，JS也属于外部资源，我们不可能将JS全部写入script标签中。（如果JS需要很大的话）。

其实我们知道浏览器加载JS的时候，不会像加载CSS的时候可以一次并发加载2个或者4个文件。浏览器会立即加载并执行指定的脚本，“立即”指的是在渲染该 script 标签之下的文档元素之前，也就是说不等待后续载入的文档元素，读到就加载并执行。这时候如果script标签还有其他元素，那么浏览器就会解析不到，会引起白屏现象。

脚本会阻塞后面内容的呈现
脚本会阻塞其后组件的下载

和CSS文件的放置正好相反，JS一定要放到HTML文件的末尾，也就是body文件的最后。（虽然script标签可以放置HTML文件的任何地方，但是我们不建议这么做。）

当然你如果非要将JS放置在头部中，说这样比较美观。那么如何放置白屏的问题出现，我们可以引用两个关键字放入script标签中。这两个关键字是 defter 、async。

有 async，加载和渲染后续文档元素的过程将和 script.js 的加载与执行并行进行（异步）。

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

defer:脚本延迟到文档解析和显示后执行，有顺序
async:不保证顺序

这样浏览器加载完了外部资源后，就会将DOM树和CSS树组合构建成渲染树，渲染树的基础上进行布局，计算每个节点的几何结构，把每个节点绘制到屏幕上。

这样就完成了浏览器渲染HTML文件的整个过程。当然你如果觉得我讲的比较笼统的话，可以参考[How browsers work]。

以上内容参考饥人谷课件