CSS和JS在网页中的放置顺序是怎样的？###
CSS放置在<body>标签之前，一般放在<head>标签里
JS一般放在<body>标签的最后
因为js不能并行下载和解析。当引用了JS的时候，浏览器发送1个js request就会一直等待该request的返回。因为浏览器需要1个稳定的DOM树结构，而JS中很有可能有代码直接改变了DOM树结构，浏览器为了防止出现JS修改DOM树，需要重新构建DOM树的情况，就会阻塞其他的下载和呈现
解释白屏和FOUC###
白屏####
将样式表放在文档底部会导致页面延迟加载，当发生这种现象时，页面会完全空白，直到页面所有的内容同事涌上屏幕。
这种情况会发生在新窗口打开时，刷新页面时，在页面加载时最小化然后恢复窗口就能看到白屏，还有把样式表放在文档底部的页面作为主页时，打开新的浏览器窗口会导致白屏。
所以为了避免白屏，样式表应放在文档顶部的HEAD中，这时候不管页面是如何加载的，页面都是逐步呈现的。
需要注意一点的是，当页面使用@import规则时，会导致组件下载时的无序性。尽管样式表是放在HEAD里的也会最后下载，出现白屏。
FOUC####
FOUV(Flash of Unstyled Content)样式表在页面中的位置并不影响下载时间，但是会影响页面的呈现。
如果样式表仍在加载，构建呈现树就是一种浪费，因为在所有样式表加载并解析完毕之前无需绘制任何东西。否则，在其准备好之前显示内容会遇到FOUC（无样式内容的闪烁）
当页面逐步加载时，文字首先显示，然后是图片。最后，在样式表正确地下载并解析之后，已经呈现的文字和图片要用新的样式重绘。
async和defer的作用是什么？有什么区别###
- <script src="script.js"></script>
没有 defer 或 async，浏览器会立即加载并执行指定的脚本，“立即”指的是在渲染该 script 标签之下的文档元素之前，也就是说不等待后续载入的文档元素，读到就加载并执行。 - <script async src="script.js"></script>
有 async，加载和渲染后续文档元素的过程将和 script.js 的加载与执行并行进行（异步）。 - <script defer src="myscript.js"></script>
有 defer，加载后续文档元素的过程将和 script.js 的加载并行进行（异步），但是 script.js 的执行要在所有元素解析完成之后，DOMContentLoaded 事件触发之前完成。
1.jpg
蓝色线代表网络读取，红色线代表执行时间，这俩都是针对脚本的；绿色线代表 HTML 解析
- defer和async在网络加载过程是一致的，都是异步执行的
- 两者的区别在于脚本加载完成之后何时执行，可以看出defer更符合大多数场景对应用脚本加载和执行的要求
- 如果存在多个有defer属性的脚本，那么它们是按照加载顺序执行脚本的；而对于async，它的加载和执行是紧紧挨着的，无论声明顺序如何，只要加载完成就立刻执行，它对于应用脚本用处不大，因为它完全不考虑依赖
简述网页的渲染机制###
- 解析 HTML 标签, 构建 DOM 树
- 解析 CSS 标签, 构建 CSSOM 树
- 把 DOM 和 CSSOM 组合成 渲染树 (render tree)
- 在渲染树的基础上进行布局, 计算每个节点的几何结构
- 把每个节点绘制到屏幕上 (painting)
