进阶任务1

1.CSS和JS在网页中的放置顺序是怎样的？
CSS放置在head中，
JS放置在body的底部。
2.解释白屏和FOUC
如果把CSS放在底部，对于IE浏览器，在某些场景瞎（新窗口打开，刷新等）页面会出现白屏，并不是内容逐步展现，如果实用@import标签，即使CSS放入link，并且放在head，也可能出现白屏。
把JS放在页面顶部也会导致白屏现象。
FOUC无样式内容闪烁，如果把CSS放在底部，对于IE浏览器，在某些场景下（点击链接，输入URL，使用书签进入等）会出现FOUC现象，逐步加载无样式内容等CSS加载后页面突然展现样式,对于firefox会一直表现出FOUC。
3.async和defer的作用是什么？有什么区别
async加载和渲染后续文档元素的过程将和script.js的加载与执行并行进行。
defer加载后续文档元素的过程将和script.js的加载并行进行，但script,js的执行要在所有元素解析完成后，DOM content loaded事件触发之前完成。
defer脚本延迟到文档解析和显示后执行，有顺序。
async不保证顺序。
4.简述网页的渲染机制

• 第一步，解析html标签，构建DOM树。
• 第二步，解析CSS标签，构建CSSOM树。
• 第三步，把DOM和CSSOM组合成渲染树（render tree）在渲染树的基础上进行布局，计算每个节点的几何结构把每个节点绘制到屏幕上。