1. CSS和JS在网页中的放置顺序
CSS和JS可以放置在页面上的任意位置，但为了解决白屏和无样式闪烁问题，推荐放置位置为：
- CSS放置head>style标签内
- JS放置body闭合标签前的script标签内
2.简述网页的渲染机制
- 解析HTML，构建DOM树
- 解析CSS，构建CSSOM树
- 组合DOM和CSSOM，构建渲染树
- 在渲染树的基础上进行布局，计算每个节点的几何结构
- 把页面按规则呈现到屏幕上
整个流程可参考如下图片：
整个流程——来源自网络
构建渲染树——来源自网络
3.解释白屏和FOUC
不同品牌的浏览器处理解析HTML和CSS的方式不一样，这就会造成不同的问题
白屏
一些浏览器需要按照网页渲染顺序一步一步执行，最终一次性呈现所有内容。
所以构建渲染树之前的文件准备时间过长或被阻塞，导致浏览器无法破译代码，屏幕上没有可以被呈现的内容，就会出现白屏问题两种情况会触发白屏：
1.CSS文件准备时间过长，这段时间内没有构建渲染树的原料——CSSOM，还需等待CSS代码解析完毕
⊙ 此时CSS代码可能位置：CSS样式使用@import标签引入、CSS文件放置代码尾部2.JS文件阻塞后续代码的加载，导致构建渲染树的原料（DOM和CSSOM）工作被迫中断，此时需要等待JS代码完全被执行完毕
⊙ 此时JS代码可能位置：JS文件放置代码头部无样式闪烁FOUC
对于一些浏览器，它们并不会严格按照顺序进行页面渲染，它们不会等待完成构建渲染树后再进行统一的一次展示，而是会发生两次展示。
所以浏览器首先会逐步加载无样式内容，然后突然展示样式
- 第一次：解析html代码直接展示破译后的无样式内容，
- 第二次：解析完CSS代码后，组合DOM和CSSOM进行构建渲染树，最后展示样式
- 当第一次页面会重新排版布局变成第二次页面，所以就会发生页面闪烁之后，内容和样式被同时展示出来
⊙ 此时CSS代码可能位置：CSS文件放置代码尾部
