CSS和JS在网页中的放置顺序是怎样的？
- 由于浏览器渲染机制，Render Tree是由DOM树和CSSOM树组合成的，html页面需要等到CSS解析完后才能完成渲染，所以CSS应放在head标签内，优先下载解析，以避免页面元素由于样式缺失造成瞬间的白页或者给用户闪烁感为
- js是使用script标签在body的闭合标签之前进行引入，浏览器需要一个稳定的dom树结构，浏览器为了防止出现js修改dom树，需要重新构建dom树的情况，所以就会阻塞其他的下载和呈现，出现白屏
解释白屏和FOUC
白屏
- 如果把样式放在底部，由于html页面需要等到CSS解析完后才能完成渲染，故页面会出现白屏,而不是内容逐步展现， 如果使用 @import 标签,即使 CSS 放入 link, 并且放在头部,也可能出现白屏（@import加载完html，在引入外部文件）
- 对于图片和CSS，在加载时会并发加载（如一个域名下同时加载两个文件）。但在加载JavaScript 时，会禁用并发，并且阻止其他内容的下载。所以把JavaScript放入页面顶部也会导致白屏现象
FOUC
FOUC（Flash of Unstyled Content）无样式内容闪烁现象（逐步加载无样式的内容，等CSS加载后页面突然展现样式）。由于浏览器渲染机制不同，css样式放在底部,浏览器边渲染边逐步呈现组件，Firefox会一直表现出FOUC
async和defer的作用是什么？有什么区别
async和defer的作用（加载异步）
没有 defer 或 async，浏览器会立即加载并执行指定的脚本，“立即”指的是在渲染该script标签之下的文档元素之前，也就是说不等待后续载入的文档元素，读到就加载并执行。有 defer 或 async，加载续文档元素的过程将和 script.js 的加载并行进行
async和defer的区别
有 async，加载和渲染后续文档元素的过程将和 script.js 的加载与执行并行进行（异步）。
有 defer，加载后续文档元素的过程将和 script.js 的加载并行进行（异步），但script.js的执行要在所有元素解析完成之后，DOMContentLoaded事件触发之前完成。
defer脚本延迟到文档解析和显示后执行，有顺序
async不保证脚本执行顺序
简述网页的渲染机制
- 解析 HTML 标签, 构建 DOM 树
- 解析 CSS 标签, 构建 CSSOM 树
- 把 DOM 和 CSSOM 组合成 渲染树 (render tree)
- 在渲染树的基础上进行布局, 计算每个节点的几何结构
-
把每个节点绘制到屏幕上 (painting)
截图06.png
Gecko调用视觉格式化元素的树 - 框架树。每个元素都是一个框架。Webkit使用术语“渲染树”，它由“渲染对象”组成。
