1. CSS和JS在网页中的放置顺序是怎样的？
- css样式放在head标签中，通常引入方式为
<link href="index.css" rel="stylesheet" type="text/css"></link>
- js放置在body标签的最后，因为相对于其他的图片或者css来说，js是阻塞的，所以等页面的渲染树成行后引入js就可以避免白屏现象，通常外链引入方式为
<script src="index.js"></script>
2. 解释白屏和FOUC
- 白屏：其实是浏览器在渲染页面的时候请求时间过长导致的，如chrome的渲染流程是解析HTML-->构建Dom-->解析Css-->构建Cssom-->组合Dom和Cssom成渲染树(Render Tree)-->在渲染树的基础上布局并进行计算-->把节点绘制到屏幕上(painting)。所以，如果把样式放在页面底部会出现白屏现象。如果使用@import标签载入样式，即使把样式放在head标签中，也会出现白屏现象。如果把js放在head里或者body中间，JS加载时会阻塞后面内容的呈现，页面也可能会出现白屏现象。
- FOUC：其实是FireFox的渲染逻辑和Chrome的不太一样，Chrome是等待渲染树和位置计算好才会出来网页的内容，但到了FireFox每加载一次dom树就会重绘一次网页样式，一直到所有内容完成为止，所以一般我们用link把css放在header内.
3. async和defer的作用是什么？有什么区别
使用方法：
<script async src="index.js"></script>
<script defer src="index.js"></script>
- 通常情况下，即没有async和defer，浏览器会立即加载并执行指定的脚本，即渲染到script就会立即加载并执行js。
- 有async的情况下，加载和渲染后续文档元素的过程将和 script.js 的加载与执行并行进行。
-
有defer的情况下，加载后续文档元素的过程将和 script.js 的加载并行进行，但执行js是等所有元素加载完成后再执行。
- 由图可知：1. defer 和 async 在网络读取（下载）这部分是一样的，都是异步的（相较于 HTML 解析）。2. 两者的差别在于脚本下载完之后何时执行，由图知defer是按照加载顺序执行脚本的，这一点要善加利用。3. async 则是乱序执行，所以不管你声明的顺序如何，只要它加载完了就会立刻执行。
4. 简述网页的渲染机制
- 解析HTML标签，生成DOM树
- 解析CSS元素，生成CSSOM树
- 把DOM和CSSOM组合成渲染树
- 在渲染树的基础上进行布局，计算每个节点的几何机构
- 把每个节点绘制到屏幕上
(mission 1)
