task 16

CSS和JS在网页中的放置顺序是怎样的？
css使用link标签放在顶部 中。

1. 把css样式放在底部会出现白屏，fouc等现象。
2. 使用@import标签即使放在link标签中且放在头部，也有可能出现白屏。

js放在底部
放前面因为js是按顺序加载，脚本会阻塞后面内容的呈现，会阻塞其后组件的下载，也会出现白屏现象。

解释白屏和FOUC
白屏：浏览器在等待页面组件包括样式表全部加载完成后才呈现整个页面。若样式表放在页面底部，将会出现白屏。——样式表在页面中位置并不影响页面中组件的下载时间，但是会影响页面的呈现。
fouc：如果把样式放在底部,对于IE浏览器,在某些场景下(点击链接,输入URL,使用书签进入等),会出现 FOUC 现象(逐步加载无样式的内容,等CSS加载后页面突然展现样式).对于 Firefox 会一直表现出 FOUC .

async和defer的作用是什么？有什么区别
defer使得browsers延迟脚本的执行，直到文档的载入和解析完成，并可以操作（在onload事件触发前）。
async使得browsers可以尽快地执行脚本，而不用在下载脚本时阻塞文档解析（异步）。在不支持async的browsers中，通过动态创建