浏览器渲染机制

CSS和JS在网页中的放置顺序是怎样的？

• CSS应放在页面头部,防止页面加载不出来出现白屏或者只加载出HTML然后再加载样式的无样式内容闪烁
  JS应放在网页下面,加载 JavaScript 时,会禁用并发,并且阻止其他内容的下载,把 JavaScript 放入页面顶部也会导致白屏现象

解释白屏和FOUC

• 白屏是Webkit内核浏览器的解析机制导致的页面不是逐步展现的现象,浏览器渲染页面时会解析完HTML和CSS后开始绘制页面,在解析的过程中,页面会出现空白的现象.可能导致白屏的做法有:把样式放在底部,使用了@import标签,另外加载 JavaScript 时,会禁用并发，并且阻止其他内容的下载. 所以把 JavaScript 放入页面顶部也会导致白屏现象.
• FOUC(Flash of Unstyled Content) 无样式内容闪烁是指逐步加载无样式的内容,等CSS加载后页面突然展现样式.因为Gecko内核的浏览器会先解析HTML内容并绘制出来,在等待解析CSS的时候就出现了FOUC.把样式放在页面底部就有可能出现FOUC.

async和defer的作用是什么？有什么区别

• 没有async和defer的时候,浏览器会立即加载并执行指定的脚本,不等后续的文档内容.async和defer是为了加载和渲染后续文档元素的过程将与脚本的加载执行并行进行（异步）.使用async不保证顺序,使用defer脚本延迟到文档解析和显示后执行，有顺序.

简述网页的渲染机制

1. 解析HTML标签,构建DOM树
2. 解析CSS标签,构建CSSOM树
3. 把DOM树和CSSOM树组合成为渲染树(render tree)
4. 在渲染树的基础上进行布局,计算每个节点的几何结构,把每个节点绘制到屏幕上